@10up/component-tabs 中文文档教程

Question

10up Tabs component

选项卡组件基于并扩展了人们在 Simply Accessible 所做的工作。 它是一个精简但仍可访问的 UI 选项卡版本。 它们可通过键盘访问且用户友好，旨在作为您在项目中使用的起点。

Installation

NPM

npm install --save @10up/component-tabs

Standalone

克隆这个 repo 并从 dist 导入 tabs.js 和 tabs.css / 目录。

API

该组件接受两个参数，选项卡容器的选择器和包含可选回调的对象。

Callbacks

• onCreate: Called after the tabs are initialized on page load
• onTabChange: Called after a tab has been changed

Usage

Markup

这是组件期望的标记模板。

<div class="tabs">
    <div class="tab-control">
        <ul class="tab-list" role="tablist">
            <li class="tab-item"><button role="tab" aria-controls="js-tab1">View Tab 1</button></li>
            <li class="tab-item"><button role="tab" aria-controls="js-tab2">View Tab 2</button></li>
        </ul>
    </div>
    <div class="tab-group">
        <div class="tab-content" id="js-tab1" role="tabpanel">
            <h2>Tab 1 Content</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="tab-content" id="js-tab2" role="tabpanel">
            <h2>Tab 2 Content</h2>
            <p>In tincidunt tempor risus gravida tincidunt.</p>
        </div>
    </div>
</div>

CSS

这些样式可以通过使用 PostCSS 导入或通过在您的项目中包含独立的 CSS 文件来导入到您现有的代码库中。

PostCSS Imports

@import "@10up/component-tabs";

Standalone

包含 dist/ 目录中的 tabs.css 文件。

JavaScript

通过提供用于选项卡的选择器和包含任何必要回调函数的对象来创建新实例。

NPM

import Tabs from '@10up/component-tabs';

new Tabs( '.tabs', {
    onCreate: function() {
        console.log( 'onCreate callback' );
    },
    onTabChange: function() {
        console.log( 'onTabChange callback' );
    }
} );

Standalone

<script src="unpkg.com/@10up/component-tabs@2.0.0/index.umd.js"></script>

let myTabs = new TenUp.tabs( '.tabs', {
    onCreate: function() {
        console.log( 'onCreate callback' );
    },
    onTabChange: function() {
        console.log( 'onTabChange callback' );
    }
} );

Demo

可以在 demo 目录中找到示例实现。

Support Level

活跃：10up 正在为此积极努力，我们希望在可预见的未来继续努力，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?