@acusti/dropdown 中文文档教程

Question

@acusti/dropdown

Dropdown 是一个 React 组件，它呈现一个带有触发器的类似菜单的 UI 用户单击以显示位于触发器下方的下拉菜单。 下拉列表的主体可以包含任何 DOM，并且可以是许多下拉列表 组合成一个多项目菜单，就像顶部工具栏中的系统菜单 macOS 的。

该组件存在的三个主要设计目标：

1. Best-in-class UX (inspired by macOS native menus) with excellent keyboard support
2. Best-in-class DX with the simplest possible API:
   1. To create a dropdown with a <button> trigger, pass in a single child element with the body of the dropdown
   2. To create a dropdown with a custom trigger, pass in exactly two child elements; the first is the trigger, the second is the body of the dropdown
   3. To create a dropdown with a list of items as the body, use the data-ukt-item boolean to mark dropdown items, or use data-ukt-value="foo" to specify that an element is a dropdown item and the value of that item at the same time (otherwise, the value is the text content of the dropdown item element)
   4. To style your dropdowns, use CSS; there are a collection of CSS variables used internally to style them if that works best for you, or just override the minimal default CSS as appropriate
3. Lightweight bundle size with the bare minimum of dependencies (see minzipped size above)