下拉菜单 dropdown

用法

通过 ZUI Dropdown 组件实现，更多用法请参考 ZUI dropdown。

属性渲染

zin 声明

dropdown
(
    '更多操作',
    set::items
    ([
        ['text' => '激活', 'url' => '/active'],
        ['text' => '变更', 'url' => '/change', 'icon' => 'edit'],
    ]),
    set::arrow(true),
    set::flip(true),
    set::placement('bottom-center'),
    set::strategy('absolute'),
    set::hasIcons(true),
    set::trigger('hover'),
    set::menuProps(['data-gid' => 'ac34d39djc']),
);

生成的 HTML

<a
    data-target="#zin12"
    data-toggle="dropdown"
    data-placement="bottom-center"
    data-strategy="absolute"
    data-flip="true"
    data-arrow="true"
    data-trigger="hover"
    id="zin12-toggle"
>更多操作</a>
<div class="dropdown-menu" style="width: max-content; position: absolute; top: 275px; left: 967.508px;">
    <menu class="menu menu-context has-icons menu-popup" data-gid="ac34d39djc">
        <li class="action-menu-item menu-item"><a class="" href="/active" type="item"><span class="text">激活</span></a></li>
        <li class="action-menu-item menu-item"><a class="" href="/change" type="item"><i class="icon icon-edit"></i><span class="text">变更</span></a></li>
        <div style="position: absolute; width: 8px; height: 8px; transform: rotate(45deg); left: 0px; top: 0px; background: inherit; border-color: inherit; border-top-style: inherit; border-width: inherit; border-right-style: none; border-bottom-style: none; border-left-style: inherit; border-image: inherit;"></div>
    </menu>
</div>

块渲染

zin 声明

dropdown
(
    to('trigger', btn('菜单按钮')),
    to('menu', menu
        (
            set::items
            ([
                ['text' => '复制', 'icon' => 'copy'],
                ['text' => '粘贴', 'icon' => 'paste'],
                ['text' => '保存', 'icon' => 'save'],
            ])
        )
    ),
    set::arrow(14)
);

生成的 HTML

<button class="btn" type="button" data-target="#zin14" data-toggle="dropdown" data-arrow="14" id="zin14-toggle">
    <span class="text">菜单按钮</span>
    <span class="caret"></span>
</button>
<menu class="menu menu-popup" id="zin14" style="width: max-content; position: fixed; top: 294px; left: 941.5px;">
    <li class="menu-item"><a class=""><i class="icon icon-copy"></i>复制</a></li>
    <li class="menu-item"><a class=""><i class="icon icon-paste"></i>粘贴</a></li>
    <li class="menu-item"><a class=""><i class="icon icon-save"></i>保存</a></li>
    <div style="position: absolute; width: 14px; height: 14px; transform: rotate(45deg); left: 38px; top: -7px; background: inherit; border-color: inherit; border-top-style: inherit; border-width: inherit; border-right-style: none; border-bottom-style: none; border-left-style: inherit; border-image: inherit;"></div>
</menu>

属性

属性名	类型	默认值	说明
items	array	-	菜单项属性
placement	string	-	菜单位置
strategy	'absolute'|'fixed'	-	定位方式
offset	int	-	偏移量
flip	bool	-	可视性翻转优化
subMenuTrigger	'click'|'hover'	-	子菜单触发方式
arrow	bool|int	-	是否显示箭头或箭头大小
trigger	'click'|'hover'|'manual'	-	触发方式
menuProps	array	-	菜单属性
target	string	-	响应目标
id	string	-	ID
menuClass	string	-	菜单类
hasIcons	bool	-	是否有图标
staticMenu	bool	-	是否为静态菜单

块

块名词	映射类型	说明
trigger	btn, a	触发菜单的部件
menu	menu	菜单
items	item	菜单项