导航相关的组件:面包屑、手风琴、下拉菜单和徽章

2021-05-20 0 By admin

React-Bootstrap UI框架资料整理过程中,与导航相关的组件还包括面包屑(BreadCrumbs)、手风琴(Accordion)、下拉菜单(Dropdowns)和徽章(Badges)组件。

一、Breadcrumbs 面包屑

指示当前页面在导航层次结构中的位置,该层次结构会通过CSS自动添加分隔符。
在设置 Item 时,请勿同时对 Breadcrumb.Item 组件设置 active 和 href 属性;active 属性会覆盖 href 属性并以 span 元素呈现而不是 a 超链接元素。

1.1、API接口

  1. Breadcrumb
  2. Breadcrumb.Item

二、Accordion 手风琴

手风琴提供了一种受限制的Card组件,一次只能打开一个组件的方法。
手风琴使用 Card组件 来提供手风琴组件的样式。使用 AccordionToggle 提供一个在每个 AccordionCollapse 组件之间切换的按钮。

2.1、Fully Collapsed State 完全折叠状态

如果您希望手风琴以完全折叠的状态开始,则只需不设置 defaultActiveKey 属性即可。

2.2、Entire Header Clickable 整个标题可点击

通过将 AccordionToggle 的基础组件设置为 CardHeader 组件,手风琴中的每个Card组件都可以单击其整个标题。

2.3、Custom Toggle 自定义切换

现在,您可以通过 useAccordionToggle 制作自定义切换组件来加入“手风琴”切换功能。

2.4、Custom Toggle with Expansion Awareness 使用不同样式的自定义切换

如果展开了关联部分,您可能希望对切换使用不同的样式,这可以通过具有上下文感知能力的自定义切换来实现,并且还可以利用 useAccordionToggle 钩子。

2.5、API 接口

  1. Accordion
  2. Accordion.Toggle
  3. Accordion.Collapse
  4. useAccordionToggle

三 、Dropdowns 下拉菜单

使用Bootstrap的下拉菜单切换上下文叠加层以显示链接列表以及更多内容

3.1、概述

下拉菜单是可切换的上下文叠加层,用于显示链接列表等。与叠加层(overlays)一样,下拉列表是使用第三方库Popper.js构建的,该库提供了动态定位和视口检测。

3.1.1、辅助功能

该WAI ARIA标准定义了一个 role="menu" 小工具,但它是非常具体的某一种菜单。ARIA的菜单,只能包含role="menuitem",role="menuitemcheckbox"或role="menuitemradio"
另一方面,Bootstrap 的下拉菜单旨在在各种情况下更加通用和应用。因此,我们不会自动将菜单角色添加到标记中。我们确实实现了一些基本的键盘导航,并且如果您确实提供了“菜单”角色,则react-bootstrap将尽最大努力确保焦点管理符合菜单的ARIA编写准则。

3.2、例子

3.2.1、单键下拉菜单

基本的 Dropdown 由包装Dropdown,内部 DropdownMenu和 DropdownToggle 组成。默认情况下,DropdownToggle它将渲染一个 Button组件并接受所有相同的属性。
另外 react-bootstrap 提供了DropdownButton组件,有助于减少键入的组件。提供一个title 属性和一些DropdownItem属性。DropdownButton 会将 Button属性转发1到基础的Toggle组件。

3.2.2、Split button dropdowns 拆分按钮的下拉菜单

同样,您可以通过将 Dropdown组件与另一个Button和ButtonGroup组合来创建拆分下拉列表。与DropdownButton一样,SplitButton作为便利组件提供。

3.2.3、Sizing 尺寸

下拉菜单可使用各种尺寸的按钮。

3.3、Drop directions 下拉方向

使用 drop 属性设置下拉菜单切换方向:上方,下方,左侧或右侧。

3.4、Dropdown items 下拉项目

过去,下拉菜单的内容必须是链接,但 Bootstrap v4不再是这种情况。现在,您可以选择button 元素在下拉菜单中使用,而不只是使用 a 超链接元素。
您还可以使用创建非交互式下拉项 Dropdown.ItemText。随意使用自定义CSS或文本实用程序进一步设置样式。

3.5、Menu alignment 菜单对齐

默认情况下,下拉菜单中左对齐。
但您可以通过在 DropdownMenu 组件中的 align 属性设置 right,或者通过在DropdownButton 或SplitButton 组件中设置 menuAlign 属性为 Right。

3.6、Menu headers 菜单标题

将标头添加到操作的标签部分。

3.7、Menu dividers 菜单分隔线

用分隔符将相关菜单项的组分开。

3.8、Customization 自定义

如果您不喜欢下拉菜单和切换组件的默认处理方式,则可以通过使用更基本的 Dropdown 组件显式指定 Toggle和Menu组件来自定义它们。

3.9、API 接口

  1. DropdownButton
  2. SplitButton
  3. Dropdown
  4. Dropdown.Toggle
  5. Dropdown.Menu
  6. Dropdown.Item
  7. Dropdown.Header
  8. Dropdown.Divider

四、Badges 徽章

通过使用相对字体大小和em单位,徽章可缩放以匹配直接父元素的大小。徽章可以用作链接或按钮的一部分,以提供计数器(Counter 业务作用)。
请注意,根据使用方式的不同,徽章可能会使屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章的样式提供了有关其用途的视觉提示,但将仅向这些用户显示徽章的内容。根据具体情况,这些标记在句子,链接或按钮的末尾可能看起来像是随机附加的单词或数字。除非上下文清楚,否则请考虑在视觉上隐藏的其他文本中包含其他上下文。

4.1、Contextual variations 样式差异

Bootstrap 提供了8中徽章的样式,通过添加响应的属性,展示不同的样式。

4.2、Pill 圆滑

徽章使用 pill 修饰符类可使徽章更圆(带有更大border-radius和附加的水平padding)。

4.3、API接口

  1. Badge