Skip to content

Commit c0d473f

Browse files
anlyyaoanlyyao
authored
feat: add information tips to all sample pages (#3398)
* feat: add information tips to all sample pages * test: update snapshots
1 parent d81f95a commit c0d473f

File tree

64 files changed

+265
-143
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+265
-143
lines changed

‎example/app.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"themeLocation": "theme.json",
141141
"usingComponents": {
142142
"t-demo": "./components/demo-block/index",
143+
"t-demo-header": "./components/demo-header/index",
143144
"t-button": "tdesign-miniprogram/button/button",
144145
"t-icon": "tdesign-miniprogram/icon/icon",
145146
"t-navbar": "tdesign-miniprogram/navbar/navbar"

‎example/components/demo-header/index.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"component": true,
3+
"styleIsolation": "apply-shared",
4+
"usingComponents": {
5+
"t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
6+
}
7+
}

‎example/components/demo-header/index.less

Whitespace-only changes.

‎example/components/demo-header/index.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Component({
2+
options: {
3+
multipleSlots: true,
4+
},
5+
properties: {
6+
title: {
7+
type: String,
8+
},
9+
desc: {
10+
type: String,
11+
},
12+
notice: {
13+
type: String,
14+
},
15+
},
16+
});

‎example/components/demo-header/index.wxml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<block>
2+
<t-notice-bar visible content="{{notice}}" />
3+
<view class="demo-title">{{title}}</view>
4+
<view class="demo-desc">
5+
{{desc}}
6+
<slot name="desc" />
7+
</view>
8+
</block>

‎src/action-sheet/_example/action-sheet.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="ActionSheet" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">ActionSheet 动作面板</view>
4-
<view class="demo-desc">从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。</view>
3+
<t-demo-header
4+
title="ActionSheet 动作面板"
5+
desc="从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="列表型动作面板" padding>
69
<list />
710
</t-demo>

‎src/avatar/_example/avatar.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
<t-navbar class="demo-navbar" title="Avatar" leftArrow />
33
<scroll-view scroll-y type="list" class="scroll-view">
44
<view class="demo">
5-
<view class="demo-title">Avatar 头像</view>
6-
<view class="demo-desc">用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。</view>
5+
<t-demo-header
6+
title="Avatar 头像"
7+
desc="用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。"
8+
notice="渲染框架支持情况：Skyline、WebView"
9+
/>
710
<t-demo title="01 组件类型" desc="图片头像" padding>
811
<imageAvatar />
912
</t-demo>

‎src/back-top/_example/back-top.wxml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<t-navbar class="demo-navbar" title="BackTop" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">BackTop 返回顶部</view>
4-
<view class="demo-desc"> 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。</view>
5-
3+
<t-demo-header
4+
title="BackTop 返回顶部"
5+
desc="用于当页面过长往下滑动时，帮助用户快速回到页面顶部。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
68
<t-demo title="组件类型" desc="圆形返回顶部" padding>
79
<t-button theme="primary" size="large" block variant="outline" data-source="round" bindtap="onBtnClick">
810
圆形返回顶部

‎src/badge/_example/badge.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<t-navbar title="Badge" leftArrow />
2-
<view class="demo-title">Badge 徽标</view>
3-
<view class="demo-desc">用于告知用户，该区域的状态变化或者待处理任务的数量。</view>
2+
<t-demo-header
3+
title="Badge 徽标"
4+
desc="用于告知用户，该区域的状态变化或者待处理任务的数量。"
5+
notice="渲染框架支持情况：Skyline、WebView"
6+
/>
47
<t-demo title="01 组件类型">
58
<base />
69
</t-demo>

‎src/button/_example/button.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Button" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Button 按钮</view>
4-
<view class="demo-desc">用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</view>
3+
<t-demo-header
4+
title="Button 按钮"
5+
desc="用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="基础按钮">
69
<base />
710
</t-demo>

‎src/calendar/_example/calendar.wxml

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<t-navbar title="Calendar" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Calendar 日历</view>
4-
<view class="demo-desc">按照日历形式展示数据或日期的容器</view>
5-
3+
<t-demo-header title="Calendar 日历" desc="按照日历形式展示数据或日期的容器" notice="渲染框架支持情况：WebView" />
64
<t-demo title="01 组件类型" desc="基础日历">
75
<base />
86
</t-demo>

‎src/cascader/_example/cascader.wxml

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<t-navbar title="Cascader" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Cascader 级联选择器</view>
4-
<view class="demo-desc">用于多层级数据的逐级选择。</view>
5-
3+
<t-demo-header title="Cascader 级联选择器" desc="用于多层级数据的逐级选择。" notice="渲染框架支持情况：WebView" />
64
<t-demo title="01 类型" desc="">
75
<base />
86
</t-demo>

‎src/cell/_example/cell.wxml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<t-navbar title="Cell" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Cell 单元格</view>
4-
<view class="demo-desc">用于各个类别行的信息展示。</view>
3+
<t-demo-header title="Cell 单元格" desc="用于各个类别行的信息展示。" notice="渲染框架支持情况：Skyline、WebView" />
54
<t-demo title="01 组件类型" desc="单行单元格">
65
<base />
76
</t-demo>

‎src/checkbox/_example/checkbox.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@
22
<t-navbar title="Checkbox" leftArrow />
33
<scroll-view scroll-y type="list" class="scroll-view">
44
<view class="demo">
5-
<view class="demo-title">Checkbox 多选框</view>
6-
<view class="demo-desc">用于预设的一组选项中执行多项选择，并呈现选择结果。</view>
5+
<t-demo-header
6+
title="Checkbox 多选框"
7+
desc="用于预设的一组选项中执行多项选择，并呈现选择结果。"
8+
notice="渲染框架支持情况：Skyline、WebView"
9+
/>
710
<t-demo title="01 组件类型" desc="纵向多选框">
811
<base />
912
</t-demo>

‎src/col/_example/col.wxml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<t-navbar title="Layout" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Layout 布局</view>
4-
<view class="demo-desc">
5-
以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
6-
</view>
3+
<t-demo-header
4+
title="Layout 布局"
5+
desc="以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
78
<t-demo title="01 组件类型" desc="基础用法">
89
<base />
910
</t-demo>

‎src/collapse/_example/collapse.wxml

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<t-navbar title="Collapse" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Collapse 折叠面板</view>
4-
<view class="demo-desc">可以折叠/展开的内容区域。</view>
5-
3+
<t-demo-header title="Collapse 折叠面板" desc="可以折叠/展开的内容区域。" notice="渲染框架支持情况：WebView" />
64
<t-demo title="01 组件类型" desc="基础折叠面板">
75
<base />
86
</t-demo>

‎src/color-picker/_example/color-picker.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<t-navbar class="demo-navbar" title="ColorPicker" leftArrow />
22

33
<view class="demo">
4-
<view class="demo-title">ColorPicker 颜色选择器</view>
5-
<view class="demo-desc">用于颜色选择，支持多种格式。</view>
4+
<t-demo-header
5+
title="ColorPicker 颜色选择器"
6+
desc="用于颜色选择，支持多种格式。"
7+
notice="渲染框架支持情况：WebView"
8+
/>
69
<t-demo title="01 组件类型" desc="基础颜色选择器">
710
<base />
811
</t-demo>

‎src/count-down/_example/count-down.wxml

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<t-navbar class="demo-navbar" title="CountDown" leftArrow />
2-
<view class="demo-title">CountDown 倒计时</view>
3-
<view class="demo-desc">用于实时展示倒计时数值。</view>
4-
2+
<t-demo-header title="CountDown 倒计时" desc="用于实时展示倒计时数值。" notice="渲染框架支持情况：Skyline、WebView" />
53
<t-demo padding title="01 组件类型">
64
<base />
75
</t-demo>

‎src/date-time-picker/_example/date-time-picker.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar title="DateTimePicker" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">DateTimePicker 时间选择器</view>
4-
<view class="demo-desc">用于选择一个时间点或者一个时间段。</view>
3+
<t-demo-header
4+
title="DateTimePicker 时间选择器"
5+
desc="用于选择一个时间点或者一个时间段。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="年月日选择器" />
69
<year-month-date />
710
<t-demo desc="年月选择器" />

‎src/dialog/_example/dialog.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Dialog" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Dialog 对话框</view>
4-
<view class="demo-desc">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</view>
3+
<t-demo-header
4+
title="Dialog 对话框"
5+
desc="用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="反馈类对话框" padding>
69
<base />
710
</t-demo>

‎src/divider/_example/divider.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Divider" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Divider 分割线</view>
4-
<view class="demo-desc">用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。</view>
3+
<t-demo-header
4+
title="Divider 分割线"
5+
desc="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="水平分割线">
69
<base />
710
</t-demo>

‎src/drawer/_example/drawer.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Drawer" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Drawer 抽屉</view>
4-
<view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>
3+
<t-demo-header
4+
title="Drawer 抽屉"
5+
desc="用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="基础抽屉" padding>
69
<base />
710
</t-demo>

‎src/dropdown-menu/_example/dropdown-menu.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar title="DropdownMenu" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">DropdownMenu 下拉菜单</view>
4-
<view class="demo-desc">菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。</view>
3+
<t-demo-header
4+
title="DropdownMenu 下拉菜单"
5+
desc="菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="单选下拉菜单">
69
<single />
710
</t-demo>

‎src/empty/_example/empty.wxml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<t-navbar class="demo-navbar" title="Empty" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Empty 空状态</view>
4-
<view class="demo-desc">用于空状态时的占位提示。</view>
3+
<t-demo-header title="Empty 空状态" desc="用于空状态时的占位提示。" notice="渲染框架支持情况：Skyline、WebView" />
54
<t-demo title="01 类型" desc="图标空状态">
65
<base />
76
</t-demo>

‎src/fab/_example/fab.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<t-navbar class="demo-navbar" title="Fab" leftArrow />
2-
<view class="demo-title">Fab 悬浮按钮</view>
3-
<view class="demo-desc">当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布</view>
2+
<t-demo-header
3+
title="Fab 悬浮按钮"
4+
desc="当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。"
5+
notice="渲染框架支持情况：Skyline、WebView"
6+
/>
47
<t-demo title="01 组件类型" desc="纯图标悬浮按钮">
58
<view class="wrapper">
69
<t-button theme="primary" size="large" block variant="outline" bind:tap="handleChange" data-type="base">

‎src/footer/_example/footer.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<t-navbar class="demo-navbar" title="Footer" leftArrow />
2-
<view class="demo-title">Footer 页脚</view>
3-
<view class="demo-desc">用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。</view>
2+
<t-demo-header
3+
title="Footer 页脚"
4+
desc="用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。"
5+
notice="渲染框架支持情况：Skyline、WebView"
6+
/>
47
<t-demo title="01 类型" desc="基础页脚">
58
<base />
69
</t-demo>

‎src/grid/_example/grid.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar title="Grid" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Grid 宫格</view>
4-
<view class="demo-desc">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</view>
3+
<t-demo-header
4+
title="Grid 宫格"
5+
desc="用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="基础宫格">
69
<base />
710
</t-demo>

‎src/guide/_example/guide.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
</view>
44

55
<view class="demo">
6-
<view class="demo-title">Guide 引导</view>
7-
<view class="demo-desc">逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。</view>
6+
<t-demo-header
7+
title="Guide 引导"
8+
desc="逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。"
9+
notice="渲染框架支持情况：WebView"
10+
/>
811
<t-demo title="01 组件类型" desc="基础引导" padding>
912
<view style="text-align: center">
1013
<t-button theme="primary" content="用户引导" bindtap="handleBaseClick"></t-button>

‎src/icon/_example/icon.wxml

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<t-navbar class="demo-navbar" title="Icon" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Icon 图标</view>
4-
<view class="demo-desc"
5-
>用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性</view
6-
>
3+
<t-demo-header
4+
title="Icon 图标"
5+
desc="用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
78
<t-demo title="01 基础组件图标">
89
<base />
910
</t-demo>

‎src/image-viewer/_example/image-viewer.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="ImageViewer" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">ImageViewer 图片预览</view>
4-
<view class="demo-desc">用于图片内容的缩略展示与查看。</view>
3+
<t-demo-header
4+
title="ImageViewer 图片预览"
5+
desc="用于图片内容的缩略展示与查看。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="基础图片预览" padding>
69
<base />
710
</t-demo>

‎src/image/_example/image.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Image" leftArrow />
22
<view class="demo">
3-
<view class="demo-title">Image 图片</view>
4-
<view class="demo-desc">用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。</view>
3+
<t-demo-header
4+
title="Image 图片"
5+
desc="用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。"
6+
notice="渲染框架支持情况：Skyline、WebView"
7+
/>
58
<t-demo title="01 组件类型">
69
<base />
710
</t-demo>

‎src/indexes/_example/indexes.wxml

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<t-navbar class="demo-navbar" title="Indexes" leftArrow />
22
<view class="indexes">
3-
<view class="demo-title">Indexes 索引</view>
4-
<view class="demo-desc">用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。</view>
3+
<t-demo-header
4+
title="Indexes 索引"
5+
desc="用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。"
6+
notice="渲染框架支持情况：WebView"
7+
/>
58
<t-demo title="01 组件类型" desc="基础索引类型" padding>
69
<t-button variant="outline" theme="primary" size="large" block bind:tap="toBase">基础用法</t-button>
710
</t-demo>

‎src/input/_example/input.wxml

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<t-navbar title="Input" leftArrow />
22
<view class="input-example">
3-
<view class="demo-title">Input 输入框</view>
4-
<view class="demo-desc">用于单行文本信息输入。</view>
3+
<t-demo-header title="Input 输入框" desc="用于单行文本信息输入。" notice="渲染框架支持情况：Skyline、WebView" />
54
<t-demo title="01 组件类型" desc="基础输入框">
65
<base />
76
</t-demo>

0 commit comments

Comments
 (0)