refactor(collapse): 优化collapse

TDesignOteam · Jul 4, 2024 · 72bee41 · 72bee41
1 parent b751eb4
commit 72bee41
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/src/collapse/_example/base.tsx b/src/collapse/_example/base.tsx
@@ -22,6 +22,17 @@ export default class Demo extends Component {
           header="这是一个折叠标题"
           content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。"
         />
+        <t-collapse-panel
+          header="嵌套折叠面板"
+          content={
+            <t-collapse default-expand-all>
+              <t-collapse-panel header="子面板1" content="这是子面板1" />
+              <t-collapse-panel header="子面板1" content="这是子面板2" />
+              <t-collapse-panel header="子面板1" content="这是子面板3" />
+              <t-collapse-panel header="子面板1" content="这是子面板4" />
+            </t-collapse>
+          }
+        />
       </t-collapse>
     );
   }

diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx
@@ -14,6 +14,16 @@ const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCo
 
 @tag('t-collapse-panel')
 export default class CollapsePanel extends Component<TdCollapsePanelProps> {
+  static css = [
+    `.t-collapse-panel__wrapper--border-less .t-collapse-panel__header {
+  border-bottom: none;
+}
+.t-collapse-panel__wrapper--border-less .t-collapse-panel__body {
+  background: var(--td-bg-color-container);
+  border: none;
+}`,
+  ];
+
   static defaultProps = {
     expandIcon: true,
   };