下坠
Dropdown菜单为用户提供了一个可以接收任何内容的框. 它还提供了一个备选方案组成部分.
图片参考
降级使用
import { useRef, useState } from 'react';
import { Dropdown } from '@dt-dds/react';
const options = [
{ text: 'Option 1', value: '1' },
{ text: 'Option 2', value: '2' },
];
export const App = () => {
const anchorRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<button ref={anchorRef} onClick={() => setIsOpen(!isOpen)}>
Menu
</button>
<Dropdown
anchorRef={anchorRef}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
>
{options.map((option) => (
<Dropdown.Option key={option.value}>{option.text}</Dropdown.Option>
))}
</Dropdown>
</>
);
};
属性
下坠
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
children | ReactNode | —— 说 | 儿童组件/内容将在下降过程中提供. |
style | React.CSSProperties | —— 说 | 内置样式合并 之后 计算定位样式. |
dataTestId | string | dropdown | 自定义的测试标识符适用于下拉根元素 . |
isOpen | boolean | false | 控制能见度. 何时 false,该元素通过 aria-hidden。 。 。 . |
anchorRef | RefObject<HTMLElement | null> | - 说吧 | 参考定位所使用的锚地元素. |
matchWidth | boolean | true | 若为 true,所降宽度与锚地宽度相匹配. |
offsetX | number | 0 | 水平平分(px)适用于所有位置. |
offsetY | number | 4 | 所有安放均适用垂直平分(px). |
isFocusable | boolean | true | 若为 true,将降水包成一个 FocusTrap 键盘导航. |
onClose | () => void | —— 说 | 在滴出/锁定器外检测到点击时调用 . |
as | keyof JSX.IntrinsicElements | "div" | 基础 HTML 元素( 例如, ), "ul" 用于列表语义学). |
placement | DropdownPlacement | bottom | 落地姿势. |
...rest | HTMLAttributes | —— 说 | 标准 HTML 属性. |
放下来 选项
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
style | React.CSSProperties | —— 说 | 选项元素的内部样式. |
children | ReactNode | —— 说 | 备选案文的内容. |
dataTestId | string | dropdown-option | 选项元素的自定义测试标识符 . |
isDisabled | boolean | false | 何时 true组合 aria-disabled 并点击/键盘激活. |
isSelected | boolean | false | 通过 aria-selected 和造型. |
isHighlighted | boolean | false | 添加数 data-highlighted="true" 用于悬浮/活行样式. |
isMulti | boolean | false | 多选择上下文的可选样式提示( 无选择逻辑) . |
onClick | (event: MouseEvent<HTMLLIElement>) => void | —— 说 | 点击处理器 . |
...rest | HTMLAttributes | —— 说 | 标准 HTML 属性. |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
dropdown
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证