diff --git a/docs/example/Collapse/demos/demo3.tsx b/docs/example/Collapse/demos/accordion.tsx similarity index 97% rename from docs/example/Collapse/demos/demo3.tsx rename to docs/example/Collapse/demos/accordion.tsx index 78f2acb1..5b448b76 100644 --- a/docs/example/Collapse/demos/demo3.tsx +++ b/docs/example/Collapse/demos/accordion.tsx @@ -4,7 +4,7 @@ */ import { Collapse } from '@banana-ui/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; export default function CollapseDemo3() { const [status, setStatus] = useState([false, false, false]); diff --git a/docs/example/Collapse/demos/basicUsage.tsx b/docs/example/Collapse/demos/basicUsage.tsx new file mode 100644 index 00000000..a87fd692 --- /dev/null +++ b/docs/example/Collapse/demos/basicUsage.tsx @@ -0,0 +1,15 @@ +/** + * title: 基本使用 + */ + +import { Collapse } from '@banana-ui/react'; + +export default function CollapseDemo0() { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. + + ); +} diff --git a/docs/example/Collapse/demos/customIcon.tsx b/docs/example/Collapse/demos/customIcon.tsx new file mode 100644 index 00000000..8c55a837 --- /dev/null +++ b/docs/example/Collapse/demos/customIcon.tsx @@ -0,0 +1,44 @@ +/** + * title: 自定义折叠/展开图标 + * description: 通过使用`slot`插槽实现自定义折叠/展开图标 + */ + +import { Collapse } from '@banana-ui/react'; + +export default function CollapseDemo2() { + const CustomExpandIcon = () => { + return ( + + + + ); + }; + + const CustomCollapseIcon = () => { + return ( + + + + ); + }; + + return ( + +
+ +
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. + + ); +} diff --git a/docs/example/Collapse/demos/demo0.tsx b/docs/example/Collapse/demos/demo0.tsx deleted file mode 100644 index d41c1cad..00000000 --- a/docs/example/Collapse/demos/demo0.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * title: 基本使用 - */ - -import { Collapse } from '@banana-ui/react'; -import React from 'react'; - -export default function CollapseDemo0() { - return ( -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - -
- ); -} diff --git a/docs/example/Collapse/demos/demo1.tsx b/docs/example/Collapse/demos/demo1.tsx deleted file mode 100644 index 37aee720..00000000 --- a/docs/example/Collapse/demos/demo1.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** - * title: 禁用折叠面板 - * description: 使用`disabled`属性禁用该折叠面板。 - */ - -import { Collapse } from '@banana-ui/react'; -import React from 'react'; - -export default function CollapseDemo1() { - return ( -
- - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - -
- ); -} diff --git a/docs/example/Collapse/demos/demo2.tsx b/docs/example/Collapse/demos/demo2.tsx deleted file mode 100644 index d78ea021..00000000 --- a/docs/example/Collapse/demos/demo2.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/** - * title: 自定义折叠/展开图标 - * description: 通过使用`slot`插槽实现自定义折叠/展开图标 - */ - -import { Collapse } from '@banana-ui/react'; -import React from 'react'; - -export default function CollapseDemo2() { - return ( -
- -
- - - -
-
- - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. - -
- ); -} diff --git a/docs/example/Collapse/demos/disabled.tsx b/docs/example/Collapse/demos/disabled.tsx new file mode 100644 index 00000000..d622dd5e --- /dev/null +++ b/docs/example/Collapse/demos/disabled.tsx @@ -0,0 +1,16 @@ +/** + * title: 禁用折叠面板 + * description: 使用`disabled`属性禁用该折叠面板。 + */ + +import { Collapse } from '@banana-ui/react'; + +export default function CollapseDemo1() { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. + + ); +} diff --git a/docs/example/Collapse/index.md b/docs/example/Collapse/index.md index ed24f4e6..4d8111c3 100644 --- a/docs/example/Collapse/index.md +++ b/docs/example/Collapse/index.md @@ -14,10 +14,10 @@ group: 组件 ## 代码演示 - - - - + + + + ## 属性 - Attributes & Properties diff --git a/public/Collapse/accordion.html b/public/Collapse/accordion.html new file mode 100644 index 00000000..55898f07 --- /dev/null +++ b/public/Collapse/accordion.html @@ -0,0 +1,28 @@ +
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +
+ + \ No newline at end of file diff --git a/public/Collapse/basicUsage.html b/public/Collapse/basicUsage.html new file mode 100644 index 00000000..f4bb4f83 --- /dev/null +++ b/public/Collapse/basicUsage.html @@ -0,0 +1,4 @@ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + \ No newline at end of file diff --git a/public/Collapse/customIcon.html b/public/Collapse/customIcon.html new file mode 100644 index 00000000..5cc91bfd --- /dev/null +++ b/public/Collapse/customIcon.html @@ -0,0 +1,18 @@ + +
+ + + +
+
+ + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + \ No newline at end of file diff --git a/public/Collapse/disabled.html b/public/Collapse/disabled.html new file mode 100644 index 00000000..e23aae45 --- /dev/null +++ b/public/Collapse/disabled.html @@ -0,0 +1,4 @@ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + \ No newline at end of file