Collapse

Example
基本
数据源
手风琴
面板嵌套
全部禁用
无障碍支持
展开事件
API

折叠面板组件。

何时使用 #

对复杂区域进行分组和隐藏，保持页面的整洁。
手风琴是一种特殊的折叠面板，只允许单个内容区域展开。

代码演示 #

基本 #

可以同时展开多个面板

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
  <Collapse>
    <Panel title="simple tile">
      Promotions are marketing campaigns ran by Marketplace. Participate to sale your products
      during that promotion and make a profit
    </Panel>
    <Panel title="What are Promotion Products?">
      Promotion Products is a service that helps you to promote products you list on Marketplace
      during a certain time range. You can choose which products should be available for the
      promotion. Not all Products of you will be available, because Promotions will only attract
      certain Product areas.
    </Panel>
    <Panel title="Why can i not submit a higher price?">
      The Promotion requires a certain price to make sure that our customers are attracted.
    </Panel>
    <Panel title="What is Promo Stock?" disabled>
      Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting
      particular Promo Stock value you commit to have this amount of stock available while Promotion
      is active.
    </Panel>
  </Collapse>,
  mountNode
);

数据源 #

直接使用 dataSource 展示

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const list = [
  {
    title: 'Well, hello there',
    content:
      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
    disabled: true,
  },
  {
    title: 'Gigantomaniac Monster Text, very long, much width, wow',
    content:
      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
  },
  {
    title: 'Generic Title',
    content:
      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
  },
  {
    title: 'Login Infomation',
    content:
      'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
  },
];
ReactDOM.render(<Collapse dataSource={list} />, mountNode);

手风琴 #

手风琴单例模式，每次只打开一个Panel。

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
  <Collapse accordion>
    <Panel title="There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.">
      Promotions are marketing campaigns ran by Marketplace. Participate to sale your products
      during that promotion and make a profit
    </Panel>
    <Panel title="What are Promotion Products?">
      Promotion Products is a service that helps you to promote products you list on Marketplace
      during a certain time range. You can choose which products should be available for the
      promotion. Not all Products of you will be available, because Promotions will only attract
      certain Product areas.
    </Panel>
    <Panel title="Why can i not submit a higher price?">
      The Promotion requires a certain price to make sure that our customers are attracted.
    </Panel>
    <Panel title="What is Promo Stock?">
      Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting
      particular Promo Stock value you commit to have this amount of stock available while Promotion
      is active.
    </Panel>
  </Collapse>,
  mountNode
);

面板嵌套 #

嵌套折叠面板。

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
  <div>
    <Collapse>
      <Panel title="simple tile">
        <Collapse>
          <Panel title="simple tile">
            <ul>
              <li>Promotions are marketing campaigns ran by Marketplace</li>
              <li>Participate to sale your products during that promotion and make a profit</li>
            </ul>
          </Panel>
          <Panel title="What are Promotion Products?">
            <ul>
              <li>
                Promotion Products is a service that helps you to promote products you list on
                Marketplace during a certain time range
              </li>
              <li>You can choose which products should be available for the promotion</li>
              <li>
                Not all Products of you will be available, because Promotions will only attract
                certain Product areas
              </li>
            </ul>
          </Panel>
          <Panel title="Why can i not submit a higher price?">
            <ul>
              <li>
                The Promotion requires a certain price to make sure that our customers are attracted
              </li>
            </ul>
          </Panel>
          <Panel title="What is Promo Stock?">
            Promo Stock is the criteria needed to be followed to be able to join Promotion. With
            setting particular Promo Stock value you commit to have this amount of stock available
            while Promotion is active.
          </Panel>
        </Collapse>
      </Panel>
      <Panel title="What are Promotion Products?">
        <ul>
          <li>
            Promotion Products is a service that helps you to promote products you list on
            Marketplace during a certain time range
          </li>
          <li>You can choose which products should be available for the promotion</li>
          <li>
            Not all Products of you will be available, because Promotions will only attract certain
            Product areas
          </li>
        </ul>
      </Panel>
    </Collapse>
  </div>,
  mountNode
);

全部禁用 #

disabled 禁用全部

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
  <Collapse disabled>
    <Panel title="simple tile">
      Promotions are marketing campaigns ran by Marketplace. Participate to sale your products
      during that promotion and make a profit
    </Panel>
    <Panel title="What are Promotion Products?">
      Promotion Products is a service that helps you to promote products you list on Marketplace
      during a certain time range. You can choose which products should be available for the
      promotion. Not all Products of you will be available, because Promotions will only attract
      certain Product areas.
    </Panel>
    <Panel title="Why can i not submit a higher price?">
      The Promotion requires a certain price to make sure that our customers are attracted.
    </Panel>
    <Panel title="What is Promo Stock?">
      Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting
      particular Promo Stock value you commit to have this amount of stock available while Promotion
      is active.
    </Panel>
  </Collapse>,
  mountNode
);

无障碍支持 #

组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍: 给Collapse传入一个id, 组件会根据Collapse的id自动给每一个Panel生成Id。如果你想指定Panel的Id也可以, 给某个Panel传入Id属性,就会覆盖根据CollapseId生成的Id。

import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
  <Collapse id="collapse-accessibility">
    <Panel
      id="panel-accessibility"
      title="There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured."
    >
      <ul>
        <li>Promotions are marketing campaigns ran by Marketplace</li>
        <li>Participate to sale your products during that promotion and make a profit</li>
      </ul>
    </Panel>
    <Panel title="What are Promotion Products?">
      <ul>
        <li>
          Promotion Products is a service that helps you to promote products you list on Marketplace
          during a certain time range
        </li>
        <li>You can choose which products should be available for the promotion</li>
        <li>
          Not all Products of you will be available, because Promotions will only attract certain
          Product areas
        </li>
      </ul>
    </Panel>
  </Collapse>,
  mountNode
);

展开事件 #

import React from 'react';
import ReactDOM from 'react-dom';
import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      expandedKeys: [],
    };
    this.onExpand = expandedKeys => {
      this.setState({
        expandedKeys,
      });
    };
    this.onClick = key => {
      console.log('clicked', key);
    };
  }
  render() {
    return (
      <Collapse onExpand={this.onExpand} expandedKeys={this.state.expandedKeys}>
        <Panel title="simple tile" onClick={this.onClick}>
          Promotions are marketing campaigns ran by Marketplace. Participate to sale your products
          during that promotion and make a profit
        </Panel>
        <Panel title="What are Promotion Products?">
          Promotion Products is a service that helps you to promote products you list on Marketplace
          during a certain time range. You can choose which products should be available for the
          promotion. Not all Products of you will be available, because Promotions will only attract
          certain Product areas.
        </Panel>
        <Panel title="Why can i not submit a higher price?">
          The Promotion requires a certain price to make sure that our customers are attracted.
        </Panel>
        <Panel title="What is Promo Stock?">
          Promo Stock is the criteria needed to be followed to be able to join Promotion. With
          setting particular Promo Stock value you commit to have this amount of stock available
          while Promotion is active.
        </Panel>
      </Collapse>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API #

Collapse #

参数	说明	类型	默认值
dataSource	使用数据模型构建	Array<DataItem>	-
defaultExpandedKeys	默认展开 keys	KeyType[]	-
expandedKeys	受控展开 keys	KeyType[]	-
onExpand	展开状态发升变化时候的回调	(expandedKeys: KeyType \| KeyType[]) => void	-
disabled	所有禁用	boolean	-
accordion	手风琴模式，一次只能打开一个	boolean	false

Collapse.Panel #

参数	说明	类型	默认值
disabled	是否禁止用户操作	boolean	-
title	标题	React.ReactNode	-
isExpanded	是否展开	boolean	false
onClick	点击回调函数	\| ((e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>) => void) \| null	-

KeyType #

export type KeyType = string | number;

DataItem #

export type DataItem = {
    id?: string;
    title?: React.ReactNode;
    content?: React.ReactNode;
    disabled?: boolean;
    key?: KeyType;
    onClick?: (key: KeyType) => void;
    [propName: string]: unknown;
};

无障碍键盘操作指南 #

按键	说明
Tab	切换到下一个 collapse panel
Space	切换 collapse 的折叠状态