`子组件。",
+ "support": [
+ {
+ "name": "u-capsules-item",
+ "title": "胶囊选项",
+ "snippet": "选项"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ },
{
"symbol": "van-pickerson",
"name": "选择器",
diff --git a/src-vusion/components/index.js b/src-vusion/components/index.js
index 489e2e193..fbbceb569 100644
--- a/src-vusion/components/index.js
+++ b/src-vusion/components/index.js
@@ -113,6 +113,10 @@ export { default as VanCardu } from '../../src/cardu';
export { default as VanFieldsonforsearch } from '../../src/fieldsonforsearch';
export { default as VanLinearLayout } from '../../src/linear-layout';
+export { default as VanCapsules } from '../../src/capsules';
+export { default as VanCapsulesItem } from '../../src/capsules-item';
+export { default as VanCapsulesGroup } from '../../src/capsules-group';
+
export * from './list-view';
export * from './grid-view';
export * from './iframe';
diff --git a/src-vusion/styles/theme.css b/src-vusion/styles/theme.css
index 51ddea9be..ea85c2393 100644
--- a/src-vusion/styles/theme.css
+++ b/src-vusion/styles/theme.css
@@ -830,4 +830,31 @@
--van-toast-text-color: #fff; /* @type color */ /* @desc 弹出消息的字体颜色 */
--van-toast-background-color: rgba(0, 0, 0, 0.7); /* @type color */ /* @desc 弹出消息的背景色 */
--van-toast-custom-icon-color: white; /* @type color */ /* @desc 弹出消息的自定义图标颜色 */
+
+ /* @component van-capsules */
+ --van-capsules-item-font-size: 12px; /* @desc 胶囊字体大小 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-padding: 4px 20px; /* @desc 胶囊内边距 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-border-color: #e5e5e5; /* @type color */ /* @desc 胶囊边框颜色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-background: #fff; /* @type color */ /* @desc 胶囊背景色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-item-color: #333; /* @type color */ /* @desc 胶囊字体颜色 */ /* @prefix van-capsules-item */ /* @group 通用 */
+ --van-capsules-border-radius: 4px; /* @desc 胶囊圆角 */ /* @group 通用 */
+
+ --van-capsules-item-active-border-color: #337eff; /* @type color */ /* @desc 胶囊选中时边框颜色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+ --van-capsules-item-active-background: #337eff; /* @type color */ /* @desc 胶囊选中时背景色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+ --van-capsules-item-active-color: #fff; /* @type color */ /* @desc 胶囊选中时字体颜色 */ /* @prefix van-capsules-item */ /* @group 选中 */
+
+ --van-capsules-item-disabled-border-color: #337eff; /* @type color */ /* @desc 胶囊禁用时边框颜色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+ --van-capsules-item-disabled-background: #f5f5f5; /* @type color */ /* @desc 胶囊禁用时背景色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+ --van-capsules-item-disabled-color: #aaa; /* @type color */ /* @desc 胶囊禁用时字体颜色 */ /* @prefix van-capsules-item */ /* @group 禁用 */
+
+ --van-capsules-item-active-disabled-border-color: #bbd4ff; /* @type color */ /* @desc 胶囊选中时的禁用边框颜色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+ --van-capsules-item-active-disabled-background: #bbd4ff; /* @type color */ /* @desc 胶囊选中时的禁用背景色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+ --van-capsules-item-active-disabled-color: #fff; /* @type color */ /* @desc 胶囊选中时的禁用字体颜色 */ /* @prefix van-capsules-item */ /* @group 选中时禁用 */
+
+ --van-capsules-item-label-font-size: 10px; /* @desc 胶囊标签字体大小 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-background: #f24957; /* @type color */ /* @desc 胶囊标签背景色 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-color: #fff; /* @type color */ /* @desc 胶囊标签字体颜色 */ /* @prefix van-capsules-item */ /* @group 标签 */
+ --van-capsules-item-label-max-width: 100%; /* @desc 胶囊标签最大宽度 */ /* @prefix van-capsules-item */ /* @group 标签 */
+
+ --van-capsules-item-flag-color: #f24957; /* @type color */ /* @desc 胶囊flag颜色 */ /* @prefix van-capsules-item */
}
diff --git a/src/capsules-group/README.zh-CN.md b/src/capsules-group/README.zh-CN.md
new file mode 100644
index 000000000..89a8ab511
--- /dev/null
+++ b/src/capsules-group/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊组
diff --git a/src/capsules-group/index.js b/src/capsules-group/index.js
new file mode 100644
index 000000000..792d714b5
--- /dev/null
+++ b/src/capsules-group/index.js
@@ -0,0 +1,21 @@
+import { createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('capsules-group');
+
+export default createComponent({
+ methods: {
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return (
+
+ 选中组件，点击“+”添加组件
+
+ );
+ }
+ return this.slots();
+ }
+ },
+ render() {
+ return {this.renderSlots()}
;
+ }
+});
diff --git a/src/capsules-group/index.less b/src/capsules-group/index.less
new file mode 100644
index 000000000..0e6105fb9
--- /dev/null
+++ b/src/capsules-group/index.less
@@ -0,0 +1,9 @@
+.van-capsules-group {
+ display: inline-block;
+
+ margin-left: 10px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+}
diff --git a/src/capsules-item/README.zh-CN.md b/src/capsules-item/README.zh-CN.md
new file mode 100644
index 000000000..c7d2e1d1b
--- /dev/null
+++ b/src/capsules-item/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊项
diff --git a/src/capsules-item/index.js b/src/capsules-item/index.js
new file mode 100644
index 000000000..b60f4483e
--- /dev/null
+++ b/src/capsules-item/index.js
@@ -0,0 +1,84 @@
+import { createNamespace } from '../utils';
+import { ChildrenMixin } from '../mixins/relation';
+import Empty from '../emptycol';
+
+const [createComponent, bem] = createNamespace('capsules-item');
+
+export default createComponent({
+ mixins: [ChildrenMixin('VanCapsules')],
+ components: {
+ Empty,
+ },
+ props: {
+ value: String,
+ label: String,
+ flag: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ computed: {
+ active() {
+ if ([undefined].includes(this.value)) {
+ return false;
+ }
+
+ if (this.parent.multiple) {
+ return (this.parent.currentValue || []).indexOf(this.value) !== -1;
+ }
+
+ return this.parent.currentValue === this.value;
+ },
+ isDisabled() {
+ return this.parent.disabled || this.disabled;
+ },
+ },
+
+ methods: {
+ onSelect() {
+ if (this.parent.disabled || this.parent.readonly) {
+ return;
+ }
+
+ if (this.disabled) {
+ return;
+ }
+
+ this.parent.onSelect(this.value);
+ this.$emit('select', this.value);
+ },
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return ;
+ }
+
+ return this.slots();
+ },
+
+ renderLabel() {
+ if (!this.label) return null;
+
+ return {this.label}
;
+ },
+ },
+
+ render() {
+ return (
+
+ {this.renderSlots()}
+ {this.renderLabel()}
+
+ );
+ },
+});
diff --git a/src/capsules-item/index.less b/src/capsules-item/index.less
new file mode 100644
index 000000000..f9476837b
--- /dev/null
+++ b/src/capsules-item/index.less
@@ -0,0 +1,72 @@
+.van-capsules-item {
+ display: table-cell;
+ vertical-align: middle;
+ position: relative;
+ font-size: var(--van-capsules-item-font-size);
+ text-align: center;
+ padding: var(--van-capsules-item-padding);
+ border: 1px solid var(--van-capsules-item-border-color);
+ border-left-color: transparent;
+ background: var(--van-capsules-item-background);
+ color: var(--van-capsules-item-color);
+
+ &:first-child {
+ border-top-left-radius: var(--van-capsules-border-radius);
+ border-bottom-left-radius: var(--van-capsules-border-radius);
+ border-left-color: var(--van-capsules-item-border-color);
+ }
+
+ &:last-child {
+ border-top-right-radius: var(--van-capsules-border-radius);
+ border-bottom-right-radius: var(--van-capsules-border-radius);
+ }
+
+ &[active] {
+ z-index: 1;
+ border-color: var(--van-capsules-item-active-border-color);
+ background: var(--van-capsules-item-active-background);
+ color: var(--van-capsules-item-active-color);
+ }
+
+ &[disabled] {
+ color: var(--van-capsules-item-disabled-color);
+ background: var(--van-capsules-item-disabled-background);
+ }
+
+ &[active][disabled] {
+ color: var(--van-capsules-item-active-disabled-color);
+ background: var(--van-capsules-item-active-disabled-background);
+ border-color: var(--van-capsules-item-active-disabled-border-color);
+ }
+
+ &__label {
+ box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ font-size: var(--van-capsules-item-label-font-size);
+ padding: 0 4px;
+ border-radius: 2px;
+ white-space: nowrap;
+ background: var(--van-capsules-item-label-background);
+ color: var(--van-capsules-item-label-color);
+
+ max-width: var(--van-capsules-item-label-max-width);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &[flag]::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ border: 5px solid;
+ border-color: var(--van-capsules-item-flag-color) var(--van-capsules-item-flag-color) transparent transparent;
+ }
+
+ &:last-child[flag]::after {
+ border-top-right-radius: var(--van-capsules-border-radius);
+ }
+}
diff --git a/src/capsules/README.zh-CN.md b/src/capsules/README.zh-CN.md
new file mode 100644
index 000000000..ac2f84dd2
--- /dev/null
+++ b/src/capsules/README.zh-CN.md
@@ -0,0 +1 @@
+# Capsules 胶囊
diff --git a/src/capsules/api.yaml b/src/capsules/api.yaml
new file mode 100644
index 000000000..de0a1d7c3
--- /dev/null
+++ b/src/capsules/api.yaml
@@ -0,0 +1,146 @@
+- name: van-capsules
+ title: 胶囊
+ icon: capsules
+ description: 多项中选择一项
+ labels:
+ - Form
+ attrs:
+ - name: value
+ title: 选中值
+ type: any
+ sync: true
+ model: true
+ description: 当前选中的值
+ group: 数据属性
+ brifeDoc: ""
+ docDescription: 当前选择的值
+ tooltipLink: ""
+ - name: cancelable
+ title: 可取消
+ type: boolean
+ default: false
+ description: 是否可以取消选择
+ group: 交互属性
+ brifeDoc: ""
+ docDescription: 是否可以取消选择
+ tooltipLink: ""
+ - name: multiple
+ title: 可多选
+ type: boolean
+ default: false
+ description: 是否可以多选
+ group: 交互属性
+ brifeDoc: ""
+ docDescription: 是否可以多选
+ tooltipLink: ""
+ - name: readonly
+ title: 只读
+ type: boolean
+ default: false
+ description: 正常显示，但禁止选择/输入
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 正常显示，但禁止选择或输入。
+ tooltipLink: ""
+ - name: disabled
+ title: 禁用
+ type: boolean
+ default: false
+ description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ tooltipLink: ""
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入``或``子组件。
+ support:
+ - name: van-capsules-item
+ title: 胶囊选项
+ snippet: 选项
+ - name: van-capsules-group
+ title: 胶囊选项组
+ snippet: 选项选项
+
+ events:
+ - name: select
+ title: 选择后
+ description: 选择某一项时触发
+ params:
+ - name: $event
+ type: object
+ description: 自定义事件对象
+ schema:
+ $ref: "#/systemTypes/ChangeItemEvent"
+ - name: $event.value
+ type: any
+ description: 改变后的值
+ - name: change
+ title: 改变后
+ description: 选择值改变时触发
+ params:
+ - name: $event
+ type: object
+ description: 自定义事件对象
+ schema:
+ $ref: "#/systemTypes/ChangeItemEvent"
+ - name: $event.value
+ type: any
+ description: 选择项的值
+
+- name: van-capsules-item
+ title: 胶囊选项
+ description: 胶囊选项
+ attrs:
+ - name: value
+ title: 值
+ type: any
+ description: 此项的值
+ group: 数据属性
+ brifeDoc: ""
+ docDescription: 此项的值
+ tooltipLink: ""
+ - name: label
+ title: 标签
+ type: string
+ default: ""
+ description: 顶部自定义提示文本
+ group: 主要属性
+ brifeDoc: ""
+ docDescription: 顶部自定义提示文本
+ tooltipLink: ""
+ - name: flag
+ title: flag标志
+ type: boolean
+ default: false
+ description: 是否右上角有flag标志
+ group: 主要属性
+ brifeDoc: ""
+ docDescription: 是否右上角有flag标志
+ tooltipLink: ""
+ - name: disabled
+ title: 禁用
+ type: boolean
+ default: false
+ description: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ group: 状态属性
+ brifeDoc: ""
+ docDescription: 置灰显示，且禁止任何交互（焦点、点击、选择、输入等）
+ tooltipLink: ""
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入文本或 HTML。
+
+- name: van-capsules-group
+ title: 胶囊选项组
+ description: 胶囊选项组
+ slots:
+ - concept: Slot
+ name: default
+ description: 插入``子组件。
+ support:
+ - name: u-capsules-item
+ title: 胶囊选项
+ snippet: 选项
diff --git a/src/capsules/demo/index.vue b/src/capsules/demo/index.vue
new file mode 100644
index 000000000..8a6ac81f0
--- /dev/null
+++ b/src/capsules/demo/index.vue
@@ -0,0 +1,74 @@
+
+
+
+ value: {{active}}
+
+ 标签
+ 标签
+ 标签
+
+
+
+
+
+
+ 标签
+ 标签
+
+
+
+ 标签
+ 标签
+
+
+
+
+
+
+
+
+
+
+ 标签
+
+ 标签
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/capsules/docs/blocks.md b/src/capsules/docs/blocks.md
new file mode 100644
index 000000000..94d8fdb7e
--- /dev/null
+++ b/src/capsules/docs/blocks.md
@@ -0,0 +1,36 @@
+### 基础用法
+
+``` html
+
+ Option-A
+ Option-B
+ Option-C
+
+```
+
+### 胶囊组
+
+``` html
+
+
+ Option-A
+ Option-B
+
+
+ Option-A
+ Option-B
+
+
+```
+### 标签
+
+``` html
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+```
diff --git a/src/capsules/drawings/0.svg b/src/capsules/drawings/0.svg
new file mode 100644
index 000000000..b5ccfe4d3
--- /dev/null
+++ b/src/capsules/drawings/0.svg
@@ -0,0 +1,9 @@
+
diff --git a/src/capsules/drawings/1.svg b/src/capsules/drawings/1.svg
new file mode 100644
index 000000000..3843eb04c
--- /dev/null
+++ b/src/capsules/drawings/1.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/capsules/drawings/2.svg b/src/capsules/drawings/2.svg
new file mode 100644
index 000000000..889ba1e15
--- /dev/null
+++ b/src/capsules/drawings/2.svg
@@ -0,0 +1,20 @@
+
diff --git a/src/capsules/index.js b/src/capsules/index.js
new file mode 100644
index 000000000..8f9b2436e
--- /dev/null
+++ b/src/capsules/index.js
@@ -0,0 +1,91 @@
+import { createNamespace } from '../utils'
+import { ParentMixin } from '../mixins/relation'
+
+const [createComponent, bem] = createNamespace('capsules')
+
+export default createComponent({
+ mixins: [ParentMixin('VanCapsules')],
+ props: {
+ value: {
+ type: [String, Array],
+ },
+ autoSelect: {
+ type: Boolean,
+ default: false,
+ },
+ cancelable: {
+ type: Boolean,
+ default: false,
+ },
+ multiple: {
+ type: Boolean,
+ default: false,
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ },
+
+ data() {
+ return {
+ currentValue: this.value,
+ };
+ },
+
+ watch: {
+ value(val) {
+ this.currentValue = val;
+ },
+
+ currentValue(val) {
+ this.$emit('update:value', val);
+ this.$emit('change', { value: val });
+ }
+ },
+
+ methods: {
+ onSelect(val) {
+ let value;
+
+ if (this.multiple) {
+ const data = this.currentValue || [];
+
+ const optionIndex = data.indexOf(val);
+ if (optionIndex === -1) {
+ data.push(val);
+ } else if (this.cancelable) {
+ data.splice(optionIndex, 1);
+ }
+
+ value = data;
+ } else if (this.cancelable) {
+ value = this.currentValue === val ? null : val;
+ } else {
+ value = val;
+ }
+
+ this.currentValue = value;
+ this.$emit('select', { value });
+ },
+
+ renderSlots() {
+ if (this.inDesigner() && !this.slots()) {
+ return (
+
+ 选中组件，点击“+”添加组件
+
+ );
+ }
+
+ return this.slots();
+ }
+ },
+ render() {
+ return {this.renderSlots()}
;
+ },
+});
diff --git a/src/capsules/index.less b/src/capsules/index.less
new file mode 100644
index 000000000..1446f2fdb
--- /dev/null
+++ b/src/capsules/index.less
@@ -0,0 +1,3 @@
+.van-capsules {
+ display: inline-table;
+}
diff --git a/src/capsules/screenshots/0.png b/src/capsules/screenshots/0.png
new file mode 100644
index 000000000..9f9abaa05
Binary files /dev/null and b/src/capsules/screenshots/0.png differ
diff --git a/src/capsules/screenshots/1.png b/src/capsules/screenshots/1.png
new file mode 100644
index 000000000..dce302862
Binary files /dev/null and b/src/capsules/screenshots/1.png differ
diff --git a/src/capsules/screenshots/2.png b/src/capsules/screenshots/2.png
new file mode 100644
index 000000000..11984af3f
Binary files /dev/null and b/src/capsules/screenshots/2.png differ
diff --git a/src/mixins/slots.js b/src/mixins/slots.js
index 6f2ba66a1..881706007 100644
--- a/src/mixins/slots.js
+++ b/src/mixins/slots.js
@@ -18,7 +18,8 @@ export const SlotsMixin = {
// 开发态
if (process.env.NODE_ENV !== 'production') {
const searchParams = new URLSearchParams(window.location.search);
- return searchParams.get('VUE_APP_DESIGNER') === 1;
+ // eslint-disable-next-line eqeqeq
+ return searchParams.get('VUE_APP_DESIGNER') == 1;
}
return this.$env && this.$env.VUE_APP_DESIGNER;
diff --git a/vant.config.js b/vant.config.js
index 19928aeba..93d8977b8 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -10,7 +10,7 @@ module.exports = {
},
},
site: {
- defaultLang: 'en-US',
+ defaultLang: 'zh-CN',
versions: [
{ label: 'v1', link: '/vant/v1/' },
{ label: 'v3', link: '/vant/v3/' },
@@ -106,7 +106,7 @@ module.exports = {
items: [
{
path: 'linear-layout',
- title: 'Linear-Layout 线性布局'
+ title: 'Linear-Layout 线性布局',
},
{
path: 'button',
@@ -233,6 +233,10 @@ module.exports = {
path: 'uploader',
title: 'Uploader 文件上传',
},
+ {
+ path: 'capsules',
+ title: 'Capsules 胶囊',
+ },
],
},
{
@@ -487,416 +491,6 @@ module.exports = {
},
],
},
- 'en-US': {
- title: 'Vant',
- description: 'Mobile UI Components built on Vue',
- logo: 'https://img01.yzcdn.cn/vant/logo.png',
- langLabel: 'En',
- links: [
- {
- logo: 'https://b.yzcdn.cn/vant/logo/weapp.svg',
- url: '/vant-weapp',
- },
- {
- logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
- url: 'https://github.com/youzan/vant',
- },
- ],
- searchConfig: {
- apiKey: '90067aecdaa2c85220e2783cd305caac',
- indexName: 'vant',
- placeholder: 'Search...',
- algoliaOptions: {
- facetFilters: ['version:v2'],
- },
- },
- nav: [
- {
- title: 'Essentials',
- items: [
- {
- path: 'home',
- title: 'Introduction',
- },
- {
- path: 'quickstart',
- title: 'Quickstart',
- },
- {
- path: 'advanced-usage',
- title: 'Advanced Usage',
- },
- {
- path: 'changelog',
- title: 'Changelog',
- },
- {
- path: 'theme',
- title: 'Custom Theme',
- },
- {
- path: 'locale',
- title: 'Internationalization',
- },
- ],
- },
- {
- title: 'Basic Components',
- items: [
- {
- path: 'button',
- title: 'Button',
- },
- {
- path: 'cell',
- title: 'Cell',
- },
- {
- path: 'icon',
- title: 'Icon',
- },
- {
- path: 'iconv',
- title: 'Iconv',
- },
- {
- path: 'image',
- title: 'Image',
- },
- {
- path: 'col',
- title: 'Layout',
- },
- {
- path: 'popup',
- title: 'Popup',
- },
- {
- path: 'style',
- title: 'Built-in style',
- },
- {
- path: 'toast',
- title: 'Toast',
- },
- ],
- },
- {
- title: 'Form Components',
- items: [
- {
- path: 'calendar',
- title: 'Calendar',
- },
- {
- path: 'cascader',
- title: 'Cascader',
- },
- {
- path: 'checkbox',
- title: 'Checkbox',
- },
- {
- path: 'datetime-picker',
- title: 'DatetimePicker',
- },
- {
- path: 'field',
- title: 'Field',
- },
- {
- path: 'fieldinput',
- title: 'FieldInput',
- },
- {
- path: 'fieldtextarea',
- title: 'FieldTextarea',
- },
- {
- path: 'form',
- title: 'Form',
- },
- {
- path: 'number-keyboard',
- title: 'NumberKeyboard',
- },
- {
- path: 'password-input',
- title: 'PasswordInput',
- },
- {
- path: 'picker',
- title: 'Picker',
- },
- {
- path: 'radio',
- title: 'Radio',
- },
- {
- path: 'rate',
- title: 'Rate',
- },
- {
- path: 'search',
- title: 'Search',
- },
- {
- path: 'slider',
- title: 'Slider',
- },
- {
- path: 'stepper-new',
- title: 'StepperNew',
- },
- {
- path: 'switch',
- title: 'Switch',
- },
- {
- path: 'switch-cell',
- title: 'SwitchCell',
- },
- {
- path: 'uploader',
- title: 'Uploader',
- },
- ],
- },
- {
- title: 'Action Components',
- items: [
- {
- path: 'action-sheet',
- title: 'ActionSheet',
- },
- {
- path: 'dialog',
- title: 'Dialog',
- },
- {
- path: 'dropdown-menu',
- title: 'DropdownMenu',
- },
- {
- path: 'loading',
- title: 'Loading',
- },
- {
- path: 'notify',
- title: 'Notify',
- },
- {
- path: 'overlay',
- title: 'Overlay',
- },
- {
- path: 'pull-refresh',
- title: 'PullRefresh',
- },
- {
- path: 'share-sheet',
- title: 'ShareSheet',
- },
- {
- path: 'swipe-cell',
- title: 'SwipeCell',
- },
- ],
- },
- {
- title: 'Display Components',
- items: [
- {
- path: 'badge',
- title: 'Badge',
- },
- {
- path: 'circle',
- title: 'Circle',
- },
- {
- path: 'collapse',
- title: 'Collapse',
- },
- {
- path: 'count-down',
- title: 'CountDown',
- },
- {
- path: 'divider',
- title: 'Divider',
- },
- {
- path: 'empty',
- title: 'Empty',
- },
- {
- path: 'image-preview',
- title: 'ImagePreview',
- },
- {
- path: 'lazyload',
- title: 'Lazyload',
- },
- {
- path: 'list',
- title: 'List',
- },
- {
- path: 'notice-bar',
- title: 'NoticeBar',
- },
- {
- path: 'popover',
- title: 'Popover',
- },
- {
- path: 'popover-item',
- title: 'Popoveritem',
- },
- {
- path: 'progress',
- title: 'Progress',
- },
- {
- path: 'skeleton',
- title: 'Skeleton',
- },
- {
- path: 'steps',
- title: 'Steps',
- },
- {
- path: 'sticky',
- title: 'Sticky',
- },
- {
- path: 'swipe',
- title: 'Swipe',
- },
- {
- path: 'tag',
- title: 'Tag',
- },
- {
- path: 'for-components',
- title: '组件列表',
- },
- {
- path: 'gallery',
- title: 'gallery 画廊',
- },
- {
- path: 'cardu',
- title: 'cardu 卡片',
- },
- {
- path: 'grid-view',
- title: 'grid-view 网格',
- },
- ],
- },
- {
- title: 'Navigation Components',
- items: [
- {
- path: 'grid',
- title: 'Grid',
- },
- {
- path: 'index-bar',
- title: 'IndexBar',
- },
- {
- path: 'nav-bar',
- title: 'NavBar',
- },
- {
- path: 'pagination',
- title: 'Pagination',
- },
- {
- path: 'sidebar',
- title: 'Sidebar',
- },
- {
- path: 'tab',
- title: 'Tab',
- },
- {
- path: 'tabbar',
- title: 'Tabbar',
- },
- {
- path: 'tree-select',
- title: 'TreeSelect',
- },
- ],
- },
- {
- title: 'Business Components',
- items: [
- {
- path: 'address-edit',
- title: 'AddressEdit',
- },
- {
- path: 'address-list',
- title: 'AddressList',
- },
- {
- path: 'area',
- title: 'Area',
- },
- {
- path: 'card',
- title: 'Card',
- },
- {
- path: 'contact-card',
- title: 'ContactCard',
- },
- {
- path: 'contact-edit',
- title: 'ContactEdit',
- },
- {
- path: 'contact-list',
- title: 'ContactList',
- },
- {
- path: 'coupon-list',
- title: 'Coupon',
- },
- {
- path: 'goods-action',
- title: 'GoodsAction',
- },
- {
- path: 'submit-bar',
- title: 'SubmitBar',
- },
- {
- path: 'sku',
- title: 'Sku',
- },
- ],
- },
- {
- title: 'Deprecated',
- items: [
- {
- path: 'panel',
- title: 'Panel',
- },
- {
- path: 'switch-cell',
- title: 'SwitchCell',
- },
- ],
- },
- ],
- },
},
},
};
diff --git a/vusion.config.js b/vusion.config.js
index d2806b8cf..230dfd5d7 100644
--- a/vusion.config.js
+++ b/vusion.config.js
@@ -108,6 +108,7 @@ module.exports = {
{ group: 'Form', show: true, name: 'rate', alias: '评分' },
{ group: 'Form', show: true, name: 'slider', alias: '滑块' },
{ group: 'Form', show: true, name: 'uploader', alias: '文件上传' },
+ { group: 'Form', show: true, name: 'capsules', alias: '胶囊' },
{
group: 'Selector',
show: true,