feat: Collapse.Panel supports disabled, close: #6119

This commit is contained in:
Benjy Cui 2017-05-17 12:05:42 +08:00
parent 82bfa3dcde
commit 863b777361
6 changed files with 15 additions and 3 deletions

View File

@ -98,7 +98,7 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `
</div>
</div>
<div
class="ant-collapse-item"
class="ant-collapse-item ant-collapse-item-disabled"
>
<div
aria-expanded="false"

View File

@ -35,7 +35,7 @@ ReactDOM.render(
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<Panel header="This is panel header 3" key="3" disabled>
<p>{text}</p>
</Panel>
</Collapse>

View File

@ -28,3 +28,4 @@ A content area which can be collapsed and expanded.
|----------|----------------|----------|--------------|
| key | corresponds to the `activeKey` | string | - |
| header | title of the panel | string\|ReactNode | - |
| disabled | users cannot change opening status of a disabled panel | boolean | false |

View File

@ -18,8 +18,9 @@ export interface CollapseProps {
export interface CollapsePanelProps {
key: string;
header: React.ReactNode;
style?: React.CSSProperties;
disabled?: boolean;
className?: string;
style?: React.CSSProperties;
}
export class CollapsePanel extends React.Component<CollapsePanelProps, {}> {

View File

@ -30,3 +30,4 @@ cols: 1
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | string | 无 |
| header | 面板头内容 | string\|ReactNode | 无 |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |

View File

@ -109,4 +109,13 @@
background-color: @collapse-header-bg;
}
}
& &-item-disabled > &-header {
&,
& > .arrow {
cursor: not-allowed;
color: @disabled-color;
background-color: @disabled-bg;
}
}
}