可同時(shí)展開(kāi)多個(gè)面板,面板之間不影響
render() {
const activeName = "1";
return (
<Collapse value={activeName}>
<Collapse.Item title="一致性 Consistency" name="1">
<div>與現(xiàn)實(shí)生活一致:與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶(hù)習(xí)慣的語(yǔ)言和概念;</div>
<div>在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
</Collapse.Item>
<Collapse.Item title="反饋 Feedback" name="2">
<div>控制反饋:通過(guò)界面樣式和交互動(dòng)效讓用戶(hù)可以清晰的感知自己的操作;</div>
<div>頁(yè)面反饋:操作后,通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
</Collapse.Item>
<Collapse.Item title="效率 Efficiency" name="3">
<div>簡(jiǎn)化流程:設(shè)計(jì)簡(jiǎn)潔直觀的操作流程;</div>
<div>清晰明確:語(yǔ)言表達(dá)清晰且表意明確,讓用戶(hù)快速理解進(jìn)而作出決策;</div>
<div>幫助用戶(hù)識(shí)別:界面簡(jiǎn)單直白,讓用戶(hù)快速識(shí)別而非回憶,減少用戶(hù)記憶負(fù)擔(dān)。</div>
</Collapse.Item>
<Collapse.Item title="可控 Controllability" name="4">
<div>用戶(hù)決策:根據(jù)場(chǎng)景可給予用戶(hù)操作建議或安全提示,但不能代替用戶(hù)進(jìn)行決策;</div>
<div>結(jié)果可控:用戶(hù)可以自由的進(jìn)行操作,包括撤銷(xiāo)、回退和終止當(dāng)前操作等。</div>
</Collapse.Item>
</Collapse>
)
}
每次只能展開(kāi)一個(gè)面板
通過(guò) accordion
屬性來(lái)設(shè)置是否以手風(fēng)琴模式顯示。
constructor(props) {
super(props)
this.state = {
activeName: '1'
}
}
render() {
return (
<div>
<Button
type="primary"
style={{marginBottom: '15px'}}
onClick={() => this.setState({ activeName: '3' })}
>
打開(kāi)第三個(gè)
</Button>
<Collapse value={this.state.activeName} accordion>
<Collapse.Item title="一致性 Consistency" name="1">
<div>與現(xiàn)實(shí)生活一致:與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶(hù)習(xí)慣的語(yǔ)言和概念;</div>
<div>在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
</Collapse.Item>
<Collapse.Item title="反饋 Feedback" name="2">
<div>控制反饋:通過(guò)界面樣式和交互動(dòng)效讓用戶(hù)可以清晰的感知自己的操作;</div>
<div>頁(yè)面反饋:操作后,通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
</Collapse.Item>
<Collapse.Item title="效率 Efficiency" name="3">
<div>簡(jiǎn)化流程:設(shè)計(jì)簡(jiǎn)潔直觀的操作流程;</div>
<div>清晰明確:語(yǔ)言表達(dá)清晰且表意明確,讓用戶(hù)快速理解進(jìn)而作出決策;</div>
<div>幫助用戶(hù)識(shí)別:界面簡(jiǎn)單直白,讓用戶(hù)快速識(shí)別而非回憶,減少用戶(hù)記憶負(fù)擔(dān)。</div>
</Collapse.Item>
<Collapse.Item title="可控 Controllability" name="4">
<div>用戶(hù)決策:根據(jù)場(chǎng)景可給予用戶(hù)操作建議或安全提示,但不能代替用戶(hù)進(jìn)行決策;</div>
<div>結(jié)果可控:用戶(hù)可以自由的進(jìn)行操作,包括撤銷(xiāo)、回退和終止當(dāng)前操作等。</div>
</Collapse.Item>
</Collapse>
</div>
)
}
可以通過(guò) title
屬性來(lái)實(shí)現(xiàn)自定義面板的標(biāo)題內(nèi)容,以實(shí)現(xiàn)增加圖標(biāo)等效果。
render() {
return (
<Collapse accordion>
<Collapse.Item title={<span>一致性 Consistency<i className="header-icon el-icon-information"></i></span>}>
<div>與現(xiàn)實(shí)生活一致:與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶(hù)習(xí)慣的語(yǔ)言和概念;</div>
<div>在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
</Collapse.Item>
<Collapse.Item title="反饋 Feedback">
<div>控制反饋:通過(guò)界面樣式和交互動(dòng)效讓用戶(hù)可以清晰的感知自己的操作;</div>
<div>頁(yè)面反饋:操作后,通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
</Collapse.Item>
<Collapse.Item title="效率 Efficiency">
<div>簡(jiǎn)化流程:設(shè)計(jì)簡(jiǎn)潔直觀的操作流程;</div>
<div>清晰明確:語(yǔ)言表達(dá)清晰且表意明確,讓用戶(hù)快速理解進(jìn)而作出決策;</div>
<div>幫助用戶(hù)識(shí)別:界面簡(jiǎn)單直白,讓用戶(hù)快速識(shí)別而非回憶,減少用戶(hù)記憶負(fù)擔(dān)。</div>
</Collapse.Item>
<Collapse.Item title="可控 Controllability">
<div>用戶(hù)決策:根據(jù)場(chǎng)景可給予用戶(hù)操作建議或安全提示,但不能代替用戶(hù)進(jìn)行決策;</div>
<div>結(jié)果可控:用戶(hù)可以自由的進(jìn)行操作,包括撤銷(xiāo)、回退和終止當(dāng)前操作等。</div>
</Collapse.Item>
</Collapse>
)
}
參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
accordion | 是否手風(fēng)琴模式 | boolean | — | false |
value | 當(dāng)前激活的面板(如果是手風(fēng)琴模式,綁定值類(lèi)型需要為string ,否則為array ) |
string/array | — | — |
事件名稱(chēng) | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
onChange | 當(dāng)前激活面板改變時(shí)觸發(fā)(如果是手風(fēng)琴模式,參數(shù)類(lèi)型為string ,否則為array ) |
(activeNames: array/string) |
參數(shù) | 說(shuō)明 | 類(lèi)型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
name | 唯一標(biāo)志符 | string/number | — | — |
title | 面板標(biāo)題 | string/node | — | — |
更多建議: