Name	Name	Last commit message	Last commit date
parent directory ..
src	src
README.md	README.md
package.json	package.json
tsconfig.json	tsconfig.json

Collapse 折叠面板

可以折叠/展开的内容区域。

import { Collapse } from 'uiw';
// or
import Collapse from '@uiw/react-collapse';

基本用法

可以同时展开多个面板，这个例子默认展开了第一个。

import React from 'react';
import { Collapse } from 'uiw';

const genExtra = () => (
  <div
    onClick={(event) => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation();
    }}
  >设置</div>
);

export default function Demo() {
  return(
    <div>
      <Collapse activeKey={['1']} onChange={key=>console.log('key::1:', key)}>
        <Collapse.Panel header="大话西游" key="1" extra={genExtra()}>
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Collapse.Panel>
        <Collapse.Panel header="西游·降魔篇" key="2" extra={genExtra()}>
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Collapse.Panel>
        <Collapse.Panel header="国产零零漆" key="3" extra={genExtra()}>
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Collapse.Panel>
      </Collapse>
    </div>
  );
}

import React from 'react';
import { Collapse } from 'uiw';

export default function Demo() {
  return(
    <div>
      <Collapse activeKey={['1']} onChange={key=>console.log('key::1:', key)}>
        <Collapse.Panel header="大话西游" key="1">
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Collapse.Panel>
        <Collapse.Panel header="西游·降魔篇" key="2">
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Collapse.Panel>
        <Collapse.Panel header="国产零零漆" key="3" disabled >
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Collapse.Panel>
      </Collapse>
    </div>
  );
}

手风琴折叠面板

手风琴，每次只打开一个tab。默认打开第一个。Panel 的 key 属性并非必须。

import React from 'react';
import { Collapse, Button } from 'uiw';

class Demo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeName: '0'
    }
  }
  render() {
    const Panel = Collapse.Panel
    return (
      <div>
        <Button
          type="primary"
          style={{marginBottom: '15px'}}
          onClick={() => this.setState({ activeName: this.state.activeName === '2'?'':'2' })}
        >
          打开或关闭第三个
        </Button>
        <Collapse accordion activeKey={[this.state.activeName]} onChange={key=>console.log('key::2:', key)}>
          <Panel header="大话西游">
            <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
            <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
            <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
            <div>一万年</div>
          </Panel>
          <Panel header="西游·降魔篇">
            <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
            <div>曾经牵挂，才能了无牵挂。</div>
          </Panel>
          <Panel header="国产零零漆" showArrow={false}>
            <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
          </Panel>
        </Collapse>
      </div>
    )
  }
}
export default Demo;

简洁风格无边框

通过设置bordered={true}没有边框的简洁样式。

import React from 'react';
import { Collapse } from 'uiw';

const Panel = Collapse.Panel;

export default function Demo() {
  return(
    <div>
      <Collapse accordion bordered={true} activeKey={[]} onChange={key=>console.log('key::3:', key)}>
        <Panel header="大话西游">
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Panel>
        <Panel header="西游·降魔篇">
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Panel>
        <Panel header="国产零零漆">
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Panel>
      </Collapse>
    </div>
  );
}

自定义面板

自定义各个面板的背景色、圆角、边距和图标。

import React from 'react';
import { Collapse } from 'uiw';

const customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
};

const Panel = Collapse.Panel;

export default function Demo() {
  return(
    <div>
      <Collapse accordion bordered={true} activeKey={[]} onChange={key=>console.log('key::4:', key)}>
        <Panel header="大话西游" style={customPanelStyle}>
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Panel>
        <Panel header="西游·降魔篇" style={customPanelStyle}>
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Panel>
        <Panel header="国产零零漆" style={customPanelStyle}>
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Panel>
      </Collapse>
    </div>
  );
}

自定义面板标题

import React from 'react';
import { Collapse, Icon } from 'uiw';

const Panel = Collapse.Panel;

export default function Demo() {
  return(
    <div>
      <Collapse showArrow={false} activeKey={['1']} onChange={key=>console.log('key::5:', key)}>
        <Panel header={<span>大话西游 <Icon type="smile-o"/></span>} key="1">
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Panel>
        <Panel header={<span>西游·降魔篇 <Icon type="smile-o"/></span>} key="2">
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Panel>
        <Panel header="国产零零漆" key="3">
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Panel>
      </Collapse>
    </div>
  );
}

指定折叠图标

import React from 'react';
import { Collapse, Icon } from 'uiw';

const Panel = Collapse.Panel;

export default function Demo() {
  return(
    <div>
      <Collapse activeKey={['1']} onChange={key=>console.log('key::6:', key)}>
        <Panel icon="caret-down" header={<span>大话西游 <Icon type="smile-o"/></span>} key="1">
          <div>曾经有一份真诚的爱情放在我面前，我没有珍惜，等我失去的时候我才后悔莫及，人世间最痛苦的事莫过于此。 </div>
          <div>如果上天能够给我一个再来一次的机会，我会对那个女孩子说三个字：我爱你。 </div>
          <div>如果非要在这份爱上加上一个期限，我希望是…… </div>
          <div>一万年</div>
        </Panel>
        <Panel icon={<Icon type="down-circle" />} header={<span>西游·降魔篇 <Icon type="smile-o"/></span>} key="2">
          <div>曾经痛苦，才知道真正的痛苦；曾经执著，才能放下执著；</div>
          <div>曾经牵挂，才能了无牵挂。</div>
        </Panel>
        <Panel icon={<span>折叠-</span>} header="国产零零漆" key="3">
          <div>古有关云长全神贯注下象棋刮骨疗毒，今有我零零漆聚精会神看A片挖骨取弹头。</div>
        </Panel>
      </Collapse>
    </div>
  );
}

Props

Collapse

参数	说明	类型	默认值
accordion	手风琴效果	Boolean	false
activeKey	当前激活 tab 面板的 key, accordion 模式下默认第一个元素	String[]/String	false
showArrow	在这里使用，表示控制所有的面板图标是否展示	Boolean	true
bordered	设置没有边框的简洁样式	Boolean	false
onChange	切换面板的回调	(activeKey: string[]) => void	-

Collapse.Panel

参数	说明	类型	默认值
disabled	禁用后的面板展开与否将无法通过用户交互改变	Boolean	false
header	面板头内容	String/ReactNode	-
icon	指定图标	String/ReactNode	-
isActive	是否展开	Boolean	-
extra	自定义渲染每个面板右上角的内容	ReactNode	-
showArrow	是否显示展开图标	Boolean	true
key	对应 `activeKey`，非必填		-

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

react-collapse

react-collapse

README.md

Collapse 折叠面板

基本用法

手风琴折叠面板

简洁风格无边框

自定义面板

自定义面板标题

指定折叠图标

Props

Collapse

Collapse.Panel

Files

react-collapse

Directory actions

More options

Directory actions

More options

Latest commit

History

react-collapse

Folders and files

parent directory

README.md

Collapse 折叠面板

基本用法

手风琴折叠面板

简洁风格无边框

自定义面板

自定义面板标题

指定折叠图标

Props

Collapse

Collapse.Panel