Collapse 折叠面板

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

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

API

Collapse

Collapse.Panel

ARIA and KeyBoard

代码示例

基本

查看源码在线预览

import { Collapse, Radio } from '@alifd/next';
const Panel = Collapse.Panel;
const RadioGroup = Radio.Group;
const RTL = 'rtl';
const LTR = 'ltr';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rtl: false
        };
        this.handleDirectionChange = this.handleDirectionChange.bind(this);
    }
    handleDirectionChange(v) {
        this.setState({
            rtl: !this.state.rtl
        });
    }
    render() {
        return (<div>
            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />
            <Collapse rtl={this.state.rtl}>
                <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>
        </div>);
    }
}
ReactDOM.render(
    <App />,
    mountNode);

数据

查看源码在线预览

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 { 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.">
        <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>, mountNode);

禁用

查看源码在线预览

import { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
ReactDOM.render(
    <div>
        <Collapse disabled>
            <Panel title="disable collapse">
                <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="disable collapse">
                <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="disable collapse">
                <ul>
                    <li>The Promotion requires a certain price to make sure that our customers are attracted</li>
                </ul>
            </Panel>
            <Panel title="disable collapse">
                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>
        <br />
        <Collapse>
            <Panel title="simple title(disabled)" disabled>
                <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?(disabled)" disabled>
                <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>
    </div>,
    mountNode);

无障碍

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

查看源码在线预览

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 { Collapse } from '@alifd/next';
const Panel = Collapse.Panel;
class Demo extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            expandedKeys: []
        };
    }
    onExpand(expandedKeys) {
        this.setState({
            expandedKeys
        });
    }
    onClick(key) {
        console.log('clicked', key);
    }
    render() {
        return (
            <Collapse onExpand={this.onExpand.bind(this)} expandedKeys={this.state.expandedKeys} >
                <Panel title="simple tile" onClick={this.onClick}>
                    <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>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

基本

查看源码在线预览

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);

相关区块

暂无相关区块