10up 标签组件

标签部分基于并扩展了来自在 简单无障碍它是一个剥去的,但仍可访问的UI标签版本。 它们既方便键盘使用,又方便用户使用,是您在项目中使用的起点.

安装

国家预防机制

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

独立

克隆此还原并导入 tabs.js 财务报告和审定财务报表 tabs.css 从 dist/ 目录.

API 密码

此组件接受两个参数,标签容器的选择器和包含可选回调的对象.

回电

• onCreate: 标签在页面负荷初始化后调用
• onTabChange: 标签更改后调用

使用量

标记

这是组件预期的标记模板 .

<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>

支助科

样式可以通过使用 PostCSS 导入来导入到您现有的代码库, 或者通过将独立的 CSS 文件包含在您的工程中 .

PostCSS 导入

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

独立

包含 tabs.css 从文档 dist/ 目录.

Java 脚本

通过提供选择器用于制表符和包含任何必要回调功能的对象来创建新实例 .

国家预防机制

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

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

独立

<script src="unpkg.com/@10up/[email protected]/index.umd.js"></script>

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

演示

执行实例可参见: demo 目录.

支助级别

活动 : 10up公司正在积极开展这方面的工作,我们期望在可预见的未来继续工作,包括不断测试最新的WordPress版本。 欢迎错误报告、特性请求、问题和拉动请求.

就像你看到的一样?