Dropdowns 下拉菜单 - bootstrap react

pencil 27天前 25

使用引导下拉插件切换上下文覆盖以显示链接列表等
概述
下拉列表是可切换的上下文覆盖,用于显示链接列表等。与覆盖一样,下拉列表是使用第三方库Popper.js构建的,该库提供动态定位和视口检测
可达性
WAI-ARIA标准定义了一个role=“menu”小部件,但它非常特定于某种菜单。ARIA菜单只能包含role=“menuitem”、role=“menuitemcheckbox”或role=“menuitemradio”。
另一方面,Bootstrap的下拉列表被设计成在各种情况下更加通用和应用。因此,我们不会自动将菜单角色添加到标记中。我们确实实现了一些基本的键盘导航,如果您提供了“菜单”角色,react bootstrap将尽最大努力确保焦点管理符合菜单的ARIA创作指南
示例
单键下拉列表
基本下拉列表由包装下拉列表、内部<DropdownMenu>和<dropdownttoggle>组成。默认情况下,<DropdownToggle>将呈现一个按钮组件并接受所有相同的道具。
拆分按钮下拉列表
类似地,通过将下拉列表组件与另一个按钮和按钮组组合,可以创建拆分下拉列表。
调整大小
下拉菜单适用于各种大小的按钮。
下降方向
使用drop prop在其toggle元素的上方、下方、左侧或右侧触发下拉菜单。
下拉列表项
历史上,下拉菜单的内容必须是链接,但v4不再是这种情况。现在,您可以选择在下拉列表中使用<button>元素,而不仅仅是<a>s。
您还可以使用<dropdown.ItemText>创建非交互式下拉项。您可以随意使用自定义CSS或文本工具进一步设计样式。菜单对齐方式
默认情况下,下拉菜单向左对齐,但您可以通过将其向右传递到<DropdownMenu>上的align prop,或将其向右传递到<DropdownButton>或<SplitButton>上的menuAlign prop来进行切换。
菜单标题
将标题添加到动作的标签部分。
菜单分隔符
用分隔符分隔相关菜单项组。
定制
如果下拉菜单和切换组件的默认处理方式不符合您的喜好,您可以通过使用更基本的<dropdown>组件显式指定切换和菜单组件来自定义它们
自定义下拉组件
对于那些想要自定义所有内容的用户,您可以放弃附带的切换和菜单组件,创建自己的组件。通过向as prop提供自定义组件,可以控制每个组件的行为。自定义切换和菜单组件必须能够接受引用。


API
    DropdownButton
    SplitButton
    Dropdown
    Dropdown.Toggle
    Dropdown.Menu
    Dropdown.Item
    Dropdown.Header
    Dropdown.Divider

最新回复 (0)
返回
发新帖