Element-React Collapse 折疊面板

可同時(shí)展開多個(gè)面板，面板之間不影響

render() {
  const activeName = "1";
  return (
    <Collapse value={activeName}>
      <Collapse.Item title="一致性 Consistency" name="1">
        <div>與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
        <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
      </Collapse.Item>
      <Collapse.Item title="反饋 Feedback" name="2">
        <div>控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；</div>
        <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
      </Collapse.Item>
      <Collapse.Item title="效率 Efficiency" name="3">
        <div>簡化流程：設(shè)計(jì)簡潔直觀的操作流程；</div>
        <div>清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；</div>
        <div>幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。</div>
      </Collapse.Item>
      <Collapse.Item title="可控 Controllability" name="4">
        <div>用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；</div>
        <div>結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。</div>
      </Collapse.Item>
    </Collapse>
  )
}

手風(fēng)琴效果

每次只能展開一個(gè)面板

通過 accordion 屬性來設(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' })}
      >
        打開第三個(gè)
      </Button>
      <Collapse value={this.state.activeName} accordion>
        <Collapse.Item title="一致性 Consistency" name="1">
          <div>與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
          <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
        </Collapse.Item>
        <Collapse.Item title="反饋 Feedback" name="2">
          <div>控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；</div>
          <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
        </Collapse.Item>
        <Collapse.Item title="效率 Efficiency" name="3">
          <div>簡化流程：設(shè)計(jì)簡潔直觀的操作流程；</div>
          <div>清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；</div>
          <div>幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。</div>
        </Collapse.Item>
        <Collapse.Item title="可控 Controllability" name="4">
          <div>用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；</div>
          <div>結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。</div>
        </Collapse.Item>
      </Collapse>
    </div>
  )
}

自定義面板標(biāo)題

可以通過 title 屬性來實(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í)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念；</div>
        <div>在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。</div>
      </Collapse.Item>
      <Collapse.Item title="反饋 Feedback">
        <div>控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作；</div>
        <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。</div>
      </Collapse.Item>
      <Collapse.Item title="效率 Efficiency">
        <div>簡化流程：設(shè)計(jì)簡潔直觀的操作流程；</div>
        <div>清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策；</div>
        <div>幫助用戶識(shí)別：界面簡單直白，讓用戶快速識(shí)別而非回憶，減少用戶記憶負(fù)擔(dān)。</div>
      </Collapse.Item>
      <Collapse.Item title="可控 Controllability">
        <div>用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策；</div>
        <div>結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。</div>
      </Collapse.Item>
    </Collapse>
  )
}

Collapse Attributes

Collapse Events

Collapse Item Attributes