下拉菜单

介绍

abp-dropdown 是下拉菜单的主要容器.

基本用法:

  1. <abp-dropdown>
  2. <abp-dropdown-button text="Dropdown button" />
  3. <abp-dropdown-menu>
  4. <abp-dropdown-item href="#">Action</abp-dropdown-item>
  5. <abp-dropdown-item href="#">Another action</abp-dropdown-item>
  6. <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
  7. </abp-dropdown-menu>
  8. </abp-dropdown>

Demo

参阅 下拉菜单demo页面查看示例.

Attributes

direction

指定下拉菜单的方向. 应为以下值之一:

  • Down (默认值)
  • Up
  • Right
  • Left

dropdown-style

指定 abp-dropdown-button 是否具有用于拆分的拆分图标. 应为以下值之一:

  • Single (默认值)
  • Split

Menu items

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

基本用法:

  1. <abp-dropdown>
  2. <abp-dropdown-button button-type="Secondary" text="Dropdown"/>
  3. <abp-dropdown-menu>
  4. <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
  5. <abp-dropdown-item href="#">Action</abp-dropdown-item>
  6. <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
  7. <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
  8. <abp-dropdown-divider/>
  9. <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
  10. <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
  11. </abp-dropdown-menu>
  12. </abp-dropdown>

Attributes

align

指定 abp-dropdown-menu 在哪个方向对齐. 应为以下值之一:

  • Left (默认值)
  • Right

Additional content

abp-dropdown-menu 也可以包含其他HTML元素,例如标题,段落,分隔符或form元素.

示例:

  1. <abp-dropdown >
  2. <abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
  3. <abp-dropdown-menu>
  4. <form class="px-4 py-3">
  5. <abp-input asp-for="EmailAddress"></abp-input>
  6. <abp-input asp-for="Password"></abp-input>
  7. <abp-input asp-for="RememberMe"></abp-input>
  8. <abp-button button-type="Primary" text="Sign In" type="submit" />
  9. </form>
  10. <abp-dropdown-divider></abp-dropdown-divider>
  11. <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
  12. <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
  13. </abp-dropdown-menu>
  14. </abp-dropdown>