@uiw/react-collapse
TypeScript icon, indicating that this package has built-in type declarations

4.22.3 • Public • Published

Collapse 折叠面板

Buy me a coffee Open in unpkg NPM Downloads npm version

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

## 基本用法

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

```jsx mdx:preview&bg=#fff
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。默认打开第一个。Panelkey 属性并非必须。

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,非必填 -

Package Sidebar

Install

npm i @uiw/react-collapse

Weekly Downloads

202

Version

4.22.3

License

MIT

Unpacked Size

50 kB

Total Files

23

Last publish

Collaborators

  • uiwjs
  • wcjiang