Feat/demo (#34)

* feat(demo): adjust avatar、icon、mask、popup、modal、dialog demo

* feat(demo): adjust badge、steps、loading、terms demo

* feat(demo): adjust noticebar、popover demo

* feat(demo): adjust collapse、list、result demo

* feat(demo): adjust tips、searchbar、tag demo

* feat(demo): adjust tabs、button  demo

* feat(demo): 调整表单系列demo

* chore(*): merge master

* feat(docs): adjust docs style

* feat(demo): adjust SwipeActionRef demo

Co-authored-by: wyj <wb-wyj631405@antfin.com>

.prettierrc

@@ -11,5 +11,6 @@
         "bracketSpacing":true
       }
     }
-  ]
+  ],
+  "singleQuote": true
 }

config/config.ts

@@ -55,6 +55,46 @@ export default {
   #root .__dumi-default-device[data-device-type="iOS"] {
     display: none;
   }
+  #root .__dumi-default-menu-inner ul li ul {
+    padding-left: 0;
+  }
+  #root .__dumi-default-menu-inner > ul ul a.active {
+    background-color: #EDF3FF;
+    color: #1677ff;
+  }
+  #root .__dumi-default-menu-inner ul li.active a::before,  #root  .__dumi-default-menu-inner ul li a.active::before{
+    display: none;
+  }
+  #root .__dumi-default-menu-inner ul li.active a::after,  #root  .__dumi-default-menu-inner ul li a.active::after{
+    position: absolute;
+    content:'';
+    right: 1px;
+    top: 0;
+    height: 100%;
+    width: 2px;
+    background: #1677FF;
+  }
+  #root .__dumi-default-navbar nav > span > a:hover,#root  .__dumi-default-navbar nav > span > a.active {
+    color: #1677ff;
+  }
+  #root .__dumi-default-navbar nav > span > a.active::after {
+    background: #1677FF;
+  }
+  @media only screen and (min-width: 768px) {
+    #root .__dumi-default-menu[data-mode='site'] {
+      width: 240px;
+    }
+    #root .__dumi-default-menu[data-mode='site'] .__dumi-default-menu-list > li > a ~ ul {
+      margin-left: 0;
+    }
+    #root .__dumi-default-menu[data-mode='site'] .__dumi-default-menu-list > li > a {
+      padding-left: 40px;
+    }
+    #root .__dumi-default-menu-inner > ul ul a {
+      padding-left: 40px;
+    }
+  }
+  @media only screen and (min-width: 768px)
   `],
   navs: {
     zh: [

demo/app.json

@@ -1,10 +1,11 @@
 {
   "pages": [
     "pages/index/index",
-    "pages/FormAFor/index",
-    "pages/FormInsMethod/index",
-    "pages/FormAIf/index",
+    "pages/Form/index",
     "pages/FormBasic/index",
+    "pages/FormDynamic/index",
+    "pages/FormGroup/index",
+    "pages/FormInsMethod/index",
     "pages/List/index",
     "pages/Icon/index",
     "pages/Switch/index",
@@ -32,22 +33,18 @@
     "pages/Popup/index",
     "pages/Result/index",
     "pages/Collapse/index",
-    "pages/CollapseAccordion/index",
+    "pages/CollapseCustom/index",
     "pages/Tag/index",
     "pages/Tips/index",
     "pages/Mask/index",
     "pages/Avatar/index",
-    "pages/AvatarDesc/index",
     "pages/Loading/index",
     "pages/Checkbox/index",
-    "pages/CheckboxControlled/index",
     "pages/CheckboxGroup/index",
     "pages/RadioGroup/index",
     "pages/Selector/index",
-    "pages/Form/index",
     "pages/SafeArea/index",
     "pages/Dialog/index",
-    "pages/FormValidate/index",
     "pages/Container/index"
   ],
   "window": {

demo/app.less

@@ -0,0 +1,10 @@
+page {
+  background-color: #f5f5f5;
+}
+.btn-list {
+  display: flex;
+  flex-direction: column;
+  .amd-button {
+    margin-bottom: 16rpx;
+  }
+}

demo/components/DemoBlock/index.axml

@@ -0,0 +1,8 @@
+<view class="demo-block {{className}}">
+  <view class="demo-block-title">
+    {{title}}
+  </view>
+  <view class="demo-block-content" style="padding:{{padding}};background:{{background}};">
+    <slot/>
+  </view>
+</view>

demo/components/DemoBlock/index.js

@@ -0,0 +1,8 @@
+Component({
+  props: {
+    padding: '24rpx',
+    background: '#fff',
+    className: '',
+    title: '',
+  },
+});

demo/components/DemoBlock/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

demo/components/DemoBlock/index.less

@@ -0,0 +1,7 @@
+.demo-block {
+  &-title {
+    padding: 24rpx 16rpx 12rpx;
+    color: #969696;
+    font-size: 28rpx;
+  }
+}

demo/pages/Avatar/index.axml

@@ -1,21 +1,27 @@
-<white-space />
-<container title="四种尺寸">
-  <view class="demo-avatar-size">
-    <view class="demo-avatar-size-container">
-      <avatar size="large" />
-      <text>large</text>
+<view class="demo">
+  <demo-block title="基础用法-四种尺寸">
+    <view class="demo-list">
+      <view class="list-item" a:for="{{basicList}}">
+        <avatar size="{{item.size}}" src="{{item.src}}" />
+        <view class="size-text">
+          {{item.size}}
+        </view>
+      </view>
     </view>
-    <view class="demo-avatar-size-container">
-      <avatar />
-      <text>默认值：medium</text>
-    </view>
-    <view class="demo-avatar-size-container">
-      <avatar size="small" />
-      <text>small</text>
-    </view>
-    <view class="demo-avatar-size-container">
-      <avatar size="x-small" />
-      <text>x-small</text>
-    </view>
-  </view>
-</container>
+  </demo-block>
+  <demo-block title="默认图，不传src时默认展示灰色的内置图片">
+    <avatar/>
+  </demo-block>
+  <demo-block title="带有name和desc">
+    <avatar name="用户名 x-small，desc不显示" desc="摘要信息" size="x-small" src="{{basicList[0].src}}" />
+    <white-space />
+    <avatar name="用户名 small" desc="摘要信息" size="small" src="{{basicList[1].src}}" />
+    <white-space />
+    <avatar name="用户名 medium" desc="摘要信息" size="medium" src="{{basicList[2].src}}" />
+    <white-space />
+    <avatar name="用户名 large" desc="摘要信息" size="large" src="{{basicList[3].src}}" />
+  </demo-block>
+  <demo-block title="仅有 desc 时，name不显示">
+    <avatar desc="摘要信息" src="{{basicList[0].src}}" />
+  </demo-block>
+</view>

demo/pages/Avatar/index.js

@@ -1 +1,15 @@
-Page({});
+const demoAvatarImages = [
+  "https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
+  "https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9",
+  "https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
+  "https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
+];
+const sizes = ["large", "medium", "small", "x-small"];
+Page({
+  data: {
+    basicList: demoAvatarImages.map((v, i) => ({
+      src: v,
+      size: sizes[i],
+    })),
+  },
+});

demo/pages/Avatar/index.json

@@ -3,6 +3,6 @@
   "usingComponents": {
     "avatar": "../../../src/Avatar/index",
     "white-space": "../../components/WhiteSpace/index",
-    "container": "../../../src/Container/index"
+    "demo-block": "../../components/DemoBlock/index"
   }
 }

demo/pages/Avatar/index.less

@@ -0,0 +1,11 @@
+.demo-list {
+  display: flex;
+  align-items: flex-end;
+}
+.list-item {
+  margin-right: 24rpx;
+  text-align: left;
+  .size-text {
+    padding-top: 12rpx;
+  }
+}