标签页 tabs

用法

标签页由 tabs 和 tabPane 两个部件组合渲染：

zin 声明

tabs
(
    tabPane
    (
        set::key('legend-basic'),
        set::title('基本信息'),
        set::active(true),
        tableData
        (
            item
            (
                set::name('所属执行'),
                '企业网站第一期'
            ),
            item
            (
                set::name('指派给'),
                '开发丙'
            ),
            item
            (
                set::name('任务类型'),
                '开发'
            ),
            item
            (
                set::name('任务状态'),
                '已完成'
            ),
            item
            (
                set::name('进度'),
                '100 %'
            ),
            item
            (
                set::name('优先级'),
                priLabel(1);
            ),
        )
    ),
    tabPane
    (
        set::key('legend-life'),
        set::title('任务的一生'),
        tableData
        (
            item
            (
                set::name('由谁创建'),
                'admin 于 2021-04-28 13:16:15'
            ),
            item
            (
                set::name('由谁完成'),
                '开发丙 于 2021-04-06 15:30:00'
            ),
            item
            (
                set::name('由谁取消'),
                '暂无'
            ),
            item
            (
                set::name('由谁关闭'),
                '暂无'
            ),
            item
            (
                set::name('关闭原因'),
                '暂无'
            ),
            item
            (
                set::name('最后编辑'),
                '开发丙 于 2021-04-28 13:21:51'
            ),
        )
    )
);

生成的 HTML

<div class="tabs">
    <ul class="nav nav-tabs gap-x-5">
        <li class="nav-item active"><a class="font-medium" data-toggle="tab" href="#legend-basic">基本信息</a></li>
        <li class="nav-item"><a class="font-medium" data-toggle="tab" href="#legend-life">任务的一生</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="legend-basic">
            <table class="table-data">
                <tbody>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">所属执行</th>
                        <td class="py-1.5 pl-2">企业网站第一期</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">指派给</th>
                        <td class="py-1.5 pl-2">开发丙</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">任务类型</th>
                        <td class="py-1.5 pl-2">开发</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">任务状态</th>
                        <td class="py-1.5 pl-2">已完成</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">进度</th>
                        <td class="py-1.5 pl-2">100 %</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">优先级</th>
                        <td class="py-1.5 pl-2"><span class="pri-1">1</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="tab-pane" id="legend-life">
            <table class="table-data">
                <tbody>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">由谁创建</th>
                        <td class="py-1.5 pl-2">admin 于 2021-04-28 13:16:15</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">由谁完成</th>
                        <td class="py-1.5 pl-2">开发丙 于 2021-04-06 15:30:00</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">由谁取消</th>
                        <td class="py-1.5 pl-2">暂无</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">由谁关闭</th>
                        <td class="py-1.5 pl-2">暂无</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">关闭原因</th>
                        <td class="py-1.5 pl-2">暂无</td>
                    </tr>
                    <tr>
                        <th class="py-1.5 pr-2 text-right font-normal nowrap">最后编辑</th>
                        <td class="py-1.5 pl-2">开发丙 于 2021-04-28 13:21:51</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

属性

tabs

名称	类型	可选	默认值	说明
direction	string	✓	"h"	标签的排列方向

tabPane

名称	类型	可选	默认值	说明
key	string	—	—	唯一标识
title	string	—	—	标题
active	bool	✓	false	是否为激活项