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> </div>
<div <div
class="ant-collapse-item" class="ant-collapse-item ant-collapse-item-disabled"
> >
<div <div
aria-expanded="false" aria-expanded="false"

View File

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

View File

@ -28,3 +28,4 @@ A content area which can be collapsed and expanded.
|----------|----------------|----------|--------------| |----------|----------------|----------|--------------|
| key | corresponds to the `activeKey` | string | - | | key | corresponds to the `activeKey` | string | - |
| header | title of the panel | string\|ReactNode | - | | 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 { export interface CollapsePanelProps {
key: string; key: string;
header: React.ReactNode; header: React.ReactNode;
style?: React.CSSProperties; disabled?: boolean;
className?: string; className?: string;
style?: React.CSSProperties;
} }
export class CollapsePanel extends React.Component<CollapsePanelProps, {}> { export class CollapsePanel extends React.Component<CollapsePanelProps, {}> {

View File

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

View File

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