界面组件 UI Components

手风琴 Accordion

  1. Vue.js Reference
  2. React Native Reference

手风琴将大量内容压缩在有限空间内，用户通过手风琴选项获得关键信息，可通过点击展开相应选项。 手风琴样式与折叠基本一致，区别为多个手风琴并列时候，同时能且仅能展开一个，不支持多个展开。如需支持多个展开，请使用折叠。

适用情况

  • 选项文字应简洁凝练，并且准确传达展开后模块内容信息。
  • 在“常用问题”板块中，一组手风琴承载的内容主题应统一。

不适用情况

  • 手风琴中没有文字、仅有视觉元素的情况。
  • 可折叠内容中又包含可折叠内容的情况。


<up-accordion type="card" label-collapsed="展开更多" label-expended="收起详情" @onChange="onChange" :active-index="1">
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        门店地址
                    </div>
                    <div class="has-text-small desc-text">
                        浦东新区紫薇路 800 号
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        门店地址
                    </div>
                    <div class="has-text-small desc-text">
                        浦东新区紫薇路 800 号
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        门店地址
                    </div>
                    <div class="has-text-small desc-text">
                        浦东新区紫薇路 800 号
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        门店地址
                    </div>
                    <div class="has-text-small desc-text">
                        浦东新区紫薇路 800 号
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
</up-accordion>

<up-accordion type="plain" label-collapsed="展开更多" label-expended="收起详情">
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
            <div class="docs-collapse-card-desc-item">
                <div class="has-text-subtitle desc-title">
                    门店地址
                </div>
                <div class="has-text-small desc-text">
                    浦东新区紫薇路 800 号
                </div>
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
            <div class="docs-collapse-card-desc-item">
                <div class="has-text-subtitle desc-title">
                    门店地址
                </div>
                <div class="has-text-small desc-text">
                    浦东新区紫薇路 800 号
                </div>
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
            <div class="docs-collapse-card-desc-item">
                <div class="has-text-subtitle desc-title">
                    门店地址
                </div>
                <div class="has-text-small desc-text">
                    浦东新区紫薇路 800 号
                </div>
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
    <up-collapse>
        <div class="docs-collapse-card-cot">
            <div class="has-text-section-title cot-title">
                标题名称
            </div>
            <div class="docs-collapse-card-desc-item">
                <div class="has-text-subtitle desc-title">
                    门店地址
                </div>
                <div class="has-text-small desc-text">
                    浦东新区紫薇路 800 号
                </div>
            </div>
        </div>
        <div slot="collapse-slot">
            <div class="docs-collapse-card-desc">
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        营业时间
                    </div>
                    <div class="has-text-small desc-text">
                        工作日 8:00-21:00
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        联系电话
                    </div>
                    <div class="has-text-small desc-text">
                        021-85129445
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        当前优惠
                    </div>
                    <div class="has-text-small desc-text">
                        中信银行 每周五买一送一
                    </div>
                </div>
                <div class="docs-collapse-card-desc-item">
                    <div class="has-text-subtitle desc-title">
                        支付方式
                    </div>
                    <div class="has-text-small desc-text">
                        二维码支付、手机闪付、IC 卡支付
                    </div>
                </div>
            </div>
        </div>
    </up-collapse>
</up-accordion>

<script>

export default {
  methods:{
    onChange(open,index){}
  }
}
</script>



<Accordion type='card' labelExpended='收起详情' labelCollapsed='显示更多' items={[
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
      ]}>
</Accordion>

<Accordion type='plain' labelExpended='收起详情' labelCollapsed='显示更多' activeIndex={1} items={[
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
        {
          visible: (<View><Label style={{paddingVertical:Theme.spaceXS}} type='sectionTitle' text='标题名称'/></View>),
          collapsable: (<View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='营业时间' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='工作日 8:00-21:00'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='联系电话' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='021-85129445'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='当前优惠' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='中信银行  每周五买一送一'/>
            </View>
            <View style={{flexDirection:'row', paddingVertical:Theme.spaceXS}}>
              <Label type='smallTitle' text='支付方式' style={{marginRight:Theme.spaceM}}/>
              <Label type='smallText' text='二维码支付、手机闪付、IC 卡支付'/>
            </View>
          </View>)
        },
      ]}>
</Accordion>

Vue.js Reference

属性 说明 类型 可选值 默认值
type 手风琴类型 String card 卡片类型,plain 铺满类型 plain
label-collapsed 收起时的按钮文字 String - 展开
label-expended 展开时的按钮文字 String - 收起
active-index 默认展开其中的某一项，可以设置为 -1 表示默认没有展开项 Number - -
事件 说明 参数1 参数2
onChange 手风琴中子项状态改变时触发 某一子项index:Number 折叠状态 status:Boolean

* 将 <up-collapse></up-collapse> 放入 <up-accordion></up-accordion> 可编辑成手风琴形式

React Native Reference

属性 说明 类型 可选值 默认值
type 手风琴类型 String card 卡片样式，plain 普通样式 plain
items 包括在手风琴控件中的 Collapseable 的组件配置，参数可参考示例代码 JSON Object - -
labelCollapsed 收起状态下的按钮文字 String - ‘展开’
labelExpended 展开状态下的按钮文字 String - ‘收起’
activeIndex 默认展开其中的某一项，可以设置为 -1 表示默认没有展开项 Number - 0
事件 说明 参数1 参数2
onChange 手风琴中子项状态改变时触发 某一子项index:Number 折叠状态 status:Boolean