mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 12:38:58 +08:00
feat: Collapse.Panel supports disabled, close: #6119
This commit is contained in:
parent
82bfa3dcde
commit
863b777361
@ -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"
|
||||||
|
@ -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>
|
||||||
|
@ -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 |
|
||||||
|
@ -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, {}> {
|
||||||
|
@ -30,3 +30,4 @@ cols: 1
|
|||||||
|------|------------------|-------------------------|--------|
|
|------|------------------|-------------------------|--------|
|
||||||
| key | 对应 activeKey | string | 无 |
|
| key | 对应 activeKey | string | 无 |
|
||||||
| header | 面板头内容 | string\|ReactNode | 无 |
|
| header | 面板头内容 | string\|ReactNode | 无 |
|
||||||
|
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user