使用方式

<link rel="stylesheet" href="/components/style/collapse.css" type="text/css" />
<script defer src="/components/js/collapse.js" type="text/javascript"></script>

基本用法

<div class="st_collapse" st-model="collapseModels" change="collapseChange">
  <div class="st_collapse_item" name="1">
    <div class="st_collapse_item_header">
      一致性 Consistency
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
      </div>
    </div>
  </div>
  <div class="st_collapse_item" name="2">
    <div class="st_collapse_item_header">
      反馈 Feedback
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
      </div>
    </div>
  </div>
  <div class="st_collapse_item" name="3">
    <div class="st_collapse_item_header">
      效率 Efficiency
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        简化流程：设计简洁直观的操作流程；
      </div>
    </div>
  </div>
</div>

手风琴效果

<div class="st_collapse" st-model="collapseModel" change="collapseChange" accordion>
  <div class="st_collapse_item" name="1">
    <div class="st_collapse_item_header">
      一致性 Consistency
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
      </div>
    </div>
  </div>
  <div class="st_collapse_item" name="2">
    <div class="st_collapse_item_header">
      反馈 Feedback
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
      </div>
    </div>
  </div>
  <div class="st_collapse_item" name="3">
    <div class="st_collapse_item_header">
      效率 Efficiency
      <i class="stIconFont icon-xiala-right"></i>
    </div>
    <div class="st_collapse_item_wrap">
      <div class="st_collapse_item_content">
        简化流程：设计简洁直观的操作流程；
      </div>
    </div>
  </div>
</div>

属性

属性	说明	类型	可选值	默认值
st-model	数据绑定(自定义属性)	array	-	-
change	输入值变化回调方法(自定义属性)	string	-	-
accordion	通过 accordion 属性来设置是否以手风琴模式显示。	boolean	-	false
name	item绑定对应值	string	-	-