refactor: demo style nut-cell com

src/packages/__VUE/actionsheet/demo.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-list demo">
+  <div class="demo">
     <h2>基本用法</h2>
     <nut-cell
       :show-icon="true"

src/packages/__VUE/checkbox/demo.vue

@@ -1,82 +1,96 @@
 <template>
-  <div class="demo-list">
-    <h4>基础用法</h4>
-    <div class="show-demo">
-      <nut-checkbox v-model="checkbox1" label="复选框" @change="changeBox1"
-        ><span>复选框</span></nut-checkbox
-      >
-      <span>{{ checkbox1 }}</span>
-    </div>
-    <div class="show-demo">
-      <nut-checkbox
-        v-model="checkbox2"
-        text-position="left"
-        @change="changeBox2"
-        >复选框</nut-checkbox
-      >
-      <span>{{ checkbox2 }}</span>
-    </div>
-    <h4>禁用状态</h4>
-    <div class="show-demo">
-      <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
-      <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
-    </div>
-    <h4>自定义尺寸</h4>
-    <div class="show-demo">
-      <nut-checkbox v-model="checkbox5" icon-size="25"
-        >自定义尺寸25</nut-checkbox
-      >
-      <nut-checkbox v-model="checkbox6" icon-size="10"
-        >自定义尺寸10</nut-checkbox
-      >
-    </div>
-    <h4>自定义图标</h4>
-    <div class="show-demo">
-      <nut-checkbox
-        v-model="checkbox7"
-        icon-name="checklist"
-        icon-active-name="checklist"
-        >自定义图标</nut-checkbox
-      >
-    </div>
-    <h4>点击触发change事件</h4>
-    <div class="show-demo">
-      <nut-checkbox v-model="checkbox8" @change="changeBox3"
-        >change复选框</nut-checkbox
-      >
-    </div>
-    <h4>checkboxGroup使用</h4>
-    <div class="show-demo group1">
-      <nut-checkboxgroup v-model="checkboxgroup1">
-        <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>
-        <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
-        <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>
-        <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
-      </nut-checkboxgroup>
-      <span>选中：{{ checkboxgroup1 }}</span>
-    </div>
-    <h4>checkboxGroup禁用</h4>
-    <div class="show-demo group2">
-      <nut-checkboxgroup v-model="checkboxgroup2" disabled>
-        <nut-checkbox v-model="checkbox13" label="1">组合复选框</nut-checkbox>
-        <nut-checkbox v-model="checkbox14" label="2">组合复选框</nut-checkbox>
-      </nut-checkboxgroup>
-    </div>
-    <h4>checkboxGroup 全选/取消</h4>
-    <div class="show-demo group1">
-      <nut-checkboxgroup
-        v-model="checkboxgroup3"
-        ref="group"
-        @change="changeBox4"
-      >
-        <nut-checkbox v-model="checkbox15" label="1">组合复选框</nut-checkbox>
-        <nut-checkbox v-model="checkbox16" label="2">组合复选框</nut-checkbox>
-      </nut-checkboxgroup>
-      <span class="btn">
+  <div class="demo">
+    <nut-cell-group title="基本用法-左右">
+      <nut-cell>
+        <nut-checkbox v-model="checkbox1" label="复选框" @change="changeBox1"
+          >复选框</nut-checkbox
+        >
+      </nut-cell>
+      <nut-cell>
+        <nut-checkbox
+          v-model="checkbox1"
+          text-position="left"
+          @change="changeBox1"
+          >复选框</nut-checkbox
+        >
+      </nut-cell>
+      <nut-cell title="当前选中值" :desc="checkbox1" />
+    </nut-cell-group>
+
+    <nut-cell-group title="禁用状态">
+      <nut-cell>
+        <nut-checkbox v-model="checkbox3" disabled>未选时禁用状态</nut-checkbox>
+      </nut-cell>
+      <nut-cell>
+        <nut-checkbox v-model="checkbox4" disabled>选中时禁用状态</nut-checkbox>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="自定义尺寸">
+      <nut-cell>
+        <nut-checkbox v-model="checkbox5" icon-size="25"
+          >自定义尺寸25</nut-checkbox
+        >
+      </nut-cell>
+      <nut-cell>
+        <nut-checkbox v-model="checkbox6" icon-size="10"
+          >自定义尺寸10</nut-checkbox
+        >
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="自定义图标">
+      <nut-cell>
+        <nut-checkbox
+          v-model="checkbox7"
+          icon-name="checklist"
+          icon-active-name="checklist"
+          >自定义图标</nut-checkbox
+        >
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="点击触发change事件">
+      <nut-cell>
+        <nut-checkbox v-model="checkbox8" @change="changeBox3"
+          >change复选框</nut-checkbox
+        >
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="checkboxGroup使用">
+      <nut-cell>
+        <nut-checkboxgroup v-model="checkboxgroup1">
+          <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+      <nut-cell title="当前选中值" :desc="checkboxgroup1" />
+    </nut-cell-group>
+    <nut-cell-group title="checkboxGroup禁用">
+      <nut-cell>
+        <nut-checkboxgroup v-model="checkboxgroup1" disabled>
+          <nut-checkbox v-model="checkbox9" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox10" label="2">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox11" label="3">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox12" label="4">组合复选框</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="checkboxGroup 全选/取消">
+      <nut-cell>
+        <nut-checkboxgroup
+          v-model="checkboxgroup3"
+          ref="group"
+          @change="changeBox4"
+        >
+          <nut-checkbox v-model="checkbox15" label="1">组合复选框</nut-checkbox>
+          <nut-checkbox v-model="checkbox16" label="2">组合复选框</nut-checkbox>
+        </nut-checkboxgroup>
+      </nut-cell>
+      <nut-cell>
         <nut-button type="primary" @click="toggleAll(true)">全选</nut-button>
-        <nut-button type="primary" @click="toggleAll(false)">取消</nut-button>
-      </span>
-    </div>
+        <nut-button type="info" @click="toggleAll(false)">取消</nut-button>
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 <script lang="ts">
@@ -140,52 +154,4 @@ export default createDemo({
   }
 });
 </script>
-<style lang="scss" scoped>
-.demo-list {
-  margin: 57px 0 60px 0;
-  padding: 0 17px 17px;
-  h4 {
-    margin: 25px 0 10px;
-    line-height: 20px;
-    color: #909ca4;
-    font-size: 14px;
-  }
-  .show-demo {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-    padding: 15px;
-    background-color: #ffffff;
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    &.group1 {
-      flex-direction: column;
-      ::v-deep(.nut-checkbox) {
-        margin-left: 15px;
-      }
-    }
-    &.group2 {
-      ::v-deep(.nut-checkbox) {
-        margin-left: 15px;
-      }
-    }
-    p,
-    span {
-      display: block;
-      font-size: 14px;
-      color: #636363;
-    }
-    span {
-      color: #1d1e1e;
-      font-size: 16px;
-      &.btn {
-        margin-top: 20px;
-        ::v-deep(.nut-button) {
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/checkbox/doc.md

@@ -17,7 +17,7 @@ app.use(Checkbox);
 ## 基本用法
 
 ```html
-<nut-checkbox v-model="checkbox1" label="复选框"><span>复选框</span></nut-checkbox>
+<nut-checkbox v-model="checkbox1" label="复选框">复选框</nut-checkbox>
 <nut-checkbox v-model="checkbox2" text-position="left">复选框</nut-checkbox>
 ```
 ```ts

src/packages/__VUE/collapse/demo.vue

@@ -1,82 +1,69 @@
 <template>
-  <div class="demo-list">
-    <h4>基本用法</h4>
-    <div class="show-demo">
-      <nut-collapse v-model:active="active1" icon="down-arrow">
-        <nut-collapse-item :title="title1" :name="1">
-          京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
-          京东到家：教师节期间 创意花束销量增长53倍
-        </nut-collapse-item>
-        <nut-collapse-item :title="title3" :name="3" disabled>
-        </nut-collapse-item>
-      </nut-collapse>
-    </div>
-    <h4>无icon样式</h4>
-    <div class="show-demo">
-      <nut-collapse v-model:active="active4" :accordion="true">
-        <nut-collapse-item :title="title1" :name="1">
-          2020年中国数字游戏市场规模超2786亿元
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2">
-          基于区块链技术的取证APP在浙江省杭州市发布
-        </nut-collapse-item>
-      </nut-collapse>
-    </div>
-    <div class="show-demo">
-      <h4>手风琴</h4>
-      <nut-collapse
-        v-model:active="active2"
-        :accordion="true"
-        icon="down-arrow"
-      >
-        <nut-collapse-item :title="title1" :name="1">
-          华为终端操作系统EMUI 11发布，9月11日正式开启
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-          中国服务机器人市场已占全球市场超1/4
-        </nut-collapse-item>
-        <nut-collapse-item :title="title3" :name="3">
-          QuestMobile：90后互联网用户规模超越80后达3.62亿
-        </nut-collapse-item>
-      </nut-collapse>
-    </div>
-    <div class="show-demo">
-      <h4>自定义折叠图标</h4>
-      <nut-collapse
-        v-model:active="active3"
-        :accordion="true"
-        icon="arrow-right2"
-        rotate="90"
-      >
-        <nut-collapse-item :title="title1" :name="1">
-          京东数科IPO将引入“绿鞋机制”
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-          世界制造业大会开幕，阿里巴巴与安徽合作再升级
-        </nut-collapse-item>
-      </nut-collapse>
-    </div>
-    <div class="show-demo">
-      <h4>自定义标题图标</h4>
-      <nut-collapse
-        v-model:active="active5"
-        title-icon="issue"
-        title-icon-color="red"
-        title-icon-size="20px"
-        title-icon-position="left"
-        icon="down-arrow"
-        :accordion="true"
-      >
-        <nut-collapse-item :title="title1" :name="1">
-          “森亿智能”获4亿元D轮融资
-        </nut-collapse-item>
-        <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-          快看漫画与全球潮玩集合店X11达成战略合作
-        </nut-collapse-item>
-      </nut-collapse>
-    </div>
+  <div class="demo full">
+    <h2>基本用法</h2>
+    <nut-collapse v-model:active="active1" icon="down-arrow">
+      <nut-collapse-item :title="title1" :name="1">
+        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2">
+        京东到家：教师节期间 创意花束销量增长53倍
+      </nut-collapse-item>
+      <nut-collapse-item :title="title3" :name="3" disabled>
+      </nut-collapse-item>
+    </nut-collapse>
+    <h2>无icon样式</h2>
+    <nut-collapse v-model:active="active4" :accordion="true">
+      <nut-collapse-item :title="title1" :name="1">
+        2020年中国数字游戏市场规模超2786亿元
+      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2">
+        基于区块链技术的取证APP在浙江省杭州市发布
+      </nut-collapse-item>
+    </nut-collapse>
+    <h2>手风琴</h2>
+    <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
+      <nut-collapse-item :title="title1" :name="1">
+        华为终端操作系统EMUI 11发布，9月11日正式开启
+      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
+        中国服务机器人市场已占全球市场超1/4
+      </nut-collapse-item>
+      <nut-collapse-item :title="title3" :name="3">
+        QuestMobile：90后互联网用户规模超越80后达3.62亿
+      </nut-collapse-item>
+    </nut-collapse>
+    <h2>自定义折叠图标</h2>
+
+    <nut-collapse
+      v-model:active="active3"
+      :accordion="true"
+      icon="arrow-right2"
+      rotate="90"
+    >
+      <nut-collapse-item :title="title1" :name="1">
+        京东数科IPO将引入“绿鞋机制”
+      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+        世界制造业大会开幕，阿里巴巴与安徽合作再升级
+      </nut-collapse-item>
+    </nut-collapse>
+    <h2>自定义标题图标</h2>
+    <nut-collapse
+      v-model:active="active5"
+      title-icon="issue"
+      title-icon-color="red"
+      title-icon-size="20px"
+      title-icon-position="left"
+      icon="down-arrow"
+      :accordion="true"
+    >
+      <nut-collapse-item :title="title1" :name="1">
+        “森亿智能”获4亿元D轮融资
+      </nut-collapse-item>
+      <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
+        快看漫画与全球潮玩集合店X11达成战略合作
+      </nut-collapse-item>
+    </nut-collapse>
   </div>
 </template>
 <script lang="ts">
@@ -107,14 +94,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.demo-list {
-  padding-top: 0;
-  margin: 60px 0;
-  h4 {
-    margin: 20px 0 10px 25px;
-    font-size: 14px;
-    color: #909ca4;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/collapseitem/demo.vue

@@ -1,4 +0,0 @@
-<template>
-  <div class="demo-list"> </div>
-</template>
-<script lang="ts"></script>

src/packages/__VUE/radio/demo.vue

@@ -1,57 +1,68 @@
 <template>
-  <div class="demo-list">
-    <h4>Radio基本用法</h4>
-    <div class="show-demo">
-      <nut-radiogroup v-model="radioVal" @change="handleChange1">
-        <nut-radio :label="1">单选框1</nut-radio>
-        <nut-radio :label="2">单选框2</nut-radio>
-      </nut-radiogroup>
-      <span>{{ radioVal }}</span>
-    </div>
-    <div class="show-demo">
-      <nut-radiogroup
-        v-model="radioVal2"
-        @change="handleChange2"
-        text-position="left"
-      >
-        <nut-radio :label="1">单选框文本在左侧</nut-radio>
-        <nut-radio :label="2">单选框文本在左侧</nut-radio>
-      </nut-radiogroup>
-      <span>{{ radioVal2 }}</span>
-    </div>
-    <h4>Radio单选框禁用</h4>
-    <div class="show-demo">
-      <nut-radiogroup v-model="radioVal3">
-        <nut-radio :label="1" disabled>禁用单选框</nut-radio>
-        <nut-radio :label="2" disabled>禁用单选框</nut-radio>
-      </nut-radiogroup>
-    </div>
-    <h4>Radio自定义尺寸</h4>
-    <div class="show-demo">
-      <nut-radiogroup v-model="radioVal4">
-        <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>
-        <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>
-      </nut-radiogroup>
-    </div>
-    <h4>Radio自定义图标</h4>
-    <div class="show-demo">
-      <nut-radiogroup v-model="radioVal5">
-        <nut-radio :label="1" icon-name="checklist" icon-active-name="checklist"
-          >自定义图标</nut-radio
+  <div class="demo">
+    <nut-cell-group title="基本用法-左右侧">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal" @change="handleChange1">
+          <nut-radio :label="1">单选框1</nut-radio>
+          <nut-radio :label="2">单选框2</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+      <nut-cell>
+        <nut-radiogroup
+          v-model="radioVal"
+          text-position="left"
+          @change="handleChange1"
         >
-        <nut-radio :label="2" icon-name="checklist" icon-active-name="checklist"
-          >自定义图标</nut-radio
-        >
-      </nut-radiogroup>
-    </div>
-    <h4>Radio触发change事件</h4>
-    <div class="show-demo">
-      <nut-radiogroup v-model="radioVal6" @change="handleChange3">
-        <nut-radio :label="1">触发事件</nut-radio>
-        <nut-radio :label="2">触发事件</nut-radio>
-      </nut-radiogroup>
-      <span>{{ radioVal6 }}</span>
-    </div>
+          <nut-radio :label="1">单选框1</nut-radio>
+          <nut-radio :label="2">单选框2</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+      <nut-cell title="当前选中值" :desc="radioVal" />
+    </nut-cell-group>
+
+    <nut-cell-group title="单选框禁用">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal3">
+          <nut-radio :label="1" disabled>禁用单选框</nut-radio>
+          <nut-radio :label="2" disabled>禁用单选框</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="自定义尺寸">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal4">
+          <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="Radio自定义图标">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal5">
+          <nut-radio
+            :label="1"
+            icon-name="checklist"
+            icon-active-name="checklist"
+            >自定义图标</nut-radio
+          >
+          <nut-radio
+            :label="2"
+            icon-name="checklist"
+            icon-active-name="checklist"
+            >自定义图标</nut-radio
+          >
+        </nut-radiogroup>
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="触发事件">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal6" @change="handleChange3">
+          <nut-radio :label="1">触发事件</nut-radio>
+          <nut-radio :label="2">触发事件</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+      <nut-cell title="当前选中值" :desc="radioVal6" />
+    </nut-cell-group>
   </div>
 </template>
 
@@ -90,29 +101,4 @@ export default createDemo({
 });
 </script>
 
-<style lang="scss" scoped>
-.demo-list {
-  margin: 57px 0 60px 0;
-  padding: 0 17px 17px;
-  h4 {
-    margin: 25px 0 10px;
-    line-height: 20px;
-    color: #909ca4;
-    font-size: 14px;
-  }
-  .show-demo {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 10px;
-    padding: 15px;
-    background-color: #ffffff;
-    border-radius: 7px;
-    box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-    ::v-deep(.nut-radio) {
-      height: 25px;
-      line-height: 25px;
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>