chore(*): first commit

2024-10-23 08:44:21 +08:00 · 2022-02-21 13:10:46 +08:00 · 2022-02-21 13:10:46 +08:00 · 35af33bbba
commit 35af33bbba
616 changed files with 24406 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,8 @@
+es/**
+demo/es/**
+plugin/**
+src/.umi/**
+src/.umi-production/**
+dist/**
+docs-dist/**
+node_modules
--- a/.eslintrc
+++ b/.eslintrc
@ -0,0 +1,25 @@
+{
+  "env": {
+    "node": true
+  },
+    "globals": {
+      "my": true,
+      "App": true,
+      "Component": true,
+      "Page": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "rules": {
+      "no-console": "warn",
+      "@typescript-eslint/no-var-requires": "warn",
+      "@typescript-eslint/no-empty-function": "warn"
+    }
+  }
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,47 @@
+---
+name: Bug Report
+about: Bug Report
+---
+
+<!--
+在提交 bug 之前，请参考以下问题排查方式，或许对你会有所帮助：
+👉 查看你的 package.json 中是否使用最新版本的 antd-mini，且已正确安装；
+👉 根据小程序开发者工具 https://opendocs.alipay.com/mini/ide 的报错提示排查；
+👉 详细阅读过组件库文档；
+👉 是否遇到自定义组件常见问题 https://opendocs.alipay.com/mini/framework/auge4r 中所提到的问题；
+-->
+
+## 组件
+<!-- 产生 BUG 的组件 -->
+
+## 基础库版本
+
+<!-- 可以通过 my.SDKVersion 获取基础库版本 -->
+
+- [ ] 1.x
+- [ ] 2.x
+
+## 设备机型
+
+## 手机系统
+
+- [ ] iOS
+- [ ] Android
+- [ ] HarmonyOS
+
+## APP 
+<!-- 默认为支付宝，如果非支付宝小程序，请填写运行该小程序的 APP -->
+
+## 组件库版本 
+<!-- 产生 BUG 的组件库版本 -->
+
+## 预期行为 
+<!-- 组件正常情况下的行为描述 -->
+
+## 复现步骤 
+<!-- 请提供复现方法，条件运行情况下请提供最小化 demo 示例 -->
+1. 
+2. 
+
+## 复现 demo
+<!-- 请上传最小复现 demo -->
--- a/.github/ISSUE_TEMPLATE/feature_request_template.md
+++ b/.github/ISSUE_TEMPLATE/feature_request_template.md
@ -0,0 +1,17 @@
+---
+name: 功能优化需求
+about: 期望组件增强的功能需求
+labels: enhancement
+
+---
+
+## 背景
+<!-- 请描述你所遇到的问题现状 --> 
+
+
+## 期望
+<!-- 请描述你所希望添加的功能 --> 
+
+
+## 思路
+<!-- 对于你所描述的问题，是否已有解决方案或者思路，如有可提供作为参考，或者提交你的 PR 、截图 --> 
--- a/.github/contributing.md
+++ b/.github/contributing.md
@ -0,0 +1,32 @@
+---
+toc: false
+---
+
+## 参与 antd-mini 建设
+
+antd-mini 的发展离不开社区的每一位用户，这里有一些信息可以帮助你参与共建。
+
+### 项目运作流程
+
+### issue
+
+如果你有组件库的相关使用问题或需求，可以前往 issue 区域搜索或者提问。我们提供了多种 issue 模板，请根据需要选择对应模板。同时，也非常欢迎你为其他同学解惑。
+
+#### feature request
+
+如果现有的组件不能满足你的开发需求，请提交 issue 来描述你的需求。当然，并不是每一个 FR 都会实现。因为 antd-mini 的定位是一个基础组件库，而非业务组件库。我们会讨论每一个 FR，确认是一个基础组件需求后，我们就会进入开发流程。
+
+#### bug
+
+提交 issue 时，请尽可能多地提供 bug 相关信息，以帮助我们更快地复现并解决。
+
+下面是一些注意事项：
+
+- 设备信息、客户端版本、组件库版本、组件等
+- 你期望的组件行为是什么，实际上组件的行为是什么
+- 详细描述复习步骤
+- 尽可能提供能够复现 demo 以方便我们快速定位问题
+
+### 贡献代码
+
+非常欢迎各位为 antd-mini 贡献代码，这里有一份[贡献指南](https://github.com/ant-design/ant-design-mini/blob/main/docs/guide/contribute.md)。在贡献代码之前，请提交 RFC issue 并详细描述你的改动，以便我们能够在 RFC 中充分讨论，节省双方的时间。
--- a/.github/pull_requeset_template.md
+++ b/.github/pull_requeset_template.md
@ -0,0 +1,37 @@
+---
+name: Pull Request
+about: Pull Request
+---
+
+## 概要
+
+<!-- 告诉 CR 者为什么要改？（如：Issue 地址、需求概述、需求链接） -->
+<!-- 如果改动过于复杂，需要贴出改动的思路 -->
+
+## 变更范围
+
+- [ ] demo/**
+- [ ] src/**
+
+## 变更类型
+
+- [ ] Bug
+- [ ] Docs
+- [ ] Feature
+- [ ] Performance
+- [ ] Refactor
+- [ ] 其他: 请补充
+
+## 自查清单
+
+- [ ]  更新/添加 相关文档
+- [ ]  更新/添加 demo 以展示新特性
+
+
+## 改动前 / 后 (可选)
+
+<!-- 如果可以通过「日志」或「snapshot」表达前后变化的，请补充 -->
+
+- 改动前：
+
+- 改动后：
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@ -0,0 +1,28 @@
+name: pull_request ci
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - name: build
+        run: |
+          npm i
+          npm run build
+
+      - name: Save PR number
+        if: ${{ always() }}
+        run: echo ${{ github.event.number }} > ./pr-id.txt
+
+      - name: Upload PR number
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: pr
+          path: ./pr-id.txt
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/es
+/docs-dist
+/dist
+/demo/es
+
+# misc
+.DS_Store
+/coverage
+
+# umi
+.umi
+.umi-production
+.umi-test
+.env.local
+
+# ide
+/.vscode
+/.idea
+
+# other
+/.mini-ide
--- a/.minidev/config.json
+++ b/.minidev/config.json
@ -0,0 +1 @@
+{ "plugins": ["./scripts/umi.js"] }
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,7 @@
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,15 @@
+{
+  "overrides": [
+    {
+      "files": "*.axml",
+      "options": {
+        "parser": "html",
+        "printWidth": 40,
+        "tabWidth": 2,
+        "useTabs":true,
+        "bracketSameLine":true,
+        "bracketSpacing":true
+      }
+    }
+  ]
+}
--- a/.stylelintrc
+++ b/.stylelintrc
@ -0,0 +1,35 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    at-rule-empty-line-before: null,
+    at-rule-name-space-after: null,
+    at-rule-no-unknown: null,
+    comment-empty-line-before: null,
+    declaration-bang-space-before: null,
+    declaration-empty-line-before: null,
+    function-comma-newline-after: null,
+    function-name-case: null,
+    function-parentheses-newline-inside: null,
+    function-max-empty-lines: null,
+    function-whitespace-after: null,
+    indentation: null,
+    number-leading-zero: null,
+    number-no-trailing-zeros: null,
+    rule-empty-line-before: null,
+    selector-combinator-space-after: null,
+    selector-list-comma-newline-after: null,
+    selector-pseudo-element-colon-notation: null,
+    unit-no-unknown: null,
+    value-list-max-empty-lines: null,
+    unit-case: null,
+    color-hex-case: null,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignoreTypes": [
+          "page"
+        ]
+      }
+    ],
+  }
+}
--- a/CONTRIBUTE.md
+++ b/CONTRIBUTE.md
@ -0,0 +1,66 @@
+### 代码克隆
+
+``` bash
+git clone git@github.com:ant-design/ant-design-mini.git
+```
+
+### 目录结构
+
+首先，初步了解目录结构的组成
+
+``` bash
+├── CHANGELOG.md          # 更新日志
+├── demo                  # 示例小程序
+│   ├── app.acss
+│   ├── app.js
+│   ├── app.json
+│   ├── mini.project.json
+│   ├── package.json
+│   └── pages
+│       ├── Avatar
+│       ├── Badge
+│       └── ...
+├── src                    # 组件源码
+│   ├── Avatar
+│   │   ├── index.axml     # 组件 axml 文件
+│   │   ├── index.json     # 组件 json 文件
+│   │   ├── index.less     # 组件 less 文件
+│   │   ├── index.ts       # 组件 ts 文件
+│   │   └── index.md       # 组件文档
+│   ├── Badge
+│   │   └── ...
+│   └── ...
+└── tsconfig.json
+```
+
+### 投入开发
+
+*** Tip：请遵循 git flow，正式开发时，新建 feat/xxx 或 fix/xxx 分支进行开发。 ***
+
+``` bash
+// 安装依赖
+npm i
+
+// 开发环境
+npm run dev
+```
+
+### 效果预览
+
+1. antd-mini 组件使用 [minidev](https://www.npmjs.com/package/minidev/v/0.0.7) 开发，可以通过编写、预览 demo 小程序来验证 src 目录下组件源码是否符合预期；
+
+2. antd-mini 文档使用 [umi](https://umijs.org/zh-CN) 开发，可在代码开发的同时修改文档，并嵌入编写的 demo；
+
+
+### Commit 规范
+
+开发过程中，提交 commit 时，需要遵循以下原则：
+
+1. 最小化代码变更：保证每个 commit 的逻辑独立、原子化。一个 commit 只做一件事，哪怕这件事只改了 1 行代码，你也应该独立 commit 这次变更；
+
+2. 遵循 Conventional Commits 原则：避免没有意义、看不懂的 Commit Message 引入，一般情况下，你会大量的使用到：
+  a. 使用 feat(scope): xxx 来描述一个 feature 的 commit；
+  b. 使用 fix(scope): xxx 来描述一个 bug fixes 的 commit；
+  c. 使用 chore(scope): xxx 来来描述一个无关 feature 和 bug fixes 的小调整；
+
+3. issue：如果改动与 issue 相关，请在 Commit Message 中带上 issue 参数，如：fix(scope): [#1] xxxxxx；
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ant Design Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,24 @@
+<img src="https://gw.alipayobjects.com/zos/bmw-prod/0350261f-bac2-443d-9580-d25f3365a26e.svg" alt="logo" width="100%" />
+
+![npm (tag)](https://img.shields.io/npm/v/antd-mini)
+&nbsp;
+![npm](https://img.shields.io/npm/dw/antd-mini)
+&nbsp;
+![GitHub](https://img.shields.io/github/license/ant-design/ant-design-mini)
+
+```bash
+$ npm i antd-mini@beta -S
+```
+
+antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。你可以扫描下方的支付宝二维码体验，或者访问[官网](https://mini.ant.design/)以获取更多信息。
+
+<img src="https://gw.alipayobjects.com/mdn/rms_e06820/afts/img/A*yZMrRL9tyVQAAAAAAAAAAAAAARQnAQ" alt="logo" width="220" />
+
+目前还在不断完善和打磨中，如果你想在生产环境接入使用，请**务必仔细阅读[常见问题和解答](/docs/guide/faq.md)**。
+
+
+如果你发现了 bug 或者是希望 antd-mini 增加一些特性，可以[提交 issue](https://github.com/ant-design/ant-design-mini/issues)。也欢迎参与共建，这里有一份[贡献指南](https://github.com/ant-design/ant-design-mini/blob/main/docs/guide/contribute.md)。
+
+如果你想深入参与讨论，可以加入我们的社区钉钉群：35097715
+
+<img src="https://gw.alipayobjects.com/mdn/rms_e06820/afts/img/A*YzmtQ7jTWtAAAAAAAAAAAAAAARQnAQ" width="260" alt="dingding" />
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,16 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        loose: true,
+        modules: false,
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-transform-runtime',
+  ],
+};
--- a/config/config.ts
+++ b/config/config.ts
@ -0,0 +1,64 @@
+export default {
+  title:" ",
+  favicon: 'https://gw.alipayobjects.com/zos/bmw-prod/35bd3910-2382-4f5d-903f-ac4c31b76199.svg',
+  logo: 'https://gw.alipayobjects.com/zos/bmw-prod/d1971355-ffff-44ef-9e20-1bc9a237d463.svg',
+  outputPath: 'docs-dist',
+  locales: [['zh', '中文']],
+  mode: 'site',
+  hash: true,
+  plugins: ['./plugin/index.ts'],
+  headScripts: [{ src: 'https://gw.alipayobjects.com/os/lib/ali/mini-simulator/9.1.5/dist/index.js' }],
+  styles:[`
+  #root .__dumi-default-navbar {
+    padding-left: 32px;
+  }
+  #root .__dumi-default-navbar-logo{
+    padding-left: 200px;
+  }
+  #root .__dumi-default-navbar{
+    box-shadow: none;
+    border-bottom: 1px solid #ebedf1;
+  }
+  `],
+  navs: {
+    zh: [
+      {
+        title: '指南',
+        path: '/guide',
+      },
+      {
+        title: '组件',
+        path: '/components',
+      },
+      {
+        title: '仓库地址',
+        path: 'https://github.com/ant-design/ant-design-mini',
+      }],
+  },
+  menus: {
+    '/': [
+      {
+        title: 'Home',
+        path: 'index',
+      },
+    ],
+    '/guide': [
+      {
+        title: '快速开始',
+        path: '/guide/quick-start',
+      },
+      {
+        title: '项目共建',
+        path: '/guide/cooperation',
+      },
+      {
+        title: '贡献指南',
+        path: '/guide/contribute',
+      },
+      {
+        title: '常见问题',
+        path: '/guide/faq',
+      },
+    ],
+  },
+};
--- a/demo/app.acss
+++ b/demo/app.acss
@ -0,0 +1,3 @@
+page {
+  background-color: #f5f5f5;
+}
--- a/demo/app.js
+++ b/demo/app.js
@ -0,0 +1,2 @@
+App({
+});
--- a/demo/app.json
+++ b/demo/app.json
@ -0,0 +1,61 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/FormAFor/index",
+    "pages/FormInsMethod/index",
+    "pages/FormAIf/index",
+    "pages/FormBasic/index",
+    "pages/List/index",
+    "pages/Icon/index",
+    "pages/Switch/index",
+    "pages/Picker/index",
+    "pages/InputItem/index",
+    "pages/Badge/index",
+    "pages/Button/index",
+    "pages/ButtonInline/index",
+    "pages/ButtonIcon/index",
+    "pages/ButtonAddon/index",
+    "pages/Modal/index",
+    "pages/SwipeAction/index",
+    "pages/Tabs/index",
+    "pages/VTabs/index",
+    "pages/Stepper/index",
+    "pages/Steps/index",
+    "pages/Terms/index",
+    "pages/Popover/index",
+    "pages/PopoverBase/index",
+    "pages/PopoverMask/index",
+    "pages/NoticeBar/index",
+    "pages/Filter/index",
+    "pages/SearchBar/index",
+    "pages/Popup/index",
+    "pages/Result/index",
+    "pages/Collapse/index",
+    "pages/CollapseAccordion/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"
+  ],
+  "window": {
+    "enableWK": "YES",
+    "enableDSL": "YES",
+    "enableJSC": "YES",
+    "defaultTitle": "小程序版 antd-mini 库",
+    "backgroundColor": "#F5F5F9",
+    "pullRefresh": false,
+    "allowsBounceVertical": true
+  },
+  "debug": true
+}
--- a/demo/components/WhiteSpace/index.acss
+++ b/demo/components/WhiteSpace/index.acss
@ -0,0 +1,3 @@
+.amd-whitespace {
+    height: 10px;
+}
--- a/demo/components/WhiteSpace/index.axml
+++ b/demo/components/WhiteSpace/index.axml
@ -0,0 +1 @@
+<view class="amd-whitespace"></view>
--- a/demo/components/WhiteSpace/index.js
+++ b/demo/components/WhiteSpace/index.js
@ -0,0 +1 @@
+Component({})
--- a/demo/components/WhiteSpace/index.json
+++ b/demo/components/WhiteSpace/index.json
@ -0,0 +1,3 @@
+{
+    "component": true
+}
--- a/demo/components/test/index.acss
+++ b/demo/components/test/index.acss
--- a/demo/components/test/index.axml
+++ b/demo/components/test/index.axml
@ -0,0 +1,3 @@
+<view>
+<input></input>
+</view>
--- a/demo/components/test/index.js
+++ b/demo/components/test/index.js
@ -0,0 +1,5 @@
+import form from '../../../src/mixins/form';
+
+Component({
+  mixins: [form()],
+});
--- a/demo/components/test/index.json
+++ b/demo/components/test/index.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "input": "../../../src/InputItem/index"
+  }
+}
--- a/demo/mini.project.json
+++ b/demo/mini.project.json
@ -0,0 +1,8 @@
+{
+  "component2": true,
+  "axmlStrictCheck": false,
+  "enableAppxNg": true,
+  "exclude": [
+    "miniapptools_dist/**/*"
+  ]
+}
--- a/demo/package.json
+++ b/demo/package.json
@ -0,0 +1,12 @@
+{
+  "name": "antd-mini-demo",
+  "version": "0.0.1",
+  "dependencies": {
+    "antd-mini": "latest"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "main": "app.js",
+  "description": "antd-mini 组件库示例"
+}
--- a/demo/pages/Avatar/index.acss
+++ b/demo/pages/Avatar/index.acss
@ -0,0 +1,21 @@
+.demo-avatar-size {
+  display: flex;
+  justify-content: space-between;
+  padding: 24rpx;
+}
+
+.demo-avatar-size-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.demo-avatar-size-container text {
+  padding-top: 16rpx;
+  font-size: 26rpx;
+}
+
+.demo-avatar-content {
+  padding: 24rpx;
+}
--- a/demo/pages/Avatar/index.axml
+++ b/demo/pages/Avatar/index.axml
@ -0,0 +1,21 @@
+<white-space />
+<container title="四种尺寸">
+  <view class="demo-avatar-size">
+    <view class="demo-avatar-size-container">
+      <avatar size="large" />
+      <text>large</text>
+    </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>
--- a/demo/pages/Avatar/index.js
+++ b/demo/pages/Avatar/index.js
@ -0,0 +1 @@
+Page({});
--- a/demo/pages/Avatar/index.json
+++ b/demo/pages/Avatar/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Avatar",
+  "usingComponents": {
+    "avatar": "../../../src/Avatar/index",
+    "white-space": "../../components/WhiteSpace/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/demo/pages/AvatarDesc/index.acss
+++ b/demo/pages/AvatarDesc/index.acss
@ -0,0 +1,3 @@
+.demo-avatar-content {
+  padding: 24rpx;
+}
--- a/demo/pages/AvatarDesc/index.axml
+++ b/demo/pages/AvatarDesc/index.axml
@ -0,0 +1,20 @@
+<white-space />
+<container title="带有 name 和 desc">
+  <view class="demo-avatar-content">
+    <avatar mode="widthFix" name="用户名 x-small" desc="摘要信息" size="x-small" />
+    <white-space />
+    <avatar name="用户名 small" desc="摘要信息" size="small" />
+    <white-space />
+    <avatar name="用户名 medium" desc="摘要信息" size="medium" />
+    <white-space />
+    <avatar name="用户名 large" desc="摘要信息" size="large" />
+  </view>
+</container>
+
+<white-space />
+
+<container title="仅有 desc 时，不显示">
+  <view class="demo-avatar-content">
+    <avatar desc="摘要信息" size="large" />
+  </view>
+</container>
--- a/demo/pages/AvatarDesc/index.js
+++ b/demo/pages/AvatarDesc/index.js
@ -0,0 +1 @@
+Page({});
--- a/demo/pages/AvatarDesc/index.json
+++ b/demo/pages/AvatarDesc/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Avatar",
+  "usingComponents": {
+    "avatar": "../../../src/Avatar/index",
+    "white-space": "../../components/WhiteSpace/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/demo/pages/Badge/index.acss
+++ b/demo/pages/Badge/index.acss
@ -0,0 +1,39 @@
+.list-like {
+  display: flex;
+  background: #fff;
+  padding: 12px;
+  justify-content: space-between;
+}
+
+.list-like-black{
+  display: flex;
+  background: #000;
+  padding: 12px;
+  justify-content: space-between;
+}
+
+.inner {
+  height: 24px;
+  width: 44px;
+  background-color: #ddd;
+}
+
+.intro {
+  margin-left: 12px;
+}
+
+.container {
+  padding: 10px;
+  background-color: #333;
+  color: #f8f8f8;
+  font-size: 20px;
+}
+
+.content {
+  background-color: #333;
+  color: #333;
+}
+
+.title{
+  padding: 24rpx
+}
--- a/demo/pages/Badge/index.axml
+++ b/demo/pages/Badge/index.axml
@ -0,0 +1,31 @@
+<view 
+  a:for="{{items}}"
+  class="list-like" 
+  index="{{index}}" >
+  <badge 
+    type="{{item.type}}" 
+    text="{{item.text}}"
+    iconType="{{item.iconType}}"
+    position="{{item.position}}">
+      <view class="inner"/>
+  </badge>
+  <text class="intro">{{item.info}}</text>
+</view>
+
+<view class="title">
+ 带有描边，stroke: true
+</view>
+<view 
+  a:for="{{items}}"
+  class="list-like-black" 
+  index="{{index}}" >
+  <badge 
+    type="{{item.type}}" 
+    text="{{item.text}}"
+    iconType="{{item.iconType}}"
+    position="{{item.position}}"
+    stroke="true">
+      <view class="inner"/>
+  </badge>
+  <text class="intro">{{item.info}}</text>
+</view>
--- a/demo/pages/Badge/index.js
+++ b/demo/pages/Badge/index.js
@ -0,0 +1,36 @@
+Page({
+  data: {
+    items: [
+      {
+        type: 'dot',
+        intro: 'Dot Badge',
+        position: 'top-right',
+      },
+      {
+        type: 'number',
+        text: 1,
+        position: 'top-right',
+        info: 'number',
+      },
+      {
+        type: 'number',
+        text: 100,
+        position: 'top-right',
+        info: 'number > 99',
+      },
+      {
+        type: 'text',
+        text: '优惠信息',
+        position: 'top-right',
+        info: 'text',
+      },
+      {
+        type: 'bubble',
+        text: '紧急',
+        iconType: 'DownOutline',
+        position: 'top-right',
+        info: '自定义图标',
+      },
+    ],
+  },
+});
--- a/demo/pages/Badge/index.json
+++ b/demo/pages/Badge/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Badge",
+  "usingComponents": {
+    "list-item": "../../../src/List/ListItem/index",
+    "badge": "../../../src/Badge/index"
+  }
+}
--- a/demo/pages/Button/index.acss
+++ b/demo/pages/Button/index.acss
@ -0,0 +1,17 @@
+.container {
+  padding: 20rpx;
+}
+
+.container button {
+  margin-bottom: 24rpx;
+}
+
+.changeItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.changeItem label {
+  margin-left: 8rpx;
+}
--- a/demo/pages/Button/index.axml
+++ b/demo/pages/Button/index.axml
@ -0,0 +1,45 @@
+<view class="container">
+
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    fill="{{fill}}"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+
+  <view class="changeItem">
+    <checkbox 
+      id="subText"
+      onChange='onShowSubText' />
+    <label for="subText">是否显示副标题</label>
+  </view>
+  
+  <view class="changeItem">
+    <checkbox 
+      id="disabled"
+      onChange='onDisableChange' />
+    <label for="disabled">是否禁用</label>
+  </view>
+  
+  <view class="changeItem">
+    <checkbox 
+      id="loading"
+      controlled="{{true}}" 
+      checked="{{loadingChangeValue}}" 
+      onChange='onLoadingChange'  />
+    <label for="loading">是否显示 loading</label>
+  </view>
+
+  <view class="changeItem">
+    <radio-group onChange="onFillChange">
+      <label a:for="{{fillList}}">
+        <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.label}}
+      </label>
+    </radio-group> 
+  </view>
+</view>
--- a/demo/pages/Button/index.js
+++ b/demo/pages/Button/index.js
@ -0,0 +1,50 @@
+Page({
+  data: {
+    list: [
+      { type: 'default' },
+      { type: 'primary' },
+      { type: 'warn' },
+      { type: 'danger' },
+      { type: 'success' },
+      { type: 'light' },
+    ],
+    fillList: [
+      { value: 'solid', label: 'solid', checked: true },
+      { value: 'outline', label: 'outline' },
+      { value: 'none', label: 'none' },
+    ],
+    fill: 'solid',
+    title: '按钮操作 Normal',
+    subText: '',
+    disabled: false,
+    showLoading: false,
+    icon: '',
+  },
+  onDisableChange(e) {
+    this.setData({
+      disabled: e,
+    });
+  },
+  onLoadingChange(e) {
+    this.setData({
+      showLoading: e,
+      loadingChangeValue: e,
+    });
+  },
+  onShowSubText(e) {
+    if (e) {
+      this.setData({
+        subText: '副标题',
+      });
+    } else {
+      this.setData({
+        subText: '',
+      });
+    }
+  },
+  onFillChange(e) {
+    this.setData({
+      fill: e.detail.value,
+    });
+  },
+});
--- a/demo/pages/Button/index.json
+++ b/demo/pages/Button/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Button",
+  "usingComponents": {
+    "button": "../../../src/Button/index",
+    "checkbox": "../../../src/Checkbox/index"
+  }
+}
--- a/demo/pages/ButtonAddon/index.acss
+++ b/demo/pages/ButtonAddon/index.acss
@ -0,0 +1,31 @@
+.container-1,
+.container-2 {
+  display: flex;
+  padding: 0 12px;
+  margin: 12px 0;
+}
+
+.container-3,
+.container-4 {
+  padding: 0 12px;
+  margin: 12px 0;
+}
+
+
+.container-1 .amd-button:first-child,
+.container-2 .amd-button:first-child,
+.container-3 .amd-button:first-child,
+.container-4 .amd-button:first-child {
+  margin-right: 6px;
+}
+
+.container-1 .amd-button:last-child,
+.container-2 .amd-button:last-child,
+.container-3 .amd-button:last-child,
+.container-4 .amd-button:last-child {
+  margin-right: 6px;
+}
+
+.amd-button {
+  flex: 1;
+}
--- a/demo/pages/ButtonAddon/index.axml
+++ b/demo/pages/ButtonAddon/index.axml
@ -0,0 +1,19 @@
+<view class="container-1">
+  <button type="default" fill="solid">辅助操作</button>
+  <button type="primary" fill="solid">主要操作</button>
+</view>
+
+<view class="container-2">
+  <button type="default" fill="solid">辅助操作</button>
+  <button type="primary" fill="outline">主要操作</button>
+</view>
+
+<view class="container-3">
+  <button type="default" inline="{{true}}">辅助操作</button>
+  <button type="primary" inline="{{true}}">主要操作</button>
+</view>
+
+<view class="container-4">
+  <button type="default" fill="solid" inline="{{true}}">辅助操作</button>
+  <button type="primary" fill="outline" inline="{{true}}">主要操作</button>
+</view>
--- a/demo/pages/ButtonAddon/index.js
+++ b/demo/pages/ButtonAddon/index.js
@ -0,0 +1,3 @@
+Page({
+});
+
--- a/demo/pages/ButtonAddon/index.json
+++ b/demo/pages/ButtonAddon/index.json
@ -0,0 +1,8 @@
+{
+    "defaultTitle": "Button",
+    "usingComponents": {
+      "button": "../../../src/Button/index",
+      "checkbox": "../../../src/Checkbox/index"
+    }
+  }
+  
--- a/demo/pages/ButtonIcon/index.acss
+++ b/demo/pages/ButtonIcon/index.acss
@ -0,0 +1,8 @@
+.amd-button{
+  margin: 20px 5px;
+}
+
+.button-icon {
+  font-size: 20px;
+  color: inherit;
+}
--- a/demo/pages/ButtonIcon/index.axml
+++ b/demo/pages/ButtonIcon/index.axml
@ -0,0 +1,20 @@
+  <button 
+    type="primary" 
+    icon="AppOutline"
+    onTap="onTap" >
+    Icon
+  </button>
+
+  <button 
+    type="primary" 
+    icon="{{url}}"
+    onTap="onTap" >
+    Icon
+  </button>
+
+  <button 
+    type="primary" 
+    onTap="onTap" >
+    <view class="button-icon" slot="icon">※</view>
+  </button>
+  
--- a/demo/pages/ButtonIcon/index.js
+++ b/demo/pages/ButtonIcon/index.js
@ -0,0 +1,10 @@
+Page({
+  data: {
+    url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
+  },
+  onTap() {
+    my.alert({
+      title: 'tap',
+    });
+  },
+});
--- a/demo/pages/ButtonIcon/index.json
+++ b/demo/pages/ButtonIcon/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Button",
+  "usingComponents": {
+    "button": "../../../src/Button/index",
+    "checkbox": "../../../src/Checkbox/index"
+  }
+}
--- a/demo/pages/ButtonInline/index.acss
+++ b/demo/pages/ButtonInline/index.acss
@ -0,0 +1,18 @@
+.container {
+  padding: 20rpx;
+}
+
+.container button {
+  margin-bottom: 24rpx;
+  margin-right: 10rpx;
+}
+
+.changeItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.changeItem label {
+  margin-left: 8rpx;
+}
--- a/demo/pages/ButtonInline/index.axml
+++ b/demo/pages/ButtonInline/index.axml
@ -0,0 +1,102 @@
+<view class="container">
+  <view class="inline-size">inlineSize: x-small</view>
+  <view class="container-small">
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    inline="{{true}}"
+    inlineSize="x-small"
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+
+  <view class="inline-size">inlineSize: small</view>
+  <view class="container-small">
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    inline="{{true}}"
+    inlineSize="small"
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+  <view>
+    <view class="inline-size">nlineSize: medium</view>
+  <view class="container-medium">
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    inline="{{true}}"
+    inlineSize="medium"
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+  </view>
+
+  </view>
+  <view class="inline-size">inlineSize: large</view>
+  <view class="container-large">
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    inline="{{true}}"
+    inlineSize="large"
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+  </view>
+
+  <view class="inline-size">inlineSize: x-large</view>
+  <view class="container-x-large">
+  <button 
+    a:for="{{list}}" 
+    type="{{item.type}}" 
+    inline="{{true}}"
+    inlineSize="x-large"
+    subText="{{subText}}" 
+    disabled="{{disabled}}" 
+    loading="{{showLoading}}" 
+    loadingText="正在加载"
+    onTap="onTap" >
+    {{item.type}}
+  </button>
+
+  <view class="changeItem">
+    <checkbox 
+      id="subText"
+      onChange='onShowSubText' />
+    <label for="subText">是否显示副标题</label>
+  </view>
+  
+  <view class="changeItem">
+    <checkbox 
+      id="disabled"
+      onChange='onDisableChange' />
+    <label for="disabled">是否禁用</label>
+  </view>
+  
+  <view class="changeItem">
+    <checkbox 
+      id="loading"
+      controlled="{{true}}" 
+      checked="{{loadingChangeValue}}" 
+      onChange='onLoadingChange'  />
+    <label for="loading">是否显示 loading</label>
+  </view>
+</view>
--- a/demo/pages/ButtonInline/index.js
+++ b/demo/pages/ButtonInline/index.js
@ -0,0 +1,38 @@
+Page({
+  data: {
+    list: [
+      { type: 'default' },
+      { type: 'primary' },
+      { type: 'warn' },
+      { type: 'danger' },
+      { type: 'success' },
+      { type: 'light' },
+    ],
+    title: '按钮操作 Normal',
+    subText: '',
+    disabled: false,
+    showLoading: false,
+  },
+  onDisableChange(e) {
+    this.setData({
+      disabled: e,
+    });
+  },
+  onLoadingChange(e) {
+    this.setData({
+      showLoading: e,
+      loadingChangeValue: e,
+    });
+  },
+  onShowSubText(e) {
+    if (e) {
+      this.setData({
+        subText: '副标题',
+      });
+    } else {
+      this.setData({
+        subText: '',
+      });
+    }
+  },
+});
--- a/demo/pages/ButtonInline/index.json
+++ b/demo/pages/ButtonInline/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Button",
+  "usingComponents": {
+    "button": "../../../src/Button/index",
+    "checkbox": "../../../src/Checkbox/index"
+  }
+}
--- a/demo/pages/Checkbox/index.acss
+++ b/demo/pages/Checkbox/index.acss
@ -0,0 +1,17 @@
+.demo {
+  padding-top: 24rpx;
+}
+
+.demoItem label {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.a-button{
+  margin:10px 10px
+}
+
+.options{
+  padding-left: 8px
+}
--- a/demo/pages/Checkbox/index.axml
+++ b/demo/pages/Checkbox/index.axml
@ -0,0 +1,30 @@
+<view class="demo">
+  <list radius="{{true}}">
+    <list-item className="demoItem">
+      <label>
+        <checkbox onChange="changeCheckBox" disabled="{{disabled}}"/>
+        <text class="options">复选项 1</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox onChange="changeCheckBox" disabled="{{disabled}}"/>
+        <text class="options">复选项 2</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox onChange="changeCheckBox" disabled="{{disabled}}"/>
+        <text class="options">复选项 3</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox onChange="changeCheckBox" disabled="{{disabled}}"/>
+        <text class="options">复选项 4</text>
+      </label>
+    </list-item>
+  </list>
+
+  <button onTap="onTap" type="primary">disabled: {{disabled}}</button>
+</view>
--- a/demo/pages/Checkbox/index.js
+++ b/demo/pages/Checkbox/index.js
@ -0,0 +1,16 @@
+Page({
+  data: {
+    disabled: false,
+  },
+  changeCheckBox(v) {
+    my.showToast({
+      content: `当前 checkbox 状态为： ${v}，${v ? '选中' : '未选中'} 状态。`,
+      duration: 1000,
+    });
+  },
+  onTap() {
+    this.setData({
+      disabled: !this.data.disabled,
+    });
+  },
+});
--- a/demo/pages/Checkbox/index.json
+++ b/demo/pages/Checkbox/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "CheckBox",
+  "usingComponents": {
+    "checkbox": "../../../src/Checkbox/index",
+    "list": "../../../src/List/index",
+    "list-item": "../../../src/List/ListItem/index"
+  }
+}
--- a/demo/pages/CheckboxControlled/index.acss
+++ b/demo/pages/CheckboxControlled/index.acss
@ -0,0 +1,17 @@
+.demo {
+  padding-top: 24rpx;
+}
+
+.demoItem label {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.demoItem text {
+  margin-left: 16rpx;
+}
+
+.a-button{
+  margin:10px 10px
+}
--- a/demo/pages/CheckboxControlled/index.axml
+++ b/demo/pages/CheckboxControlled/index.axml
@ -0,0 +1,45 @@
+<view class="demo">
+  <list radius="{{true}}">
+    <list-item className="demoItem">
+      <label>
+        <checkbox 
+          checked="{{checked1}}" 
+          controlled="{{true}}"
+          onChange="changeCheckBox"/>
+        <text>复选项 1</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox 
+          checked="{{checked2}}" 
+          controlled="{{true}}" 
+          onChange="changeCheckBox" />
+        <text>复选项 2</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox 
+          checked="{{checked3}}"
+          controlled="{{true}}" 
+          onChange="changeCheckBox" />
+        <text>复选项 3</text>
+      </label>
+    </list-item>
+    <list-item className="demoItem">
+      <label>
+        <checkbox 
+          checked="{{checked4}}" 
+          controlled="{{true}}"
+          onChange="changeCheckBox" />
+        <text>复选项 4</text>
+      </label>
+    </list-item>
+  </list>
+
+  <button onTap="onTap1" type="primary">复选项 1 checked: {{checked1}}</button>
+  <button onTap="onTap2" type="primary">复选项 2 checked: {{checked2}}</button>
+  <button onTap="onTap3" type="primary">复选项 3 checked: {{checked3}}</button>
+  <button onTap="onTap4" type="primary">复选项 4 checked: {{checked4}}</button>
+</view>
--- a/demo/pages/CheckboxControlled/index.js
+++ b/demo/pages/CheckboxControlled/index.js
@ -0,0 +1,34 @@
+Page({
+  data: {
+    checked1: false,
+    checked2: false,
+    checked3: false,
+    checked4: false,
+  },
+  changeCheckBox(v) {
+    my.showToast({
+      content: `当前 checkbox 状态为： ${v}，${v ? '选中' : '未选中'} 状态。`,
+      duration: 1000,
+    });
+  },
+  onTap1() {
+    this.setData({
+      checked1: !this.data.checked1,
+    });
+  },
+  onTap2() {
+    this.setData({
+      checked2: !this.data.checked2,
+    });
+  },
+  onTap3() {
+    this.setData({
+      checked3: !this.data.checked3,
+    });
+  },
+  onTap4() {
+    this.setData({
+      checked4: !this.data.checked4,
+    });
+  },
+});
--- a/demo/pages/CheckboxControlled/index.json
+++ b/demo/pages/CheckboxControlled/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "CheckBox",
+  "usingComponents": {
+    "checkbox": "../../../src/Checkbox/index",
+    "list": "../../../src/List/index",
+    "list-item": "../../../src/List/ListItem/index"
+  }
+}
--- a/demo/pages/CheckboxGroup/index.acss
+++ b/demo/pages/CheckboxGroup/index.acss
@ -0,0 +1,15 @@
+.btns {
+  display: flex;
+  padding: 0 24rpx 24rpx;
+  justify-content: space-between;
+}
+
+.btns button {
+  flex: 1;
+  margin-right: 12rpx;
+}
+
+.btns button~button {
+  margin-right: 0;
+  margin-left: 12rpx;
+}
--- a/demo/pages/CheckboxGroup/index.axml
+++ b/demo/pages/CheckboxGroup/index.axml
@ -0,0 +1,32 @@
+<checkbox-group 
+  uid="{{uid}}"
+  value="{{value}}"
+  disabled="{{disabled}}"
+  radius="{{radius}}"
+  controlled="{{controlled}}"
+  header="CheckBoxGroup demo"
+  footer="CheckBoxGroup 模式相比 CheckBox 功能有所加强"
+  onChange="checkBoxGroupChange">
+
+  <checkbox-item 
+    a:for="{{list}}"
+    value="{{item.value}}"  
+    disabled="{{item.disabled}}" 
+    uid="{{uid}}">
+      {{item.value}}
+    </checkbox-item>
+
+</checkbox-group>
+
+<view class="btns">
+  <button onTap="selectAll">全选</button>
+  <button onTap="selectNone">全不选</button>
+</view>
+<view class="btns">
+  <button onTap="enableAll">都可用</button>
+  <button onTap="disableAll">全部禁用</button>
+</view>
+<view class="btns">
+  <button onTap="controlledTrue">受控模式</button>
+  <button onTap="controlledFalse">非受控模式</button>
+</view>
--- a/demo/pages/CheckboxGroup/index.js
+++ b/demo/pages/CheckboxGroup/index.js
@ -0,0 +1,58 @@
+Page({
+  data: {
+    value: ['a2', 'a3'],
+    radius: true,
+    controlled: false,
+    disabled: false,
+    uid: 'checkboxGroup',
+    list: [
+      { value: 'a1', disabled: false },
+      { value: 'a2', disabled: false },
+      { value: 'a3', disabled: false },
+      { value: 'a4', disabled: false },
+      { value: 'a5', disabled: false },
+      { value: 'a6', disabled: false },
+    ],
+  },
+  checkBoxGroupChange(v) {
+    my.alert({
+      title: `当前选中的元素为：${v}`,
+    });
+    this.setData({
+      value: v,
+    });
+  },
+  selectAll() {
+    const newValue = this.data.list.map((item) => item.value);
+    if (newValue.length > 0) {
+      this.setData({
+        value: newValue,
+      });
+    }
+  },
+  selectNone() {
+    this.setData({
+      value: [],
+    });
+  },
+  disableAll() {
+    this.setData({
+      disabled: true,
+    });
+  },
+  enableAll() {
+    this.setData({
+      disabled: false,
+    });
+  },
+  controlledTrue() {
+    this.setData({
+      controlled: true,
+    });
+  },
+  controlledFalse() {
+    this.setData({
+      controlled: false,
+    });
+  },
+});
--- a/demo/pages/CheckboxGroup/index.json
+++ b/demo/pages/CheckboxGroup/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "CheckBoxGroup",
+  "usingComponents": {
+    "checkbox-group": "../../../src/CheckboxGroup/index",
+    "checkbox-item": "../../../src/CheckboxGroup/CheckboxItem/index"
+  }
+}
--- a/demo/pages/Collapse/index.acss
+++ b/demo/pages/Collapse/index.acss
@ -0,0 +1,15 @@
+.item-content {
+  font-size: 34rpx;
+  color: #333;
+  line-height: 48rpx;
+  background-color: white;
+}
+.collapse-disable{
+  margin: 24rpx 0;
+  font-size: 34rpx;
+  color: #333;
+  line-height: 48rpx;
+}
+.amd-icon{
+  font-size: 22px;
+}
--- a/demo/pages/Collapse/index.axml
+++ b/demo/pages/Collapse/index.axml
@ -0,0 +1,109 @@
+<button onTap="onTap">受控</button>
+<collapse 
+  className="demo-collapse" 
+  name="{{name}}" 
+  onChange="onChange" 
+  uid="collapse-0" 
+  accordion="{{false}}">
+
+  <collapse-item 
+    title="自适应高度" 
+    uid="collapse-0" 
+    name="item-0">
+    <view class="item-content">
+      <block a:for="{{randomLine}}">
+        <view>自适应高度的内容区域 共 {{index + 1}} 行</view>
+      </block>
+    </view>
+  </collapse-item>
+  
+  <collapse-item 
+    name="item-1" 
+    uid="collapse-0">
+    <view slot="title">
+      <text style="color: red;">title 插槽</text>
+    </view>
+    <view class="item-content content2">
+      <view>内容区域</view>
+    </view>
+  </collapse-item>
+
+  <collapse-item 
+    title="标题" 
+    name="item-2" 
+    uid="collapse-0">
+    <view class="item-content content3">
+      <view>内容区域</view>
+    </view>
+  </collapse-item>
+  
+  <collapse-item 
+  title="标题" 
+  name="item-3" 
+  uid="collapse-0">
+  <view class="item-content content3">
+    <view>内容区域</view>
+  </view>
+</collapse-item>
+</collapse>
+
+
+<view class="collapse-disable">
+  禁用状态
+</view>
+<collapse 
+  className="demo-collapse" 
+  uid="collapse-1" 
+  accordion="{{false}}">
+
+  <collapse-item 
+    title="item-1" 
+    uid="collapse-1" 
+    name="item-0"
+    disabled="{{true}}">
+    <view class="item-content">
+      <block a:for="{{randomLine}}">
+        <view>item-1</view>
+      </block>
+    </view>
+  </collapse-item>
+  
+  <collapse-item 
+    name="item-1" 
+    uid="collapse-1"
+    title="item-2">
+    item-2
+  </collapse-item>
+</collapse>
+
+
+<view class="collapse-disable">
+  自定义图标
+</view>
+<collapse 
+  className="demo-collapse" 
+  uid="collapse-2" 
+  accordion="{{false}}">
+  <collapse-item 
+    uid="collapse-2" 
+    name="item-0">
+    <view slot="title">
+      <icon type="FireFill" size="small"/>
+      <text style="color: red; padding-left:12px">title 插槽</text>
+    </view>
+    自定义图标
+  </collapse-item>
+  
+  <collapse-item 
+    name="item-1" 
+    uid="collapse-2"
+    expandIcon="AddOutline"
+    closeIcon="MinusOutline"
+    brief="辅助信息">
+    <view slot="title">
+      <text style="color: red; padding-right:8px">title 插槽</text>
+      <icon type="FireFill" size="small"/>
+    </view>
+    自定义图标
+  </collapse-item>
+</collapse>
--- a/demo/pages/Collapse/index.js
+++ b/demo/pages/Collapse/index.js
@ -0,0 +1,19 @@
+let index = 0;
+Page({
+  data: {
+    randomLine: 1,
+    name: ['item-1'],
+  },
+  onTap() {
+    index += 1;
+    const name = [`item-${index % 3}`, `item-${(index - 1) % 3}`];
+    this.setData({
+      name: [...name],
+    });
+  },
+  onChange(e) {
+    my.showToast({
+      content: `当前展开的元素: ${e}`,
+    });
+  },
+});
--- a/demo/pages/Collapse/index.json
+++ b/demo/pages/Collapse/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index",
+    "collapse-item": "../../../src/Collapse/CollapseItem/index",
+    "icon": "../../../src/Icon/index"
+  }
+}
--- a/demo/pages/CollapseAccordion/index.acss
+++ b/demo/pages/CollapseAccordion/index.acss
@ -0,0 +1,5 @@
+.item-content {
+  font-size: 34rpx;
+  color: #333;
+  line-height: 48rpx;
+}
--- a/demo/pages/CollapseAccordion/index.axml
+++ b/demo/pages/CollapseAccordion/index.axml
@ -0,0 +1,24 @@
+<collapse 
+  name="{{['item-1']}}" 
+  uid="collapse-1" 
+  accordion="{{true}}"
+  onChange="onChange">
+
+  <collapse-item title="标题1" name="item-1" uid="collapse-1">
+    <view class="item-content">
+      <view>内容区域</view>
+    </view>
+  </collapse-item>
+  
+  <collapse-item title="标题2" name="item-2" uid="collapse-1">
+    <view class="item-content">
+      <view>内容区域</view>
+    </view>
+  </collapse-item>
+  
+  <collapse-item title="标题3" name="item-3" uid="collapse-1">
+    <view class="item-content">
+      <view>内容区域</view>
+    </view>
+  </collapse-item>
+</collapse>
--- a/demo/pages/CollapseAccordion/index.js
+++ b/demo/pages/CollapseAccordion/index.js
@ -0,0 +1,7 @@
+Page({
+  onChange(e) {
+    my.alert({
+      content: `当前展开的元素: ${e}`,
+    });
+  },
+});
--- a/demo/pages/CollapseAccordion/index.json
+++ b/demo/pages/CollapseAccordion/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Collapse：手风琴模式",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index",
+    "collapse-item": "../../../src/Collapse/CollapseItem/index"
+  }
+}
--- a/demo/pages/Dialog/index.acss
+++ b/demo/pages/Dialog/index.acss
@ -0,0 +1,39 @@
+.deleteBtn {
+  color: #f93a4a;
+  font-weight: bolder;
+}
+
+.cancelBtn {
+  color: #ccc;
+}
+
+.buttonBold,
+.modalButtonBold .am-modal-footer {
+  font-weight: bold;
+}
+
+.space {
+  margin-top: 10px;
+}
+
+.slide {
+  margin-top: 10px;
+  padding-bottom: 10px;
+}
+
+.amd-input-item{
+  border-color: #ccc;
+}
+
+.input-container{
+  border: 1px solid #e5e5e5;
+  padding: 8px 12px;
+}
+
+.a-input-content{
+  font-size: 15px;
+}
+
+.a-input-placeholder{
+  font-size:15px !important;
+}
--- a/demo/pages/Dialog/index.axml
+++ b/demo/pages/Dialog/index.axml
@ -0,0 +1,84 @@
+<view>
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['长文案主操作', '更多','取消']}}"
+    visible="{{isVerticalShow}}"
+    direction="vertical"
+    maskClosable="{{true}}"
+    onClose="onVerticalClose"
+    onButtonTap="onVerticalButtonTap">
+  </dialog>
+
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['辅助操作', '主操作']}}"
+    visible="{{isHoriShow}}"
+    maskClosable="{{true}}"
+    direction="horizontal"
+    onClose="onHoriClose"
+    onButtonTap="onHoriButtonTap"/>
+
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['辅助操作', '主操作']}}"
+    visible="{{isCusDialogShow}}"
+    maskClosable="{{true}}"
+    direction="horizontal"
+    onClose="onCusClose"
+    onButtonTap="onHoriButtonTap">
+    <view class="input-container">
+      <input-item placeholder="给朋友留言"></input-item>
+    </view>
+  </dialog>
+
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['辅助操作', '主操作']}}"
+    imageSize="medium"
+    image="{{url}}" 
+    visible="{{isSImgDialogShow}}" 
+    maskClosable="{{true}}"
+    direction="horizontal"
+    onClose="onSImgClose"
+    onButtonTap="onHoriButtonTap"/>
+
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['辅助操作', '主操作']}}"
+    imageSize="large"
+    image="{{url}}" 
+    visible="{{isMImgDialogShow}}" 
+    maskClosable="{{true}}"
+    direction="horizontal"
+    onClose="onMImgClose"
+    onButtonTap="onHoriButtonTap"/>
+
+  <dialog
+    title="标题单行"
+    content="标题内容"
+    buttonText="{{['辅助操作', '主操作']}}"
+    imageSize="x-large"
+    image="{{url}}" 
+    visible="{{isLImgDialogShow}}" 
+    maskClosable="{{true}}"
+    direction="horizontal"
+    onClose="onLImgClose"
+    onButtonTap="onHoriButtonTap"/>
+  
+  <button class="space" onTap="openVertical">纵向</button>
+  
+  <button class="space" onTap="openHori">横向</button>
+
+  <button class="space" onTap="openCus">自定义组件</button>
+  
+  <button class="space" onTap="openSImg">带小图</button>
+  
+  <button class="space" onTap="openMImg">带中图</button>
+
+  <button class="space" onTap="openLImg">带大图</button>
+</view>
--- a/demo/pages/Dialog/index.js
+++ b/demo/pages/Dialog/index.js
@ -0,0 +1,81 @@
+Page({
+  data: {
+    isVerticalShow: false,
+    isHoriShow: false,
+    isSImgDialogShow: false,
+    isMImgDialogShow: false,
+    isLImgDialogShow: false,
+    isCusDialogShow: false,
+    url: 'https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png',
+  },
+  onVerticalButtonTap() {
+    this.setData({
+      isVerticalShow: false,
+    });
+  },
+  onHoriButtonTap() {
+    this.setData({
+      isHoriShow: false,
+    });
+  },
+  onVerticalClose() {
+    this.setData({
+      isVerticalShow: false,
+    });
+  },
+  onHoriClose() {
+    this.setData({
+      isHoriShow: false,
+    });
+  },
+  openVertical() {
+    this.setData({
+      isVerticalShow: true,
+    });
+  },
+  openHori() {
+    this.setData({
+      isHoriShow: true,
+    });
+  },
+  openSImg() {
+    this.setData({
+      isSImgDialogShow: true,
+    });
+  },
+  openMImg() {
+    this.setData({
+      isMImgDialogShow: true,
+    });
+  },
+  openLImg() {
+    this.setData({
+      isLImgDialogShow: true,
+    });
+  },
+  openCus() {
+    this.setData({
+      isCusDialogShow: true,
+    });
+  },
+  onSImgClose() {
+    this.setData({
+      isSImgDialogShow: false,
+    });
+  },
+  onMImgClose() {
+    this.setData({
+      isMImgDialogShow: false,
+    });
+  },
+  onLImgClose() {
+    this.setData({
+      isLImgDialogShow: false,
+    });
+  },
+  onCusClose() {
+    this.setData({
+      isCusDialogShow: false,
+    });
+  },
+});
--- a/demo/pages/Dialog/index.json
+++ b/demo/pages/Dialog/index.json
@ -0,0 +1,6 @@
+{
+    "usingComponents":{
+        "dialog": "../../../src/Dialog/index",
+        "input-item": "../../../src/InputItem/index"
+    }
+}
--- a/demo/pages/Filter/index.acss
+++ b/demo/pages/Filter/index.acss
@ -0,0 +1,15 @@
+.filter-num{
+ padding: 20rpx;
+}
+
+.filter-1 .amd-filter-item{
+        z-index: 2;
+}
+
+.filter-2 .amd-filter-item{
+    z-index: 2;
+}
+
+.filter-3 .amd-filter-item{
+    z-index: 2;
+}
--- a/demo/pages/Filter/index.axml
+++ b/demo/pages/Filter/index.axml
@ -0,0 +1,146 @@
+<view class="filter-num"> 两项筛选 </view>
+
+<filter 
+  uid="filter-1" 
+  className="filter-1">
+  <filter-item
+    uid="filter-1"
+    placeholder="筛选项一"
+    value="3"
+    items="{{items}}"
+    type="default" 
+    ref="ref"
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+  <filter-item 
+    uid="filter-1"
+    placeholder="筛选项二"
+    value="{{value}}"
+    items="{{items1}}"
+    type="multiple" 
+    onChange="changeSelect"
+    onOpen="onOpen"
+    />
+
+</filter>
+
+<view class="filter-num"> 三项筛选 </view>
+<filter
+  uid="filter-2" 
+  className="filter-2">
+  <filter-item
+    uid="filter-2"
+    placeholder="筛选项一"
+    value="3"
+    items="{{items}}"
+    type="default" 
+    ref="ref"
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+  <filter-item 
+    uid="filter-2"
+    placeholder="筛选项二"
+    value="{{value}}"
+    items="{{items1}}"
+    type="multiple" 
+    onChange="changeSelect"
+    onOpen="onOpen"
+    />
+
+  <filter-item 
+    uid="filter-2"
+    placeholder="筛选项过长长长长长长长"
+    value=""
+    items="{{items}}" 
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+</filter>
+
+<view class="filter-num"> 四项筛选 </view>
+<filter
+  uid="filter-3" 
+  className="filter-3">
+  <filter-item
+    uid="filter-3"
+    placeholder="筛选项一"
+    value="3"
+    items="{{items}}"
+    type="default" 
+    ref="ref"
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+  <filter-item 
+    uid="filter-3"
+    placeholder="筛选项二"
+    value="{{value}}"
+    items="{{items1}}"
+    type="multiple" 
+    onChange="changeSelect"
+    onOpen="onOpen"
+    />
+
+    <filter-item
+    uid="filter-3"
+    placeholder="筛选项三"
+    value="3"
+    items="{{items}}"
+    type="default" 
+    ref="ref"
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+  <filter-item 
+    uid="filter-3"
+    placeholder="筛选项四"
+    value="{{value}}"
+    items="{{items1}}"
+    type="multiple" 
+    onChange="changeSelect"
+    onOpen="onOpen"
+    />
+
+</filter>
+
+<view class="filter-num"> 插槽：title 与 icon </view>
+
+<filter 
+  uid="filter-4" 
+  className="filter-4">
+
+  <view 
+    slot-scope="item" 
+    slot="title">
+    {{item.title === '筛选项一' ? '筛选项 1' : '筛选项 2'}}
+  </view>
+
+  <view slot="icon" slot-scope="item">
+    <icon 
+      type="DownOutline" 
+      className="amd-filter-bar-text-icon {{item.active ? 'amd-filter-bar-text-icon-up' : ''}}" />
+  </view>
+
+  <filter-item
+    uid="filter-4"
+    placeholder="筛选项一"
+    value="3"
+    items="{{items}}"
+    type="default" 
+    ref="ref"
+    onChange="changeSelect"
+    onOpen="onOpen"/>
+
+  <filter-item 
+    uid="filter-4"
+    placeholder="筛选项二"
+    value="{{value}}"
+    items="{{items1}}"
+    type="multiple" 
+    onChange="changeSelect"
+    onOpen="onOpen"
+    />
+
+</filter>
--- a/demo/pages/Filter/index.js
+++ b/demo/pages/Filter/index.js
@ -0,0 +1,58 @@
+Page({
+  data: {
+    value: ['3', '5'],
+    items: [
+      {
+        text: '选项一',
+        value: '1',
+      },
+      {
+        text: '选项二',
+        value: '2',
+      },
+      {
+        text: '选项三',
+        value: '3',
+      },
+      {
+        text: '选项四',
+        value: '4',
+      },
+      {
+        text: '选项五',
+        value: '5',
+      },
+    ],
+    items1: new Array(100).fill(0).map((_, idx) => {
+      return {
+        text: `选项${idx + 1}`,
+        value: `${idx + 1}`,
+      };
+    }),
+  },
+  changeSelect(v) {
+    if (v.length > 0) {
+      my.alert({
+        content: `当前选择了 ${v}`,
+      });
+    } else {
+      my.showToast({
+        content: '未选择任何一项',
+      });
+    }
+  },
+  formatValue(fv) {
+    return `${fv}🔥`;
+  },
+  onOpen() {
+    my.alert({
+      title: '选项卡打开',
+    });
+  },
+  onTap() {
+    this.ins.changeSelect('1');
+  },
+  ref(ins) {
+    this.ins = ins;
+  },
+});
--- a/demo/pages/Filter/index.json
+++ b/demo/pages/Filter/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Filter",
+  "usingComponents": {
+    "filter": "../../../src/Filter/index",
+    "filter-item": "../../../src/Filter/FilterItem/index",
+    "icon": "../../../src/Icon/index"
+  }
+}
--- a/demo/pages/Form/index.acss
+++ b/demo/pages/Form/index.acss
@ -0,0 +1,5 @@
+.checkbox-item,
+.radio-item {
+  padding-bottom: 0;
+  padding-right: 0;
+}
--- a/demo/pages/Form/index.axml
+++ b/demo/pages/Form/index.axml
@ -0,0 +1,143 @@
+<form
+  form="{{form}}" 
+  initialValues="{{initVal}}" 
+  ref="ref"
+  onValuesChange="onValuesChange" 
+  onFinish="onFinish" >
+
+    <form-group 
+      radius="{{true}}" 
+      header="input">
+      <form-item 
+        label="input" 
+        form="{{form}}"
+        arrow="{{true}}" 
+        name="input">
+        <input mode="form"/>
+      </form-item>
+
+      <form-item 
+      label="input" 
+      form="{{form}}"
+      arrow="{{true}}" 
+      name="input1"
+      disabled="{{true}}">
+      <input 
+        mode="form" 
+        disabled="{{true}}"/>
+    </form-item>
+
+    </form-group>
+
+    <form-group 
+      radius="{{true}}" 
+      header="checkbox">
+      <form-item 
+        className="checkbox-item"
+        label="checkbox" 
+        name="checkbox" 
+        form="{{form}}" 
+        position="vertical">
+        <checkbox-group mode="form">
+          <checkbox-item value="a1">复选框文本内容1</checkbox-item>
+          <checkbox-item value="a2">复选框文本内容2</checkbox-item>
+          <checkbox-item value="a3">复选框文本内容3</checkbox-item>
+          <checkbox-item value="a4">复选框文本内容4</checkbox-item>
+          <checkbox-item value="a5">复选框文本内容5</checkbox-item>
+        </checkbox-group>
+      </form-item>
+    </form-group>
+    
+    <form-group 
+      radius="{{true}}" 
+      header="radio">
+      <form-item 
+        className="radio-item"
+        label="radio1" 
+        name="radio" 
+        form="{{form}}" 
+        position="vertical">
+        <radio-group 
+          name="radioList"
+          mode="form">
+          <radio-item value="a1">单选框文本内容</radio-item>
+          <radio-item value="a2">单选框文本内容</radio-item>
+          <radio-item value="a3">单选框文本内容</radio-item>
+          <radio-item value="a4">单选框文本内容</radio-item>
+          <radio-item value="a5">单选框文本内容</radio-item>
+        </radio-group>
+      </form-item>
+    </form-group>
+    
+    <form-group 
+      radius="{{true}}" 
+      header="others">
+      <form-item 
+        label="stepper" 
+        labelWidth="110px"
+        name="stepper" 
+        form="{{form}}" 
+        initialValue="{{19}}">
+        <view slot="extra">
+          <stepper 
+            step="{{1}}" 
+            min="{{15}}" 
+            max="{{20}}" 
+            inputWidth="60px"
+            mode="form" />
+        </view>
+      </form-item>
+      
+      <form-item 
+        label="picker" 
+        labelWidth="110px"
+        name="picker" 
+        form="{{form}}">
+        <picker 
+          cols="{{3}}" 
+          disabled="{{false}}" 
+          pickerholder="请选择" 
+          data="{{pickerList}}"
+          mode="form"
+          onFormat="formatValue" 
+          onDismiss="cancelPicker" 
+          onOk="getPikcerValue">
+          <view slot="title">
+            <text style="color: red;">Picker</text> 选择器</view>
+        </picker>
+      </form-item>
+      
+      <form-item 
+        label="switch" 
+        labelWidth="110px"
+        name="switch" 
+        form="{{form}}">
+        <switch 
+          checked="{{false}}" 
+          controlled="{{false}}"
+          mode="form" />
+      </form-item>
+      
+      <form-item 
+        label="selector" 
+        name="selector" 
+        position="vertical" 
+        form="{{form}}">
+        <selector 
+          items="{{sitems}}" 
+          multiple="{{true}}"
+          mode="form" />
+      </form-item>
+    </form-group>
+
+    <view slot="footer">
+      <button 
+      type="primary" 
+      mode="form"
+      form="{{form}}"
+      htmlType="submit">
+      Submit
+    </button>
+    </view>
+  </form>
+  
--- a/demo/pages/Form/index.js
+++ b/demo/pages/Form/index.js
@ -0,0 +1,96 @@
+Page({
+  data: {
+    form: 'form',
+    initVal: {
+      input: 10,
+      input1: 'disabled',
+      checkbox: ['a1', 'a3'],
+      radio: 'a3',
+      picker: ['2014', '12', 24],
+      switch: true,
+      selector: ['1'],
+    },
+    pickerList: [
+      ['2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022'],
+      ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
+      [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+        30,
+        31,
+      ],
+    ],
+    sitems: [
+      {
+        text: '选项一',
+        value: '1',
+      },
+      {
+        text: '选项二',
+        value: '2',
+      },
+      {
+        text: '选项三',
+        value: '3',
+      },
+      {
+        text: '选项四',
+        value: '4',
+      },
+      {
+        text: '选项五',
+        value: '5',
+      },
+    ],
+  },
+  onFinish(allValues) {
+    my.alert({
+      title: 'onFinish',
+      content: JSON.stringify(allValues),
+    });
+  },
+  onValuesChange(fieldVal, allVals) {
+    // eslint-disable-next-line no-console
+    console.log(fieldVal, allVals);
+  },
+  cancelPicker() {
+    my.showToast({
+      content: '取消操作，关闭 picker，无回调。',
+    });
+  },
+  changePikcer(v) {
+    // eslint-disable-next-line no-console
+    console.log('changePikcer', v);
+  },
+  formatValue(v) {
+    return v.join('/');
+  },
+});
+
--- a/demo/pages/Form/index.json
+++ b/demo/pages/Form/index.json
@ -0,0 +1,21 @@
+{
+    "defaultTitle": "Form",
+    "usingComponents": {
+        "form": "../../../src/Form/index",
+        "form-item": "../../../src/Form/FormItem/index",
+        "input": "../../../src/InputItem/index",
+        "my":"../../components/test/index",
+        "button":"../../../src/Button/index",
+        "checkbox":"../../../src/Checkbox/index",
+        "stepper":"../../../src/Stepper/index",
+        "picker":"../../../src/Picker/index",
+        "checkbox-group":"../../../src/CheckboxGroup/index",
+        "checkbox-item":"../../../src/CheckboxGroup/CheckboxItem/index",
+        "radio-group":"../../../src/RadioGroup/index",
+        "radio-item":"../../../src/RadioGroup/RadioItem/index",
+        "switch":"../../../src/Switch/index",
+        "terms":"../../../src/Terms/index",
+        "selector":"../../../src/Selector/index",
+        "form-group": "../../../src/Form/FormGroup/index"
+    }
+}
--- a/demo/pages/FormAFor/index.acss
+++ b/demo/pages/FormAFor/index.acss
@ -0,0 +1,4 @@
+.changedFields, .allFields{
+    font-size: large;
+    margin:20px 0
+}
--- a/demo/pages/FormAFor/index.axml
+++ b/demo/pages/FormAFor/index.axml
@ -0,0 +1,25 @@
+<button onTap="sub" type="primary">减少表单项</button>
+<button onTap="add" type="warn">新增表单项</button>
+
+<form 
+    form="{{form}}" 
+    onValuesChange="onValuesChange">
+    <form-item 
+        a:for="{{list}}" 
+        label="{{item.name}}" 
+        labelWidth="110px"
+        name="{{item.name}}" 
+        form="{{form}}">
+        <input 
+            placeholder="{{item.name}}" 
+            mode="form" />
+    </form-item>
+</form>
+
+<view class="changedFields">
+    changedFields: {{changedFields}}
+</view>
+
+<view class="allFields">
+    allFields: {{allFields}}
+</view>
--- a/demo/pages/FormAFor/index.js
+++ b/demo/pages/FormAFor/index.js
@ -0,0 +1,34 @@
+Page({
+  data: {
+    list: [
+      { name: 'field1', placeholder: 'field1' },
+      { name: 'field2', placeholder: 'field2' },
+      { name: 'field3', placeholder: 'field3' },
+    ],
+    changedFields: '',
+    allFields: '',
+    form: 'formAFor',
+  },
+  onValuesChange(changedFields, allFields) {
+    this.setData({
+      changedFields: JSON.stringify(changedFields),
+      allFields: JSON.stringify(allFields),
+    });
+  },
+  sub() {
+    this.setData({
+      list: this.data.list.slice(1),
+    });
+  },
+  add() {
+    const list = [
+      { name: 'field1', placeholder: 'field1' },
+      { name: 'field2', placeholder: 'field2' },
+      { name: 'field3', placeholder: 'field3' },
+      { name: 'field4', placeholder: 'field4' },
+    ];
+    this.setData({
+      list,
+    });
+  },
+});
--- a/demo/pages/FormAFor/index.json
+++ b/demo/pages/FormAFor/index.json
@ -0,0 +1,8 @@
+{
+    "defaultTitle": "结合 a:for 指令使用",
+    "usingComponents": {
+        "form": "../../../src/Form/index",
+        "form-item": "../../../src/Form/FormItem/index",
+        "input": "../../../src/InputItem/index"
+    }
+}
--- a/demo/pages/FormAIf/index.acss
+++ b/demo/pages/FormAIf/index.acss
@ -0,0 +1,4 @@
+.changedFields, .allFields{
+    font-size: large;
+    margin:20px 0
+}
--- a/demo/pages/FormAIf/index.axml
+++ b/demo/pages/FormAIf/index.axml
@ -0,0 +1,43 @@
+<button onTap="changeCheckboxShow" type="primary">show on/off</button>
+
+<view class="changedFields">
+    changedFields: {{changedFields}}
+</view>
+<view class="allFields">
+    allFields: {{allFields}}
+</view>
+<form 
+  form="{{form}}"
+  onValuesChange="onValuesChange" >
+    <form-group 
+        radius="{{true}}" 
+        header="checkbox">
+        <form-item 
+          label="checkbox"
+          position="vertical" 
+          name="checkbox" 
+          form="{{form}}">
+        <checkbox-group 
+          a:if="{{checkboxShow}}" 
+          mode="form"
+          uid="{{uid}}">
+            <checkbox-item value="a1" uid="{{uid}}">复选框文本内容1</checkbox-item>
+            <checkbox-item value="a2" uid="{{uid}}">复选框文本内容2</checkbox-item>
+            <checkbox-item value="a3" uid="{{uid}}">复选框文本内容3</checkbox-item>
+            <checkbox-item value="a4" uid="{{uid}}">复选框文本内容4</checkbox-item>
+            <checkbox-item value="a5" uid="{{uid}}">复选框文本内容5</checkbox-item>
+        </checkbox-group>
+      </form-item>
+    </form-group>
+    
+    <form-group 
+      radius="{{true}}" 
+      header="input">
+        <form-item 
+          label="input" 
+          name="input" 
+          form="{{form}}">
+            <input mode="form"/>
+        </form-item>
+    </form-group>
+</form>
--- a/demo/pages/FormAIf/index.js
+++ b/demo/pages/FormAIf/index.js
@ -0,0 +1,24 @@
+Page({
+  data: {
+    checkboxShow: true,
+    form: 'formCheckbox',
+    uid: 'formCheckboxGroup',
+    initVal: {
+      checkbox: ['a1', 'a2'],
+      input: 'initVal',
+    },
+    changedFields: '',
+    allFields: '',
+  },
+  changeCheckboxShow() {
+    this.setData({
+      checkboxShow: !this.data.checkboxShow,
+    });
+  },
+  onValuesChange(changedFields, allFields) {
+    this.setData({
+      changedFields: JSON.stringify(changedFields),
+      allFields: JSON.stringify(allFields),
+    });
+  },
+});
--- a/demo/pages/FormAIf/index.json
+++ b/demo/pages/FormAIf/index.json
@ -0,0 +1,11 @@
+{
+  "defaultTitle": "结合 a:if 使用",
+  "usingComponents": {
+    "form": "../../../src/Form/index",
+    "form-item": "../../../src/Form/FormItem/index",
+    "form-group": "../../../src/Form/FormGroup/index",
+    "input": "../../../src/InputItem/index",
+    "checkbox-group": "../../../src/CheckboxGroup/index",
+    "checkbox-item":"../../../src/CheckboxGroup/CheckboxItem/index"
+  }
+}
--- a/demo/pages/FormBasic/index.acss
+++ b/demo/pages/FormBasic/index.acss
@ -0,0 +1,4 @@
+.changedFields, .allFields{
+    font-size: large;
+    margin:20px 0
+}
--- a/Show More
+++ b/Show More