Accordion 手风琴

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

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

API

手风琴

参数说明类型默认值
prefix样式前缀String'next-'
style组件接受行内样式Object-
dataSource使用数据模型构建Array-
singleShrink如果这个属性为true, 在single为true时, 组件可以收起全部子元素Boolean-
single是否只能展开1个Booleanfalse
onChange接收一个回调函数传递改变状态, 在使用dataSource时改回调需要产生改变组件才能生效签名:Function() => voidFunction-
className扩展classString-

Accordion.Panel

参数说明类型默认值
prefix样式类名的品牌前缀String-
style子组件接受行内样式Object-
expanded是否展开Booleanfalse
disabled是否禁止用户操作Boolean-
title标题ReactNode''
multiTitle标题是否多行显示Booleanfalse
className扩展classString-

代码示例

基本

Accordion接受子组件Panel展示信息。Panel可设置：title(标题)、disable(是否可操作)等属性，其中title、content值可为字符串或Component组件，expand、disable接受布尔值。

Accordion 手风琴 - 图1

查看源码在线预览

  1. import { Accordion } from "@icedesign/base";
  3. const { Panel } = Accordion;
  5. ReactDOM.render(
  6.   <Accordion>
  7.     <Panel
  8.       multiTitle
  9.       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."
  10.     >
  11.       <ul>
  12.         <li>Promotions are marketing campaigns ran by Marketplace</li>
  13.         <li>
  14.           Participate to sale your products during that promotion and make a
  15.           profit
  16.         </li>
  17.       </ul>
  18.     </Panel>
  19.     <Panel title="What are Promotion Products?">
  20.       <ul>
  21.         <li>
  22.           Promotion Products is a service that helps you to promote products you
  23.           list on Marketplace during a certain time range
  24.         </li>
  25.         <li>
  26.           You can choose which products should be available for the promotion
  27.         </li>
  28.         <li>
  29.           Not all Products of you will be available, because Promotions will
  30.           only attract certain Product areas
  31.         </li>
  32.       </ul>
  33.     </Panel>
  34.     <Panel title="Why can i not submit a higher price?">
  35.       <ul>
  36.         <li>
  37.           The Promotion requires a certain price to make sure that our customers
  38.           are attracted
  39.         </li>
  40.       </ul>
  41.     </Panel>
  42.     <Panel title="What is Promo Stock?">
  43.       Promo Stock is the criteria needed to be followed to be able to join
  44.       Promotion. With setting particular Promo Stock value you commit to have
  45.       this amount of stock available while Promotion is active.
  46.     </Panel>
  47.   </Accordion>,
  48.   mountNode
  49. );

外部综合操作

Accordion的onChange属性接受一个事件, 事件返回点击后的状态, 外部接收这个值传递给dataSource让Accordion发生改变dataSource接受一个数组, 数组元素为一个对象, 包含属性：title(标题)、content(内容)、disable(是否可操作)等属性，其中title、content值可为字符串或Component组件，expanded、disable接受布尔值。Accordion的dataSource属性接受一个状态数组与外部state对应。

Accordion 手风琴 - 图2

查看源码在线预览

  1. import { Accordion, Button } from "@icedesign/base";
  3. const list = [
  4.   {
  5.     title: "Well, hello there",
  6.     content:
  7.       "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."
  8.   },
  9.   {
  10.     title: "Gigantomaniac Monster Text, very long, much width, wow",
  11.     content:
  12.       "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."
  13.   },
  14.   {
  15.     title: "Generic Title",
  16.     content:
  17.       "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."
  18.   },
  19.   {
  20.     title: "Login Infomation",
  21.     content:
  22.       "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."
  23.   }
  24. ];
  26. class Demo extends React.Component {
  27.   constructor(props, context) {
  28.     super(props, context);
  29.     this.state = {
  30.       list: list,
  31.       single: false
  32.     };
  33.   }
  35.   onChange(status, list) {
  36.     console.log(status);
  38.     //重新拼装list, 使改变生效
  39.     this.setState({
  40.       list
  41.     });
  42.   }
  44.   showAll() {
  45.     this.setState({
  46.       list: this.state.list.map(e => {
  47.         return Object.assign({}, e, { expanded: true });
  48.       })
  49.     });
  50.   }
  52.   closeAll() {
  53.     this.setState({
  54.       list: this.state.list.map(e => {
  55.         return Object.assign({}, e, { expanded: false });
  56.       })
  57.     });
  58.   }
  60.   setSingle() {
  61.     this.setState({
  62.       single: true
  63.     });
  64.   }
  66.   cancelSingle() {
  67.     this.setState({
  68.       single: false
  69.     });
  70.   }
  72.   render() {
  73.     return (
  74.       <div className="demo">
  75.         <p>
  76.           外部控制：
  77.           <Button onClick={this.showAll.bind(this)}>展开全部</Button>
  78.           <Button onClick={this.closeAll.bind(this)}>收起全部</Button>
  79.           <Button onClick={this.setSingle.bind(this)}>单例模式</Button>
  80.           <Button onClick={this.cancelSingle.bind(this)}>多例模式</Button>
  81.         </p>
  82.         <br />
  83.         <Accordion
  84.           single={this.state.single}
  85.           onChange={this.onChange.bind(this)}
  86.           dataSource={this.state.list}
  87.         />
  88.       </div>
  89.     );
  90.   }
  91. }
  93. ReactDOM.render(<Demo />, mountNode);
  1. .demo button {
  2.     margin-right: 5px;
  3. }

disabled 禁止操作

若dataSource属性内对disable为true, 鼠标点击将无效。

Accordion 手风琴 - 图3

查看源码在线预览

  1. import { Accordion } from "@icedesign/base";
  3. const list = [
  4.   {
  5.     title: "Well, hello there",
  6.     content:
  7.       "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.",
  8.     disabled: true
  9.   },
  10.   {
  11.     title: "Gigantomaniac Monster Text, very long, much width, wow",
  12.     content:
  13.       "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.",
  14.     disabled: true
  15.   },
  16.   {
  17.     title: "Generic Title",
  18.     content:
  19.       "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.",
  20.     disabled: true
  21.   },
  22.   {
  23.     title: "Login Infomation",
  24.     content:
  25.       "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.",
  26.     disabled: true
  27.   }
  28. ];
  30. class Demo extends React.Component {
  31.   constructor(props, context) {
  32.     super(props, context);
  33.     this.state = {
  34.       list: list
  35.     };
  36.   }
  38.   onChange(status) {
  39.     //点击后的status : [true, false, false, false]
  41.     //重新拼装list, 使改变生效
  42.     this.setState({
  43.       list: this.state.list.map((e, k) => {
  44.         return Object.assign({}, e, { expanded: status[k] });
  45.       })
  46.     });
  47.   }
  49.   render() {
  50.     return (
  51.       <Accordion
  52.         onChange={this.onChange.bind(this)}
  53.         dataSource={this.state.list}
  54.       />
  55.     );
  56.   }
  57. }
  59. ReactDOM.render(<Demo />, mountNode);

单例模式

Accordion的single属性接受一个布尔值, 若为true, 最多只能有一个组件展开。

Accordion 手风琴 - 图4

查看源码在线预览

  1. import { Accordion } from "@icedesign/base";
  3. const list = [
  4.   {
  5.     title: "Well, hello there",
  6.     content:
  7.       "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."
  8.   },
  9.   {
  10.     title: "Gigantomaniac Monster Text, very long, much width, wow",
  11.     content:
  12.       "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."
  13.   },
  14.   {
  15.     title: "Generic Title",
  16.     content:
  17.       "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."
  18.   },
  19.   {
  20.     title: "Login Infomation",
  21.     content:
  22.       "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."
  23.   }
  24. ];
  26. class Demo extends React.Component {
  27.   constructor(props, context) {
  28.     super(props, context);
  29.     this.state = {
  30.       list: list
  31.     };
  32.   }
  34.   onChange(status) {
  35.     //点击后的status : [true, false, false, false]
  37.     //重新拼装list, 使改变生效
  38.     this.setState({
  39.       list: this.state.list.map((e, k) => {
  40.         return Object.assign({}, e, { expanded: status[k] });
  41.       })
  42.     });
  43.   }
  45.   render() {
  46.     return (
  47.       <Accordion
  48.         single
  49.         onChange={this.onChange.bind(this)}
  50.         dataSource={this.state.list}
  51.       />
  52.     );
  53.   }
  54. }
  56. ReactDOM.render(<Demo />, mountNode);

相关区块

Accordion 手风琴 - 图5

暂无相关区块