浮动工具栏 floatToolbar

用法

用于渲染禅道详情页浮动工具栏。

zin 声明

floatToolbar
(
    set::prefix
    (
        array(
            array('icon' => 'back', 'text' => '返回'),
        )
    ),
    set::main
    (
        array(
            array('icon' => 'time', 'text' => '日志', 'url' => '#'),
            array('icon' => 'change', 'text' => '变更'),
            array('icon' => 'hand-right', 'text' => '指派'),
            array('icon' => 'off', 'text' => '关闭'),
        )
    ),
    set::suffix
    (
        array(
            array('icon' => 'edit', 'url' => '#'),
            array('icon' => 'copy'),
        )
    ),
    to::main
    (
        dropdown
        (
            btn(setClass('text-white ghost'), set::icon('testcase'), '用例'),
            set::items
            (
                array(
                    array('text' => '创建'),
                    array('text' => '批量创建')
                )
            ),
        )
    ),
);

生成的 HTML

<div class="float-toolbar inline-flex rounded p-1.5 items-center">
    <button class="ghost text-white btn" type="button">
        <i class="icon icon-back"></i>
        <span class="text">返回</span>
    </button>
    <div class="divider w-px h-6 mx-2"></div>
    <a class="ghost text-white btn btn-default" type="button" href="#">
        <i class="icon icon-time"></i>
        <span class="text">日志</span>
    </a>
    <button class="ghost text-white btn" type="button">
        <i class="icon icon-change"></i>
        <span class="text">变更</span>
    </button>
    <button class="ghost text-white btn" type="button">
        <i class="icon icon-hand-right"></i>
        <span class="text">指派</span>
    </button>
    <button class="ghost text-white btn" type="button">
        <i class="icon icon-off"></i>
        <span class="text">关闭</span>
    </button>
    <button class="text-white ghost btn" type="button" data-target="#zin11" data-toggle="dropdown" id="zin11-toggle">
        <i class="icon icon-testcase"></i>
        <span class="text">用例</span>
        <span class="caret"></span>
    </button>
    <div class="divider w-px h-6 mx-2"></div>
    <a class="ghost text-white btn square btn-default" type="button" href="#">
        <i class="icon icon-edit"></i>
    </a>
    <button class="ghost text-white btn square" type="button">
        <i class="icon icon-copy"></i>
    </button>
    <div class="dropdown-menu show" style="width: max-content; position: fixed; top: 262px; left: 874.078px;">
        <menu class="menu menu-context menu-popup">
            <li class="action-menu-item menu-item">
                <a class="" type="item"><span class="text">创建</span></a>
            </li>
            <li class="action-menu-item menu-item">
                <a class="" type="item"><span class="text">批量创建</span></a>
            </li>
        </menu>
    </div>
</div>

属性

属性名	类型	默认值	说明
prefix	array	-	左侧按钮区按钮配置数组
main	array	-	中间按钮区按钮配置数组
suffix	array	-	右侧按钮区按钮配置数组

块

块名词	映射类型	说明
prefix	-	用于向左侧按钮区域追加复杂部件，追加多个时可使用数组
main	-	用于向中间按钮区域追加复杂部件，追加多个时可使用数组
suffix	-	用于向右侧按钮区域追加复杂部件，追加多个时可使用数组