tdesign-miniprogram

{ "key": "TDesign", "label": "Tdesign", "components": { "t-action-sheet": { "key": "t-action-sheet", "label": "动作面板", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-actionsheet.png", "properties": [ { "key": "cancelText", "type": ["String"], "desc": "设置取消按钮的文本", "label": "" }, { "key": "count", "type": ["Number"], "desc": "设置每页展示菜单的数量，仅当 type=grid 时有效", "label": "" }, { "key": "items", "type": ["Array"], "desc": "菜单项", "label": "" }, { "key": "showCancel", "type": ["Boolean"], "desc": "是否显示取消按钮", "label": "" }, { "key": "theme", "type": ["String"], "desc": "展示类型，列表和表格形式展示", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "显示与隐藏", "label": "" } ], "events": [ { "key": "bind:cancel", "desc": "点击取消按钮时触发", "label": "" }, { "key": "bind:close", "desc": "关闭时触发", "label": "" }, { "key": "bind:selected", "desc": "选择菜单项时触发", "label": "" } ], "tpl": "<t-action-sheet id=\"t-action-sheet-imperative\" visible=\"{{false}}\"></t-action-sheet>", "path": "./action-sheet/action-sheet" }, "t-avatar-group": { "key": "t-avatar-group", "label": "头像组", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-avatar.png", "properties": [ { "key": "cascading", "type": ["String"], "desc": "图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上", "label": "" }, { "key": "collapseAvatar", "type": ["String"], "desc": "头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`", "label": "" }, { "key": "max", "type": ["Number"], "desc": "能够同时显示的最多头像数量", "label": "" }, { "key": "size", "type": ["String"], "desc": "尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size", "label": "" } ], "externalClasses": ["t-class", "t-class-image", "t-class-content"], "tpl": "<t-avatar-group max=\"2\" collapseAvatar=\"+5\"><t-avatar wx:for=\"{{['https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/1.png','https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/2.png','https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/avatar/avatar-v2/3.png']}}\" wx:key=\"index\" image=\"{{item}}\" style=\"margin-right: -16rpx\" /></t-avatar-group>", "require": { "t-avatar": "./avatar/avatar" }, "path": "./avatar/avatar-group" }, "t-avatar": { "key": "t-avatar", "label": "头像", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-avatar.png", "properties": [ { "key": "alt", "type": ["String"], "desc": "头像替换文本，仅当图片加载失败时有效", "label": "" }, { "key": "badgeProps", "type": ["Object"], "desc": "头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字", "label": "" }, { "key": "hideOnLoadFailed", "type": ["Boolean"], "desc": "加载失败时隐藏图片", "label": "" }, { "key": "icon", "type": ["String"], "desc": "图标", "label": "" }, { "key": "image", "type": ["String"], "desc": "图片地址", "label": "" }, { "key": "shape", "type": ["String"], "desc": "形状", "label": "" }, { "key": "size", "type": ["String"], "desc": "尺寸，示例值：small/medium/large/24px/38px 等，默认为 large", "label": "" } ], "externalClasses": ["t-class"], "events": [ { "key": "bind:error", "desc": "图片加载失败时触发", "label": "" } ], "tpl": "<t-avatar icon=\"user\" alt=\"avatar\"/>", "path": "./avatar/avatar" }, "t-back-top": { "key": "t-back-top", "label": "回到顶部", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-backtop.png", "properties": [ { "key": "fixed", "type": ["Boolean"], "desc": "是否绝对定位固定到屏幕右下方", "label": "" }, { "key": "icon", "type": ["String"], "desc": "图标", "label": "" }, { "key": "text", "type": ["String"], "desc": "文案", "label": "" }, { "key": "theme", "type": ["String"], "desc": "预设的样式类型", "label": "" } ], "externalClasses": ["t-class", "t-class-icon", "t-class-text"], "events": [ { "key": "bind:to-top", "desc": "点击触发", "label": "" } ], "tpl": "<t-back-top />", "path": "./back-top/back-top" }, "t-badge": { "key": "t-badge", "label": "徽标数", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-badge.png", "properties": [ { "key": "color", "type": ["String"], "desc": "颜色", "label": "" }, { "key": "content", "type": ["String"], "desc": "徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义", "label": "" }, { "key": "count", "type": ["String", "Number"], "desc": "徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染", "label": "" }, { "key": "dot", "type": ["Boolean"], "desc": "是否为红点", "label": "" }, { "key": "maxCount", "type": ["Number"], "desc": "封顶的数字值", "label": "" }, { "key": "offset", "type": ["Array"], "desc": "设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']", "label": "" }, { "key": "shape", "type": ["String"], "desc": "形状", "label": "" }, { "key": "showZero", "type": ["Boolean"], "desc": "当数值为 0 时，是否展示徽标", "label": "" }, { "key": "size", "type": ["String"], "desc": "尺寸", "label": "" } ], "externalClasses": ["t-class", "t-class-content", "t-class-count"], "tpl": "<t-badge content=\"消息\" dot />", "path": "./badge/badge" }, "t-button": { "key": "t-button", "label": "按钮", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-button.png", "properties": [ { "key": "block", "type": ["Boolean"], "desc": "是否为块级元素", "label": "" }, { "key": "content", "type": ["String"], "desc": "按钮内容", "label": "" }, { "key": "customDataset", "type": ["Object"], "desc": "自定义 dataset，可通过 event.currentTarget.dataset.custom 获取", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用按钮", "label": "" }, { "key": "ghost", "type": ["Boolean"], "desc": "是否为幽灵按钮（镂空按钮）", "label": "" }, { "key": "icon", "type": ["String"], "desc": "图标名称", "label": "" }, { "key": "loading", "type": ["Boolean"], "desc": "是否显示为加载状态", "label": "" }, { "key": "shape", "type": ["String"], "desc": "按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形", "label": "" }, { "key": "size", "type": ["String"], "desc": "组件尺寸", "label": "" }, { "key": "theme", "type": ["String"], "desc": "组件风格，依次为品牌色、危险色", "label": "" }, { "key": "type", "type": ["String"], "desc": "同小程序的 formType", "label": "" }, { "key": "variant", "type": ["String"], "desc": "按钮形式，基础、线框、文字", "label": "" } ], "externalClasses": ["t-class", "t-class-icon"], "events": [ { "key": "bind:click", "desc": "点击时触发", "label": "" } ], "tpl": "<t-button theme=\"primary\" block content=\"强按钮\"></t-button>", "path": "./button/button" }, "t-cell-group": { "key": "t-cell-group", "label": "单元格组", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-cell.png", "properties": [ { "key": "bordered", "type": ["Boolean"], "desc": "是否显示组边框", "label": "" }, { "key": "title", "type": ["String"], "desc": "单元格组标题", "label": "" } ], "externalClasses": ["t-class"], "tpl": "<t-cell-group title=\"01 基础用法\"><t-cell title=\"单行标题\" required /><t-cell title=\"单行标题\" hover note=\"辅助信息\" /><t-cell title=\"单行标题\" hover arrow /><t-cell title=\"单行标题\" hover note=\"辅助信息\" arrow /></t-cell-group>", "require": { "t-cell": "./cell/cell" }, "path": "./cell-group/cell-group" }, "t-cell": { "key": "t-cell", "label": "单元格", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-cell.png", "properties": [ { "key": "align", "type": ["String"], "desc": "内容的对齐方式，默认居中对齐", "label": "" }, { "key": "arrow", "type": ["Boolean"], "desc": "是否显示右侧箭头", "label": "" }, { "key": "bordered", "type": ["Boolean"], "desc": "是否显示下边框", "label": "" }, { "key": "description", "type": ["String"], "desc": "下方内容描述", "label": "" }, { "key": "hover", "type": ["Boolean"], "desc": "是否开启点击反馈", "label": "" }, { "key": "image", "type": ["String"], "desc": "主图", "label": "" }, { "key": "jumpType", "type": ["String"], "desc": "链接跳转类型", "label": "" }, { "key": "leftIcon", "type": ["String"], "desc": "左侧图标，出现在单元格标题的左侧", "label": "" }, { "key": "note", "type": ["String"], "desc": "和标题同行的说明文字", "label": "" }, { "key": "required", "type": ["Boolean"], "desc": "是否显示表单必填星号", "label": "" }, { "key": "rightIcon", "type": ["String"], "desc": "最右侧图标", "label": "" }, { "key": "title", "type": ["String"], "desc": "标题", "label": "" }, { "key": "url", "type": ["String"], "desc": "点击后跳转链接地址。如果值为空，则表示不需要跳转", "label": "" } ], "externalClasses": [ "t-class", "t-class-title", "t-class-note", "t-class-description", "t-class-thumb", "t-class-hover", "t-class-left", "t-class-right" ], "events": [ { "key": "bind:click", "desc": "右侧内容", "label": "" } ], "tpl": "<t-cell title=\"单行标题\" hover />", "path": "./cell/cell" }, "t-check-tag": { "key": "t-check-tag", "label": "可选标签", "icon": "", "properties": [ { "key": "checked", "type": ["Boolean"], "desc": "标签选中的状态，默认风格（theme=default）才有选中态", "label": "" }, { "key": "closable", "type": ["Boolean"], "desc": "标签是否可关闭", "label": "" }, { "key": "content", "type": ["String", "Number"], "desc": "组件子元素", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态", "label": "" }, { "key": "icon", "type": ["String"], "desc": "标签中的图标，可自定义图标呈现", "label": "" }, { "key": "shape", "type": ["String"], "desc": "标签类型，有三种：方形、圆角方形、标记型", "label": "" }, { "key": "size", "type": ["String"], "desc": "标签尺寸", "label": "" } ], "events": [ { "key": "bind:change", "desc": "组件子元素", "label": "" }, { "key": "bind:click", "desc": "点击标签时触发", "label": "" } ], "tpl": "<t-check-tag>check tag</t-check-tag>", "path": "./check-tag/check-tag" }, "t-checkbox-group": { "key": "t-checkbox-group", "label": "多选框组", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-checkbox.png", "properties": [ { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用组件", "label": "" }, { "key": "max", "type": ["Number"], "desc": "支持最多选中的数量", "label": "" }, { "key": "name", "type": ["String"], "desc": "统一设置内部复选框 HTML 属性", "label": "" }, { "key": "options", "type": ["Array"], "desc": "以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」", "label": "" }, { "key": "value", "type": ["Array"], "desc": "选中值", "label": "" } ], "events": [ { "key": "bind:change", "desc": "值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项", "label": "" } ], "tpl": "<t-checkbox-group value=\"{{['checkbox1']}}\"><t-checkbox value=\"checkbox1\" label=\"多选\" /><t-checkbox value=\"checkbox2\" label=\"多选\" /><t-checkbox value=\"checkbox3\" label=\"多选\" /></t-checkbox-group>", "require": { "t-checkbox": "./checkbox/checkbox" }, "path": "./checkbox-group/checkbox-group" }, "t-checkbox": { "key": "t-checkbox", "label": "多选框", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-checkbox.png", "properties": [ { "key": "align", "type": ["String"], "desc": "多选框和内容相对位置", "label": "" }, { "key": "checkAll", "type": ["Boolean"], "desc": "用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用", "label": "" }, { "key": "checked", "type": ["Boolean"], "desc": "是否选中", "label": "" }, { "key": "color", "type": ["String"], "desc": "多选框颜色", "label": "" }, { "key": "content", "type": ["String"], "desc": "多选框内容", "label": "" }, { "key": "contentDisabled", "type": ["Boolean"], "desc": "是否禁用组件内容（content）触发选中", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用组件", "label": "" }, { "key": "icon", "type": ["Array"], "desc": "自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]", "label": "" }, { "key": "indeterminate", "type": ["Boolean"], "desc": "是否为半选", "label": "" }, { "key": "label", "type": ["String"], "desc": "主文案", "label": "" }, { "key": "maxContentRow", "type": ["Number"], "desc": "内容最大行数限制", "label": "" }, { "key": "maxLabelRow", "type": ["Number"], "desc": "主文案最大行数限制", "label": "" }, { "key": "name", "type": ["String"], "desc": "HTML 元素原生属性", "label": "" }, { "key": "readonly", "type": ["Boolean"], "desc": "只读状态", "label": "" }, { "key": "value", "type": ["String", "Number"], "desc": "多选框的值", "label": "" } ], "externalClasses": ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"], "events": [ { "key": "bind:change", "desc": "值变化时触发", "label": "" } ], "tpl": "<t-checkbox label=\"多选框\" checked=\"{{true}}\"></t-checkbox>", "path": "./checkbox/checkbox" }, "t-collapse-panel": { "key": "t-collapse-panel", "label": "折叠面板", "icon": "", "properties": [ { "key": "content", "type": ["String"], "desc": "折叠面板内容", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "禁止当前面板展开，优先级大于 Collapse 的同名属性", "label": "" }, { "key": "expandIcon", "type": ["Boolean"], "desc": "当前折叠面板展开图标，优先级大于 Collapse 的同名属性", "label": "" }, { "key": "header", "type": ["String"], "desc": "面板头内容", "label": "" }, { "key": "headerRightContent", "type": ["String"], "desc": "面板头的右侧区域，一般用于呈现面板操作", "label": "" }, { "key": "value", "type": ["String", "Number"], "desc": "当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识", "label": "" } ], "tpl": "<t-collapse-panel header=\"折叠面板标题\" value=\"{{0}}\">此处可自定义内容</t-collapse-panel>", "path": "./collapse/collapse-panel" }, "t-collapse": { "key": "t-collapse", "label": "折叠", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-collapse.png", "properties": [ { "key": "defaultExpandAll", "type": ["Boolean"], "desc": "默认是否展开全部", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用面板展开/收起操作", "label": "" }, { "key": "expandIcon", "type": ["Boolean"], "desc": "展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标", "label": "" }, { "key": "expandMutex", "type": ["Boolean"], "desc": "每个面板互斥展开，每次只展开一个面板", "label": "" }, { "key": "value", "type": ["Array"], "desc": "展开的面板集合", "label": "" } ], "events": [ { "key": "bind:change", "desc": "切换面板时触发，返回变化的值", "label": "" } ], "tpl": "<t-collapse value=\"{{[0]}}\"><t-collapse-panel header=\"折叠面板标题\" value=\"{{0}}\">此处可自定义内容</t-collapse-panel></t-collapse>", "require": { "t-collapse-panel": "./collapse/collapse-panel" }, "path": "./collapse/collapse" }, "t-date-time-picker": { "key": "t-date-time-picker", "label": "日期时间选择器", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-datetimepicker.png", "properties": [ { "key": "cancelBtn", "type": ["String"], "desc": "取消按钮文字", "label": "" }, { "key": "confirmBtn", "type": ["String"], "desc": "确定按钮文字", "label": "" }, { "key": "end", "type": ["String", "Number"], "desc": "选择器的结束时间", "label": "" }, { "key": "footer", "type": ["String"], "desc": "底部内容", "label": "" }, { "key": "format", "type": ["String"], "desc": "用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format)", "label": "" }, { "key": "header", "type": ["Boolean"], "desc": "头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容", "label": "" }, { "key": "mode", "type": ["String", "Array"], "desc": "选择器模式，用于表示可以选择到哪一个层级。【示例一】year 或者 ['year'] 表示纯日期选择器，只能选择到年份，只显示年份。【示例二】'hour' 或 ['hour'] 表示纯时间选择器，只能选择到小时维度。【示例三】['year', 'month', 'date', 'hour', 'minute'] 表示，日期和时间混合选择器，可以选择到具体哪一分钟，显示全部时间：年/月/日/时/分", "label": "" }, { "key": "showWeek", "type": ["Boolean"], "desc": "【开发中】是否在日期旁边显示周几（如周一，周二，周日等）", "label": "" }, { "key": "start", "type": ["String", "Number"], "desc": "选择器的开始时间", "label": "" }, { "key": "title", "type": ["String"], "desc": "标题", "label": "" }, { "key": "value", "type": ["String", "Number"], "desc": "选中值", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "是否显示", "label": "" } ], "externalClasses": ["t-class", "t-class-confirm", "t-class-cancel", "t-class-title"], "events": [ { "key": "bind:cancel", "desc": "取消按钮点击时触发", "label": "" }, { "key": "bind:change", "desc": "选中值发生变化时触发", "label": "" }, { "key": "bind:column-change", "desc": "每一列选中数据变化时触发", "label": "" }, { "key": "bind:confirm", "desc": "确认按钮点击时触发", "label": "" } ], "tpl": "<t-date-time-picker title=\"选择日期\" visible=\"{{true}}\" mode=\"{{['date']}}\" format=\"YYYY-MM-DD\"></t-date-time-picker>", "path": "./date-time-picker/date-time-picker" }, "t-dialog": { "key": "t-dialog", "label": "对话框", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dialog.png", "properties": [ { "key": "actions", "type": ["Array"], "desc": "操作栏", "label": "" }, { "key": "buttonLayout", "type": ["String"], "desc": "多按钮排列方式", "label": "" }, { "key": "cancelBtn", "type": ["String", "Object"], "desc": "取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件", "label": "" }, { "key": "closeOnOverlayClick", "type": ["Boolean"], "desc": "点击蒙层时是否触发关闭事件", "label": "" }, { "key": "confirmBtn", "type": ["String", "Object"], "desc": "确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件", "label": "" }, { "key": "content", "type": ["String"], "desc": "内容", "label": "" }, { "key": "preventScrollThrough", "type": ["Boolean"], "desc": "防止滚动穿透", "label": "" }, { "key": "showInAttachedElement", "type": ["Boolean"], "desc": "【开发中】仅在挂载元素中显示抽屉，默认在浏览器可视区域显示。父元素需要有定位属性，如：position: relative", "label": "" }, { "key": "showOverlay", "type": ["Boolean"], "desc": "是否显示遮罩层", "label": "" }, { "key": "title", "type": ["String"], "desc": "标题", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "控制对话框是否显示", "label": "" }, { "key": "zIndex", "type": ["Number"], "desc": "对话框层级，Web 侧样式默认为 2500，移动端和小程序样式默认为 1500", "label": "" } ], "externalClasses": ["t-class", "t-class-content", "t-class-confirm", "t-class-cancel"], "events": [ { "key": "bind:cancel", "desc": "如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件", "label": "" }, { "key": "bind:close", "desc": "关闭事件，点击取消按钮或点击蒙层时触发", "label": "" }, { "key": "bind:overlay-click", "desc": "如果蒙层存在，点击蒙层时触发", "label": "" } ], "tpl": "<t-dialog visible=\"{{true}}\" title=\"对话框标题\" content=\"告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内\" confirm-btn=\"我知道了\" />", "path": "./dialog/dialog" }, "t-divider": { "key": "t-divider", "label": "分割线", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-divider.png", "properties": [ { "key": "align", "type": ["String"], "desc": "文本位置（仅在水平分割线有效）", "label": "" }, { "key": "content", "type": ["String"], "desc": "子元素", "label": "" }, { "key": "dashed", "type": ["Boolean"], "desc": "是否虚线（仅在水平分割线有效）", "label": "" }, { "key": "layout", "type": ["String"], "desc": "分隔线类型有两种：水平和垂直", "label": "" }, { "key": "lineColor", "type": ["String"], "desc": "分隔线颜色", "label": "" } ], "externalClasses": ["t-class", "t-class-line", "t-class-content"], "tpl": "<t-divider />", "path": "./divider/divider" }, "t-drawer": { "key": "t-drawer", "label": "模态抽屉", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-drawer.png", "properties": [ { "key": "closeOnOverlayClick", "type": ["Boolean"], "desc": "点击蒙层时是否触发抽屉关闭事件", "label": "" }, { "key": "destroyOnClose", "type": ["Boolean"], "desc": "抽屉关闭时是否销毁节点", "label": "" }, { "key": "items", "type": ["Array"], "desc": "抽屉里的列表项", "label": "" }, { "key": "placement", "type": ["String"], "desc": "抽屉方向", "label": "" }, { "key": "showOverlay", "type": ["Boolean"], "desc": "是否显示遮罩层", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "组件是否可见", "label": "" }, { "key": "zIndex", "type": ["Number"], "desc": "抽屉层级，样式默认为 1500", "label": "" } ], "events": [ { "key": "bind:close", "desc": "关闭事件，取消按钮点击时、关闭按钮点击时、点击蒙层时均会触发", "label": "" }, { "key": "bind:item-click", "desc": "点击抽屉里的列表项", "label": "" }, { "key": "bind:overlay-click", "desc": "如果蒙层存在，点击蒙层时触发", "label": "" } ], "tpl": "<t-drawer visible=\"{{true}}\" placement=\"left\" items=\"{{[{title: '菜单一'},{title: '菜单二'}]}}\"></t-drawer>", "path": "./drawer/drawer" }, "t-dropdown-item": { "key": "t-dropdown-item", "label": "下拉菜单子项", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu.png", "properties": [ { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用", "label": "" }, { "key": "label", "type": ["String"], "desc": "标题", "label": "" }, { "key": "multiple", "type": ["Boolean"], "desc": "是否多选", "label": "" }, { "key": "options", "type": ["Array"], "desc": "选项数据", "label": "" } ], "tpl": "<t-dropdown-item label=\"菜单\" options=\"{{[{label:'选项一',value:'option_1',disabled:false},{label:'选项二',value:'option_2',disabled:false},{label:'选项三',value:'option_3',disabled:false}]}}\" defaultValue=\"option_3\" /><t-dropdown-item label=\"菜单\" options=\"{{[{label:'选项一',value:'option_1',disabled:false},{label:'选项二',value:'option_2',disabled:false},{label:'选项三',value:'option_3',disabled:false}]}}\" defaultValue=\"option_3\" />", "path": "./dropdown-menu/dropdown-item" }, "t-dropdown-menu": { "key": "t-dropdown-menu", "label": "下拉菜单", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-dropdownmenu.png", "properties": [ { "key": "activeColor", "type": ["String"], "desc": "【讨论中】菜单标题和选项的选中态颜色", "label": "" }, { "key": "closeOnClickOverlay", "type": ["Boolean"], "desc": "是否在点击遮罩层后关闭菜单", "label": "" }, { "key": "duration", "type": ["String", "Number"], "desc": "动画时长", "label": "" }, { "key": "showOverlay", "type": ["Boolean"], "desc": "是否显示遮罩层", "label": "" }, { "key": "zIndex", "type": ["Number"], "desc": "菜单栏 z-index 层级", "label": "" } ], "tpl": "<t-dropdown-menu><t-dropdown-item label=\"菜单\" options=\"{{[{label:'选项一',value:'option_1',disabled:false},{label:'选项二',value:'option_2',disabled:false},{label:'选项三',value:'option_3',disabled:false}]}}\" defaultValue=\"option_3\" /><t-dropdown-item label=\"菜单\" options=\"{{[{label:'选项一',value:'option_1',disabled:false},{label:'选项二',value:'option_2',disabled:false},{label:'选项三',value:'option_3',disabled:false}]}}\" defaultValue=\"option_3\" /></t-dropdown-menu>", "require": { "t-dropdown-item": "./dropdown-menu/dropdown-item" }, "path": "./dropdown-menu/dropdown-menu" }, "t-empty": { "key": "t-empty", "label": "空状态", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-empty.png", "properties": [ { "key": "action", "type": ["String"], "desc": "操作按钮", "label": "" }, { "key": "description", "type": ["String"], "desc": "描述文字", "label": "" }, { "key": "icon", "type": ["String"], "desc": "图标名称", "label": "" }, { "key": "image", "type": ["String"], "desc": "图片地址", "label": "" } ], "externalClasses": ["t-class", "t-class-description", "t-class-image", "t-class-actions"], "tpl": "<t-empty icon=\"info-circle-filled\" />", "path": "./empty/empty" }, "t-fab": { "key": "t-fab", "label": "悬浮按钮", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-fab.png", "properties": [ { "key": "buttonProps", "type": ["Object"], "desc": "透传至 Button 组件", "label": "" }, { "key": "icon", "type": ["String"], "desc": "图标", "label": "" }, { "key": "style", "type": ["String"], "desc": "悬浮按钮的样式，常用于调整位置", "label": "" }, { "key": "text", "type": ["String"], "desc": "文本内容", "label": "" } ], "events": [ { "key": "bind:click", "desc": "悬浮按钮点击事件", "label": "" } ], "tpl": "<t-fab icon=\"add\" />", "path": "./fab/fab" }, "t-footer": { "key": "t-footer", "label": "布局-底部内容", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-footer.png", "properties": [ { "key": "copyright", "type": ["String"], "desc": "版权信息，type 为`text`生效", "label": "" }, { "key": "logo", "type": ["Object"], "desc": "图标配置，type 为`logo`生效。`logo.icon` 表示图标链接地址，`logo.title` 表示标题文本，`logo.url` 表示链接跳转地址", "label": "" }, { "key": "textLinkList", "type": ["Array"], "desc": "链接列表，type 为`text`生效。name 表示链接名称， url 表示链接 page 路径，目前只支持小程序内部跳转，openType 表示跳转方式", "label": "" }, { "key": "theme", "type": ["String"], "desc": "页脚展示类型", "label": "" } ], "tpl": "<t-footer theme=\"text\" copyright=\"Copyright © 2021-2031 TD.All Rights Reserved.\" />", "path": "./footer/footer" }, "t-grid-item": { "key": "t-grid-item", "label": "宫格子项", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-grid.png", "properties": [ { "key": "badgeProps", "type": ["Object"], "desc": "头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字", "label": "" }, { "key": "description", "type": ["String"], "desc": "文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点", "label": "" }, { "key": "image", "type": ["String"], "desc": "图片，可以是图片地址，也可以自定义图片节点", "label": "" }, { "key": "jumpType", "type": ["String"], "desc": "链接跳转类型", "label": "" }, { "key": "layout", "type": ["String"], "desc": "内容布局方式", "label": "" }, { "key": "text", "type": ["String"], "desc": "文本，可以通过 Props 传入文本，也可以自定义标题节点", "label": "" }, { "key": "url", "type": ["String"], "desc": "点击后的跳转链接", "label": "" } ], "externalClasses": ["t-class", "t-class-image", "t-class-text", "t-class-description"], "tpl": "<t-grid-item text=\"标题文字\"><image style=\"width: 96rpx; height: 96rpx\" src=\"https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png\" slot=\"image\" /></t-grid-item>", "path": "./grid-item/grid-item" }, "t-grid": { "key": "t-grid", "label": "栅格", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-grid.png", "properties": [ { "key": "align", "type": ["String"], "desc": "内容对齐方式", "label": "" }, { "key": "border", "type": ["Boolean", "Object"], "desc": "边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式", "label": "" }, { "key": "column", "type": ["Number"], "desc": "每一行的列数量", "label": "" }, { "key": "gutter", "type": ["Number"], "desc": "间隔大小", "label": "" }, { "key": "hover", "type": ["Boolean"], "desc": "是否开启点击反馈", "label": "" } ], "externalClasses": ["t-class"], "tpl": "<t-grid column=\"{{2}}\"><t-grid-item text=\"标题文字\"><image style=\"width: 96rpx; height: 96rpx\" src=\"https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png\" slot=\"image\" /></t-grid-item><t-grid-item text=\"标题文字\"><image style=\"width: 96rpx; height: 96rpx\" src=\"https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png\" slot=\"image\" /></t-grid-item></t-grid>", "require": { "t-grid-item": "./grid-item/grid-item" }, "path": "./grid/grid" }, "t-icon": { "key": "t-icon", "label": "图标", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-icon.png", "properties": [ { "key": "classPrefix", "type": ["String"], "desc": "自定义icon前缀", "label": "" }, { "key": "color", "type": ["String"], "desc": "图标颜色", "label": "" }, { "key": "style", "type": ["String"], "desc": "自定义样式", "label": "" }, { "key": "name", "type": ["String"], "desc": "图标名称", "label": "" }, { "key": "size", "type": ["String", "Number"], "desc": "图标名称", "label": "" } ], "tpl": "<t-icon name=\"add-circle\" />", "path": "./icon/icon" }, "t-image": { "key": "t-image", "label": "图片", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-image.png", "properties": [ { "key": "error", "type": ["String"], "desc": "加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”", "label": "" }, { "key": "lazy", "type": ["Boolean"], "desc": "是否开启图片懒加载", "label": "" }, { "key": "loading", "type": ["String"], "desc": "加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”", "label": "" }, { "key": "shape", "type": ["String"], "desc": "图片圆角类型", "label": "" }, { "key": "src", "type": ["String"], "desc": "图片链接", "label": "" } ], "externalClasses": ["t-class", "t-class-load"], "events": [ { "key": "bind:error", "desc": "图片加载失败时触发", "label": "" }, { "key": "bind:load", "desc": "图片加载完成时触发", "label": "" } ], "tpl": "<t-image src=\"https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png\" mode=\"aspectFill\"></t-image>", "path": "./image/image" }, "t-indexes": { "key": "t-indexes", "label": "索引", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-indexes.png", "properties": [ { "key": "height", "type": ["Number"], "desc": "列表高度，未设置默认占满设备高度", "label": "" }, { "key": "list", "type": ["Array"], "desc": "索引列表的列表数据。每个元素包含三个子元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。", "label": "" }, { "key": "sticky", "type": ["Boolean"], "desc": "索引是否吸顶，默认为true", "label": "" } ], "events": [ { "key": "bind:select", "desc": "点击行元素时触发事件", "label": "" } ], "tpl": "<t-indexes id=\"bar\" list=\"{{ [{ title: 'A开头', index: 'A', children: [{ title: '阿坝' }]},{ title: 'B开头', index: 'B', children: [{ title: '北京' }]}] }}\" />", "path": "./indexes/indexes" }, "t-input": { "key": "t-input", "label": "输入框", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-input.png", "properties": [ { "key": "align", "type": ["String"], "desc": "文本内容位置，居左/居中/居右", "label": "" }, { "key": "borderless", "type": ["Boolean"], "desc": "【讨论中】是否开启无边框模式", "label": "" }, { "key": "clearable", "type": ["Boolean"], "desc": "是否可清空", "label": "" }, { "key": "disabled", "type": ["Boolean"], "desc": "是否禁用输入框", "label": "" }, { "key": "errorMessage", "type": ["String"], "desc": "错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips）", "label": "" }, { "key": "format", "type": ["String"], "desc": "【开发中】指定输入框展示值的格式", "label": "" }, { "key": "label", "type": ["String"], "desc": "左侧文本", "label": "" }, { "key": "maxcharacter", "type": ["Number"], "desc": "用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用", "label": "" }, { "key": "maxlength", "type": ["Number"], "desc": "用户最多可以输入的文本长度，一个中文等于一个计数长度。值小于等于 0 的时候，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用", "label": "" }, { "key": "placeholder", "type": ["String"], "desc": "占位符", "label": "" }, { "key": "prefixIcon", "type": ["String"], "desc": "组件前置图标，值为字符串则表示图标名称", "label": "" }, { "key": "readonly", "type": ["Boolean"], "desc": "只读状态", "label": "" }, { "key": "size", "type": ["String"], "desc": "输入框尺寸", "label": "" }, { "key": "status", "type": ["String"], "desc": "输入框状态", "label": "" }, { "key": "suffix", "type": ["String"], "desc": "后置图标前的后置内容", "label": "" }, { "key": "suffixIcon", "type": ["String"], "desc": "后置文本内容，值为字符串则表示图标名称", "label": "" }, { "key": "tips", "type": ["String"], "desc": "输入框下方提示文本，会根据不同的 `status` 呈现不同的样式", "label": "" }, { "key": "value", "type": ["String", "Number"], "desc": "输入框的值", "label": "" } ], "externalClasses": ["t-class", "t-class-input", "t-class-placeholder", "t-class-error-msg"], "events": [ { "key": "bind:blur", "desc": "失去焦点时触发", "label": "" }, { "key": "bind:change", "desc": "输入框值发生变化时触发", "label": "" }, { "key": "bind:clear", "desc": "清空按钮点击时触发", "label": "" }, { "key": "bind:enter", "desc": "回车键按下时触发", "label": "" }, { "key": "bind:focus", "desc": "获得焦点时触发", "label": "" } ], "tpl": "<t-input placeholder=\"请输入文字\" />", "path": "./input/input" }, "t-loading": { "key": "t-loading", "label": "加载中", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-loading.png", "properties": [ { "key": "delay", "type": ["Number"], "desc": "延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒", "label": "" }, { "key": "duration", "type": ["Number"], "desc": "加载动画执行完成一次的时间，单位：毫秒", "label": "" }, { "key": "indicator", "type": ["Boolean"], "desc": "是否显示加载指示符", "label": "" }, { "key": "inheritColor", "type": ["Boolean"], "desc": "是否继承父元素颜色", "label": "" }, { "key": "layout", "type": ["String"], "desc": "对齐方式", "label": "" }, { "key": "loading", "type": ["Boolean"], "desc": "是否处于加载状态", "label": "" }, { "key": "pause", "type": ["Boolean"], "desc": "是否暂停动画", "label": "" }, { "key": "progress", "type": ["Number"], "desc": "加载进度", "label": "" }, { "key": "reverse", "type": ["Boolean"], "desc": "加载动画是否反向", "label": "" }, { "key": "size", "type": ["String"], "desc": "尺寸，示例：40rpx/20px", "label": "" }, { "key": "text", "type": ["String"], "desc": "加载提示文案", "label": "" }, { "key": "theme", "type": ["String"], "desc": "加载组件类型", "label": "" } ], "externalClasses": ["t-class", "t-class-text", "t-class-indicator"], "tpl": "<t-loading theme=\"circular\" size=\"40rpx\"></t-loading>", "path": "./loading/loading" }, "t-message": { "key": "t-message", "label": "全局提醒", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-message.png", "properties": [ { "key": "action", "type": ["String"], "desc": "操作", "label": "" }, { "key": "align", "type": ["String"], "desc": "文本对齐方式", "label": "" }, { "key": "closeBtn", "type": ["String", "Boolean"], "desc": "关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮", "label": "" }, { "key": "content", "type": ["String"], "desc": "用于自定义消息弹出内容", "label": "" }, { "key": "duration", "type": ["Number"], "desc": "消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。", "label": "" }, { "key": "icon", "type": ["String", "Boolean"], "desc": "消息提醒前面的图标。值为 true 则根据 theme 显示对应的图标，值为 false 则不显示图标。值为 'info' 或 'bell' 则显示组件内置图标。也可以完全自定义图标节点", "label": "" }, { "key": "marquee", "type": ["Boolean", "Object"], "desc": "跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放", "label": "" }, { "key": "offset", "type": ["Array"], "desc": "相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']", "label": "" }, { "key": "theme", "type": ["String"], "desc": "消息组件风格", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "是否显示，隐藏时默认销毁组件", "label": "" }, { "key": "zIndex", "type": ["Number"], "desc": "元素层级，样式默认为 5000", "label": "" } ], "externalClasses": ["t-class", "t-class-content", "t-class-icon", "t-class-action", "t-class-close-btn"], "events": [ { "key": "bind:action-btn-click", "desc": "当操作按钮存在时，用户点击操作按钮时触发", "label": "" }, { "key": "bind:close-btn-click", "desc": "当关闭按钮存在时，用户点击关闭按钮触发", "label": "" }, { "key": "bind:duration-end", "desc": "计时结束后触发", "label": "" } ], "tpl": "<t-message id=\"t-message\" />", "path": "./message/message" }, "t-navbar": { "key": "t-navbar", "label": "导航条", "icon": "https://tdesign.gtimg.com/site/miniprogram-doc/doc-navbar.png", "properties": [ { "key": "animation", "type": ["Boolean"], "desc": "是否添加动画效果", "label": "" }, { "key": "background", "type": ["String"], "desc": "背景", "label": "" }, { "key": "delta", "type": ["Number"], "desc": "后退按钮后退层数，含义参考 [wx.navigateBack](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html)，特殊的，传入 0 不会发生执行 wx.navigateBack，只会触发一个 goback 事件供自行处理。", "label": "" }, { "key": "fixed", "type": ["Boolean"], "desc": "是否固定在顶部", "label": "" }, { "key": "homeIcon", "type": ["String"], "desc": "首页图标地址。值为 '' 或者 undefiend 则表示不显示返回图标，值为 'circle' 表示显示默认图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址", "label": "" }, { "key": "leftIcon", "type": ["String"], "desc": "左侧图标地址，值为 '' 或者 undefiend 则表示不显示返回图标，值为 'arrow-left' 表示显示返回图标，值为 'slot' 表示使用插槽渲染，值为其他则表示图标地址", "label": "" }, { "key": "title", "type": ["String"], "desc": "页面标题", "label": "" }, { "key": "titleMaxLength", "type": ["Number"], "desc": "标题文字最大长度，超出的范围使用 `...` 表示", "label": "" }, { "key": "visible", "type": ["Boolean"], "desc": "是否显示", "label": "" } ],