内脏部分
用于显示折叠内容的简单手风琴组件.
安装
npm install @bolttech/frontend-foundations @bolttech/atoms-accordion
或者说
yarn add @bolttech/frontend-foundations @bolttech/atoms-accordion
道具
这个 Accordion 组件接受以下属性:
| Prop | 类型 | 说明 |
|---|---|---|
| 页眉图文 | string | 要显示为手风琴头的文字 . |
| 显示内容 | boolean | 控制内容是显示还是隐藏. |
| 内容文本 | string | 以手风琴内容显示的文本 . |
| 已禁用 | boolean | 设定为时禁用手风琴交互 true。 。 。 . |
| 图标 | string | 在页眉文本旁显示的图标名称. |
| 点击 | function | 回调函数切换 showContent 状态. |
| 编号 | string | 区分手风琴多例的可选标识符(用于测试等). |
使用量
import React, { useState } from 'react';
import { Accordion } from '@bolttech/atoms-accordion';
import { bolttechTheme } from '@bolttech/frontend-foundations';
const ExampleComponent = () => {
const [showContent, setShowContent] = useState(false);
const handleToggleContent = (value) => {
setShowContent(value);
};
return (
<BolttechThemeProvider theme={bolttechTheme}>
<Accordion headerText="Accordion Header" showContent={showContent} contentText="Accordion Content" icon="expand_more" onClick={handleToggleContent} id="unique-accordion-id" />
</BolttechThemeProvider>
);
};
export default ExampleComponent;
捐款
欢迎捐款! 对于任何错误修正、改进或新特性,请打开一个 问题 或者提交拉动请求.
请在提交前遵循代码标准并测试您的更改 .