diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap index 124b5f1423..b41ab4a631 100644 --- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap +++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap @@ -143,6 +143,62 @@ exports[`test renders ./components/collapse/demo/borderless.md correctly 1`] = ` `; +exports[`test renders ./components/collapse/demo/custom.md correctly 1`] = ` +
+
+ +
+
+

+ + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. + +

+
+
+
+
+ +
+
+ +
+
+`; + exports[`test renders ./components/collapse/demo/mix.md correctly 1`] = `
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md new file mode 100644 index 0000000000..8ffa0534be --- /dev/null +++ b/components/collapse/demo/custom.md @@ -0,0 +1,46 @@ +--- +order: 3 +title: + zh-CN: 自定义面板 + en-US: Custom Panel +--- + +## zh-CN + +自定义各个面板的背景色、圆角和边距。 + +## en-US + +Customize the background, border and margin styles for each panel. + +````jsx +import { Collapse } from 'antd'; +const Panel = Collapse.Panel; + +const text = ` + A dog is a type of domesticated animal. + Known for its loyalty and faithfulness, + it can be found as a welcome guest in many households across the world. +`; + +const customPanelStyle = { + background: '#f7f7f7', + borderRadius: 4, + marginBottom: 24, + border: 0, +}; + +ReactDOM.render( + + +

{text}

+
+ +

{text}

+
+ +

{text}

+
+
+, mountNode); +```` diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less index 865b49ba58..0bbbc3a055 100644 --- a/components/collapse/style/index.less +++ b/components/collapse/style/index.less @@ -14,13 +14,10 @@ background-color: @background-color-base; border-radius: 3px; border: 1px solid @border-color-base; + border-bottom: 0; & > &-item { - border-top: 1px solid @border-color-base; - &:first-child { - border-top: 0; - } - + border-bottom: 1px solid @border-color-base; > .@{collapse-prefix-cls}-header { height: 38px; line-height: 38px; @@ -88,16 +85,19 @@ border: 0; } - &-borderless > &-item { + &-borderless > &-item-active { border: 0; } + &-borderless > &-item > &-content { + background-color: transparent; + border-top: 1px solid @border-color-base; + } + &-borderless > &-item > &-header { - border-bottom: 1px solid @border-color-base; transition: all .3s; - border-radius: @border-color-base @border-color-base 0 0; &:hover { - background-color: #fcfcfc; + background-color: @background-color-base; } } }