下拉菜单

简介

abp-dropdown 是下拉内容的主要容器。

基本用法：

<abp-dropdown>
    <abp-dropdown-button text="下拉按钮" />
    <abp-dropdown-menu>
        <abp-dropdown-item href="#">操作</abp-dropdown-item>
        <abp-dropdown-item href="#">其他操作</abp-dropdown-item>
        <abp-dropdown-item href="#">其他内容</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

演示

查看下拉菜单演示页面以查看实际效果。

属性

direction

指示下拉按钮显示方向的值。应为以下值之一：

• Down（默认值）
• Up
• Right
• Left

dropdown-style

指示abp-dropdown-button是否具有下拉分割图标的值。应为以下值之一：

• Single（默认值）
• Split

菜单项

abp-dropdown-menu 是下拉菜单项的主要容器。

基本用法：

<abp-dropdown>
    <abp-dropdown-button button-type="Secondary" text="下拉菜单"/>
    <abp-dropdown-menu>
        <abp-dropdown-header>下拉菜单标题</abp-dropdown-header>
        <abp-dropdown-item href="#">操作</abp-dropdown-item>
        <abp-dropdown-item active="true" href="#">激活操作</abp-dropdown-item>
        <abp-dropdown-item disabled="true" href="#">禁用操作</abp-dropdown-item>
        <abp-dropdown-divider/>
        <abp-dropdown-item-text>下拉菜单项文本</abp-dropdown-item-text>
        <abp-dropdown-item href="#">其他内容</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

属性

align

指示abp-dropdown-menu项对齐方向的值。应为以下值之一：

• Start（默认值）
• End

附加内容

abp-dropdown-menu还可以包含其他HTML元素，如标题、段落、分隔线或表单元素。

示例：

<abp-dropdown >
    <abp-dropdown-button button-type="Secondary" text="带表单的下拉菜单"/>
    <abp-dropdown-menu>
        <form class="px-4 py-3">
            <abp-input asp-for="EmailAddress"></abp-input>
            <abp-input asp-for="Password"></abp-input>
            <abp-input asp-for="RememberMe"></abp-input>
            <abp-button button-type="Primary" text="登录" type="submit" />
        </form>
        <abp-dropdown-divider></abp-dropdown-divider>
        <abp-dropdown-item href="#">新用户？注册</abp-dropdown-item>
        <abp-dropdown-item href="#">忘记密码？</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>