You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.5 KiB
98 lines
2.5 KiB
6 years ago
|
import '../assets/index.less';
|
||
|
|
import Collapse from '../index';
|
||
|
|
|
||
|
|
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.
|
||
|
|
`;
|
||
|
|
|
||
|
|
function random() {
|
||
|
|
return parseInt(Math.random() * 10, 10) + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { Panel } = Collapse;
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
time: random(),
|
||
|
|
accordion: false,
|
||
|
|
activeKey: ['4'],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onChange(activeKey) {
|
||
|
|
this.activeKey = activeKey;
|
||
|
|
},
|
||
|
|
getItems() {
|
||
|
|
const items = [];
|
||
|
|
for (let i = 0, len = 3; i < len; i++) {
|
||
|
|
const key = i + 1;
|
||
|
|
items.push(
|
||
|
|
<Panel header={`This is panel header ${key}`} key={String(key)} disabled={i === 0}>
|
||
|
|
<p>{text.repeat(this.time)}</p>
|
||
|
|
</Panel>,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
items.push(
|
||
|
|
<Panel header={`This is panel header 4`} key="4">
|
||
|
|
<Collapse defaultActiveKey="1">
|
||
|
|
<Panel header={`This is panel nest panel`} key="1" id="header-test">
|
||
|
|
<p>{text}</p>
|
||
|
|
</Panel>
|
||
|
|
</Collapse>
|
||
|
|
</Panel>,
|
||
|
|
);
|
||
|
|
|
||
|
|
items.push(
|
||
|
|
<Panel header={`This is panel header 5`} key="5">
|
||
|
|
<Collapse defaultActiveKey="1">
|
||
|
|
<Panel header={`This is panel nest panel`} key="1" id="another-test">
|
||
|
|
<form>
|
||
|
|
<label for="test">Name: </label>
|
||
|
|
<input type="text" id="test" />
|
||
|
|
</form>
|
||
|
|
</Panel>
|
||
|
|
</Collapse>
|
||
|
|
</Panel>,
|
||
|
|
);
|
||
|
|
|
||
|
|
items.push(
|
||
|
|
<Panel header={`This is panel header 6`} key="6" extra={<span>Extra Node</span>}>
|
||
|
|
<p>Panel with extra</p>
|
||
|
|
</Panel>,
|
||
|
|
);
|
||
|
|
|
||
|
|
return items;
|
||
|
|
},
|
||
|
|
setActivityKey() {
|
||
|
|
this.activeKey = ['2'];
|
||
|
|
},
|
||
|
|
reRender() {
|
||
|
|
this.time = random();
|
||
|
|
},
|
||
|
|
toggle() {
|
||
|
|
this.accordion = !this.accordion;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
render() {
|
||
|
|
const accordion = this.accordion;
|
||
|
|
const btn = accordion ? 'Mode: accordion' : 'Mode: collapse';
|
||
|
|
const activeKey = this.activeKey;
|
||
|
|
return (
|
||
|
|
<div style={{ margin: '20px', width: '400px' }}>
|
||
|
|
<button onClick={this.reRender}>reRender</button>
|
||
|
|
<button onClick={this.toggle}>{btn}</button>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<button onClick={this.setActivityKey}>active header 2</button>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Collapse accordion={accordion} onChange={this.onChange} activeKey={activeKey}>
|
||
|
|
{this.getItems()}
|
||
|
|
</Collapse>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|