Merge pull request #66 from novlan1/feature/collapse

feat(collpase): add collapse component
TDesignOteam · Jun 29, 2024 · 7fe2deb · 7fe2deb
2 parents af33296 + 7e49e45
commit 7fe2deb
Show file tree

Hide file tree

Showing 16 changed files with 662 additions and 2 deletions.
diff --git a/DEVELOP_GUIDE.md b/DEVELOP_GUIDE.md
@@ -105,7 +105,7 @@ npm run start
 
 ### 组件页路由配置
 
-每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.js` 已有定义，直接按照模板添加即可
+每一个组件页，都是一个 md 文件，参考 `/site/sidebar.config.ts` 已有定义，直接按照模板添加即可
 
 ```javascript
 {

diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts
@@ -136,6 +136,12 @@ export default [
         path: '/components/calendar',
         // component: () => import('tdesign-web-components/calendar/README.md'),
       },
+      {
+        title: 'Collapse 折叠面板',
+        name: 'Collapse',
+        path: '/components/collapse',
+        component: () => import('tdesign-web-components/collapse/README.md'),
+      },
       {
         title: 'Table 表格',
         name: 'table',

diff --git a/src/collapse/README.md b/src/collapse/README.md
@@ -0,0 +1,60 @@
+---
+title: Collapse 折叠面板
+description: 可以将较多或较复杂的内容进行分组，分组内容区可以折叠展开或隐藏。
+isComponent: true
+usage: { title: '', description: '' }
+spline: data
+---
+
+### 基础折叠面板
+
+基础折叠面板，可自定义面板内容。
+
+{{ base }}
+
+### 手风琴模式折叠面板
+
+手风琴模式折叠面板，一次只能打开一个面板。
+
+{{ mutex }}
+
+### 可设置图标的折叠面板
+
+可设置是否显示展开图标以及图标展示的位置
+
+{{ icon }}
+
+### 可设置右侧操作的折叠面板
+
+可自定义面板右侧操作区域
+
+{{ rightSlot }}
+
+### 不同模式的折叠面板
+
+
+{{ other }}
+
+## API
+
+### Collapse Props
+
+| 名称                | 类型     | 默认值 | 说明                                                                                      | 必传 |
+| ------------------- | -------- | ------ | ----------------------------------------------------------------------------------------- | ---- |
+| borderless          | Boolean  | false  | 是否为无边框模式                                                                          | N    |
+| defaultExpandAll    | Boolean  | false  | 默认是否展开全部                                                                          | N    |
+| disabled            | Boolean  | -      | 是否禁用面板展开/收起操作                                                                 | N    |
+| expandIconPlacement | String   | left   | 展开图标的位置，左侧或右侧。可选项：left/right                                            | N    |
+| expandMutex         | Boolean  | false  | 每个面板互斥展开，每次只展开一个面板                                                      | N    |
+| expandOnRowClick    | Boolean  | true   | 是否允许点击整行标题展开面板                                                              | N    |
+| value               | Array    | []     | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = Array<string \| number>`。 | N    |
+| onChange            | Function |        | TS 类型：`(value: CollapseValue) => void`<br/>切换面板时触发，返回变化的值                | N    |
+
+
+### CollapsePanel Props
+
+| 名称              | 类型            | 默认值    | 说明                                                             | 必传 |
+| ----------------- | --------------- | --------- | ---------------------------------------------------------------- | ---- |
+| destroyOnCollapse | Boolean         | false     | 当前面板处理折叠状态时，是否销毁面板内容                         | N    |
+| disabled          | Boolean         | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性                 | N    |
+| value             | String / Number | -         | 必需。当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | Y    |
diff --git a/src/collapse/_example/base.tsx b/src/collapse/_example/base.tsx
@@ -0,0 +1,27 @@
+import 'tdesign-web-components/collapse';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-collapse onChange={this.onChange}>
+        <t-collapse-panel>
+          <div slot="header">这是一个折叠标题</div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+        <t-collapse-panel destroyOnCollapse={true}>
+          <div slot="header">这是一个折叠标题</div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+      </t-collapse>
+    );
+  }
+}
diff --git a/src/collapse/_example/icon.tsx b/src/collapse/_example/icon.tsx
@@ -0,0 +1,37 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+import 'tdesign-web-components/icon';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse onChange={this.onChange} expand-icon-placement="left">
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">自定义图标</div>
+            <t-icon name="user-checked" slot="expandIcon"></t-icon>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">自定义图标</div>
+            <t-icon name="add" slot="expandIcon"></t-icon>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+      </t-space>
+    );
+  }
+}
diff --git a/src/collapse/_example/mutex.tsx b/src/collapse/_example/mutex.tsx
@@ -0,0 +1,40 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  currentItem = signal('[]');
+
+  @bind
+  onChange(value) {
+    this.currentItem.value = value.valueOf();
+    console.log('currentItem', this.currentItem);
+  }
+
+  render() {
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse expand-mutex onChange={this.onChange}>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+        <div style="margin-top: 10px">当前展开项：{this.currentItem.value}</div>
+      </t-space>
+    );
+  }
+}
diff --git a/src/collapse/_example/other.tsx b/src/collapse/_example/other.tsx
@@ -0,0 +1,54 @@
+import 'tdesign-web-components/switch';
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  static css = `
+.button-area {
+  margin-left: 20px;
+  margin-top: 10px;
+}
+.button-text {
+  display: inline-block;
+  width: 100px;
+  font-size: 13px;
+  margin-bottom: 2px;
+}  
+`;
+
+  disabled = signal(false);
+
+  expandIcon = signal(true);
+
+  borderless = signal(false);
+
+  render() {
+    const { borderless, expandIcon, disabled } = this;
+    return (
+      <t-space direction={'vertical'}>
+        <t-collapse borderless={borderless.value} expandIcon={expandIcon.value} disabled={disabled.value}>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+          <t-collapse-panel>
+            <div slot="header">这是一个折叠标题</div>
+            这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+          </t-collapse-panel>
+        </t-collapse>
+        <div class="button-area">
+          <div>
+            <span class="button-text">全部禁用</span>
+            <t-switch size="small" onChange={() => (this.disabled.value = !this.disabled.value)} />
+          </div>
+          <div>
+            <span class="button-text">无边框</span>
+            <t-switch size="small" onChange={() => (this.borderless.value = !this.borderless.value)} />
+          </div>
+        </div>
+      </t-space>
+    );
+  }
+}
diff --git a/src/collapse/_example/rightSlot.tsx b/src/collapse/_example/rightSlot.tsx
@@ -0,0 +1,38 @@
+import 'tdesign-web-components/collapse';
+import 'tdesign-web-components/button';
+
+import { bind, Component, signal } from 'omi';
+
+export default class Demo extends Component {
+  checked = signal(true);
+
+  @bind
+  onChange(value) {
+    console.log('onChange.value', value);
+  }
+
+  render() {
+    return (
+      <t-collapse borderless={true} expandMutex={true} expandOnRowClick={true} onChange={this.onChange}>
+        <t-collapse-panel>
+          <div slot="header">这是一个折叠标题</div>
+          <div slot="headerRightContent">
+            <t-button size="small" style={{ marginLeft: '8px' }}>
+              操作
+            </t-button>
+          </div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+        <t-collapse-panel destroyOnCollapse={true} disabled>
+          <div slot="header">禁用状态</div>
+          <div slot="headerRightContent">
+            <t-button size="small" style={{ marginLeft: '8px' }}>
+              操作
+            </t-button>
+          </div>
+          这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。
+        </t-collapse-panel>
+      </t-collapse>
+    );
+  }
+}