@opentiny/vue-docs 1.0.0 → 1.0.2

package/resources/mobile-first/app/checkbox/indeterminate.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll"> 全选 </tiny-checkbox>
+    <div style="margin: 15px 0"></div>
+    <tiny-checkbox-group v-model="checkboxGroup">
+      <tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
+        {{ city }}
+      </tiny-checkbox>
+    </tiny-checkbox-group>
+  </div>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checkboxGroup: ['北京'],
+      cities: ['上海', '北京', '广州', '深圳']
+    }
+  },
+  computed: {
+    isIndeterminate: {
+      get() {
+        return !(this.checkboxGroup.length === 0 || this.checkboxGroup.length === this.cities.length)
+      }
+    },
+    checkAll: {
+      get() {
+        return this.checkboxGroup.length === this.cities.length
+      },
+      set(val) {
+        if (val) {
+          this.checkboxGroup = [...this.cities]
+        } else {
+          this.checkboxGroup = []
+        }
+      }
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/min-max.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-checkbox-group v-model="checkboxGroup" :min="1" :max="2">
+    <tiny-checkbox v-for="city in cities" :label="city" :key="city">
+      {{ city }}
+    </tiny-checkbox>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { Checkbox, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      checkboxGroup: ['上海', '北京'],
+      cities: ['上海', '北京', '广州', '深圳']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/text.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-checkbox">
+    <tiny-checkbox v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox>
+    <tiny-button class="btn" @click="getValue">获取文本</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Checkbox, Modal, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckbox: Checkbox,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      checked: ''
+    }
+  },
+  methods: {
+    getValue() {
+      Modal.message({
+        message: 'change 事件，当前选中的值为:' + this.checked,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>
+ 
+<style scoped>
+.demo-checkbox .btn {
+  margin-left: 20px;
+}
+</style>

package/resources/mobile-first/app/checkbox/vertical-checkbox.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-checkbox-group v-model="checkboxGroup" vertical text-color="#fff">
+    <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">
+      {{ city }}
+    </tiny-checkbox-button>
+  </tiny-checkbox-group>
+</template>
+
+<script>
+import { CheckboxGroup, CheckboxButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxGroup: CheckboxGroup,
+    TinyCheckboxButton: CheckboxButton
+  },
+  data() {
+    return {
+      checkboxGroup: ['上海'],
+      cities: ['上海', '北京', '广州', '深圳']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/checkbox/with-border.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <div>
+      <tiny-checkbox-group v-model="checkboxGroup1">
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">
+          {{ city }}
+        </tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div style="margin-top: 20px">
+      <tiny-checkbox-group v-model="checkboxGroup2" size="medium">
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">
+          {{ city }}
+        </tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div style="margin-top: 20px">
+      <tiny-checkbox-group v-model="checkboxGroup3" size="small">
+        <tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">
+          {{ city }}
+        </tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+    <div style="margin-top: 20px">
+      <tiny-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+        <tiny-checkbox-button v-for="city in cities" :label="city" :key="city">
+          {{ city }}
+        </tiny-checkbox-button>
+      </tiny-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCheckboxButton: CheckboxButton,
+    TinyCheckboxGroup: CheckboxGroup
+  },
+  data() {
+    return {
+      cities: ['上海', '北京', '广州', '深圳'],
+      checkboxGroup1: ['上海'],
+      checkboxGroup2: ['上海'],
+      checkboxGroup3: ['上海'],
+      checkboxGroup4: ['上海']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/accordion.vue

@@ -0,0 +1,45 @@
+<template>
+  <tiny-collapse v-model="activeName" accordion @change="change">
+    <tiny-collapse-item title="一致性 Consistency" name="1">
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3">
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem
+  },
+  data() {
+    return {
+      activeName: '1'
+    }
+  },
+  methods: {
+    change(val) {
+      Modal.message({
+        message: 'change 事件，当前选中的值为：' + val,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/basic-usage.vue

@@ -0,0 +1,37 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item title="一致性 Consistency" name="1">
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3">
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem
+  },
+  data() {
+    return {
+      activeNames: ['1', '3']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/block-close.vue

@@ -0,0 +1,43 @@
+<template>
+  <tiny-collapse v-model="activeName" accordion :before-close="blockClose">
+    <tiny-collapse-item title="一致性 Consistency" name="1">
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3">
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem
+  },
+  data() {
+    return {
+      activeName: '1'
+    }
+  },
+  methods: {
+    blockClose(value) {
+      Modal.message({ message: '阻止面板关闭；传入value：' + value })
+      return false
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/collapse-events.vue

@@ -0,0 +1,45 @@
+<template>
+  <tiny-collapse v-model="activeNames" @change="change">
+    <tiny-collapse-item title="一致性 Consistency" name="1">
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3">
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem
+  },
+  data() {
+    return {
+      activeNames: ['1', '3']
+    }
+  },
+  methods: {
+    change(activeNames) {
+      Modal.message({
+        message: 'change 事件，当前激活面板：' + activeNames,
+        status: 'info'
+      })
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/custom-collapse-title-right.vue

@@ -0,0 +1,44 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item name="1">
+      <template #title>
+        <span>一致性 Consistency</span>
+      </template>
+      <template #title-right>
+        <span><icon-clock-work class="icon-clockWork"></icon-clock-work></span>
+      </template>
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" title-right="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem } from '@opentiny/vue'
+import { IconClockWork } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    IconClockWork: IconClockWork()
+  },
+  data() {
+    return {
+      activeNames: ['1']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon-clockWork {
+  fill: #1890ff;
+  font-size: 18px;
+  margin-right: 10px;
+}
+</style>

package/resources/mobile-first/app/collapse/custom-collapse-title.vue

@@ -0,0 +1,49 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item name="1">
+      <template #title>
+        <span> <icon-clock-work class="icon-clockWork"></icon-clock-work>一致性 Consistency </span>
+      </template>
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3">
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem } from '@opentiny/vue'
+import { IconClockWork } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    IconClockWork: IconClockWork()
+  },
+  data() {
+    return {
+      activeNames: ['1']
+    }
+  }
+}
+</script>
+
+<style scoped>
+.icon-clockWork {
+  fill: #1890ff;
+  font-size: 18px;
+}
+</style>

package/resources/mobile-first/app/collapse/dynamic-disable.vue

@@ -0,0 +1,37 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item title="一致性 Consistency" name="1">
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="反馈 Feedback" name="2">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="效率 Efficiency" name="3" disabled>
+      <div>简化流程：设计简洁直观的操作流程；</div>
+      <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+      <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item title="可控 Controllability" name="4">
+      <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+      <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem
+  },
+  data() {
+    return {
+      activeNames: ['1']
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/nested-form.vue

@@ -0,0 +1,49 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item title="多列表单" name="1">
+      <tiny-layout>
+        <tiny-form :responsive-layout="true">
+          <tiny-row>
+            <tiny-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
+              <tiny-form-item label="公司名称">
+                <tiny-input v-model="formData.name" placeholder="请输入"></tiny-input>
+              </tiny-form-item>
+            </tiny-col>
+            <tiny-col :xs="12" :sm="6" :md="6" :lg="6" :xl="6">
+              <tiny-form-item label="员工数">
+                <tiny-numeric v-model="formData.employees" :min="0"></tiny-numeric>
+              </tiny-form-item>
+            </tiny-col>
+          </tiny-row>
+        </tiny-form>
+      </tiny-layout>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem, Layout, Form, FormItem, Row, Col, Input, Numeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    TinyLayout: Layout,
+    TinyForm: Form,
+    TinyFormItem: FormItem,
+    TinyRow: Row,
+    TinyCol: Col,
+    TinyInput: Input,
+    TinyNumeric: Numeric
+  },
+  data() {
+    return {
+      activeNames: ['1'],
+      formData: {
+        name: '',
+        employees: ''
+      }
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/nested-grid.vue

@@ -0,0 +1,87 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item title="Grid 基本用法" name="1">
+      <tiny-grid :data="data" border :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
+        <tiny-grid-column type="index" width="60"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+        <tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
+        <tiny-grid-column field="created_date" title="创建日期"></tiny-grid-column>
+        <tiny-grid-column field="city" title="城市"></tiny-grid-column>
+        <tiny-grid-column field="boole" title="布尔值" align="center" format-text="boole" :editor="checkboxEdit"></tiny-grid-column>
+      </tiny-grid>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script lang="jsx">
+import { Collapse, CollapseItem, Grid, GridColumn } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      activeNames: ['1'],
+      data: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          city: '福州',
+          employees: 800,
+          created_date: '2014-04-30 00:56:00',
+          boole: false
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          city: '深圳',
+          employees: 300,
+          created_date: '2016-07-08 12:36:22',
+          boole: true
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          city: '中山',
+          employees: 1300,
+          created_date: '2014-02-14 14:14:14',
+          boole: false
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          city: '龙岩',
+          employees: 360,
+          created_date: '2013-01-13 13:13:13',
+          boole: true
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          city: '韶关',
+          employees: 810,
+          created_date: '2012-12-12 12:12:12',
+          boole: true
+        }
+      ]
+    }
+  },
+  methods: {
+    checkboxEdit(h, { row, column }) {
+      return (
+        <input
+          type="checkbox"
+          checked={row.boole}
+          onChange={(event) => {
+            row[column.property] = event.target.checked
+          }}
+        />
+      )
+    }
+  }
+}
+</script>

package/resources/mobile-first/app/collapse/slot-icon.vue

@@ -0,0 +1,39 @@
+<template>
+  <tiny-collapse v-model="activeNames">
+    <tiny-collapse-item name="1" title="一致性 Consistency">
+      <template #icon="{ active }">
+        <icon-arrow-bottom class="tiny-svg-size" :style="{
+          fill: 'red',
+          width: '10px',
+          height: '10px',
+          transition: 'all 0.2s',
+          transform: active ? 'rotate(0deg)' : 'rotate(-90deg)'
+        }"></icon-arrow-bottom>
+      </template>
+
+      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+    </tiny-collapse-item>
+    <tiny-collapse-item name="2" title="效率 Efficiency">
+      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+    </tiny-collapse-item>
+  </tiny-collapse>
+</template>
+
+<script>
+import { Collapse, CollapseItem } from '@opentiny/vue'
+import { IconArrowBottom } from '@opentiny/vue-icon'
+export default {
+  components: {
+    TinyCollapse: Collapse,
+    TinyCollapseItem: CollapseItem,
+    IconArrowBottom: IconArrowBottom()
+  },
+  data() {
+    return {
+      activeNames: []
+    }
+  }
+}
+</script>