diff --git a/example/app.json b/example/app.json index fc3ce2dbb..32e5a2e84 100644 --- a/example/app.json +++ b/example/app.json @@ -140,6 +140,7 @@ "themeLocation": "theme.json", "usingComponents": { "t-demo": "./components/demo-block/index", + "t-demo-header": "./components/demo-header/index", "t-button": "tdesign-miniprogram/button/button", "t-icon": "tdesign-miniprogram/icon/icon", "t-navbar": "tdesign-miniprogram/navbar/navbar" diff --git a/example/components/demo-header/index.json b/example/components/demo-header/index.json new file mode 100644 index 000000000..69361974e --- /dev/null +++ b/example/components/demo-header/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "styleIsolation": "apply-shared", + "usingComponents": { + "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar" + } +} diff --git a/example/components/demo-header/index.less b/example/components/demo-header/index.less new file mode 100644 index 000000000..e69de29bb diff --git a/example/components/demo-header/index.ts b/example/components/demo-header/index.ts new file mode 100644 index 000000000..ecbf57ae7 --- /dev/null +++ b/example/components/demo-header/index.ts @@ -0,0 +1,16 @@ +Component({ + options: { + multipleSlots: true, + }, + properties: { + title: { + type: String, + }, + desc: { + type: String, + }, + notice: { + type: String, + }, + }, +}); diff --git a/example/components/demo-header/index.wxml b/example/components/demo-header/index.wxml new file mode 100644 index 000000000..8403569e3 --- /dev/null +++ b/example/components/demo-header/index.wxml @@ -0,0 +1,8 @@ + + + {{title}} + + {{desc}} + + + diff --git a/src/action-sheet/_example/action-sheet.wxml b/src/action-sheet/_example/action-sheet.wxml index 60a6cc21b..974c13662 100644 --- a/src/action-sheet/_example/action-sheet.wxml +++ b/src/action-sheet/_example/action-sheet.wxml @@ -1,7 +1,10 @@ - ActionSheet 动作面板 - 从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。 + diff --git a/src/avatar/_example/avatar.wxml b/src/avatar/_example/avatar.wxml index 07f1d14e4..bf7378ec0 100644 --- a/src/avatar/_example/avatar.wxml +++ b/src/avatar/_example/avatar.wxml @@ -2,8 +2,11 @@ - Avatar 头像 - 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。 + diff --git a/src/back-top/_example/back-top.wxml b/src/back-top/_example/back-top.wxml index 4bae1dec6..f91f9273e 100644 --- a/src/back-top/_example/back-top.wxml +++ b/src/back-top/_example/back-top.wxml @@ -1,8 +1,10 @@ - BackTop 返回顶部 - 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。 - + 圆形返回顶部 diff --git a/src/badge/_example/badge.wxml b/src/badge/_example/badge.wxml index 41960c472..ff8773151 100644 --- a/src/badge/_example/badge.wxml +++ b/src/badge/_example/badge.wxml @@ -1,6 +1,9 @@ -Badge 徽标 -用于告知用户，该区域的状态变化或者待处理任务的数量。 + diff --git a/src/button/_example/button.wxml b/src/button/_example/button.wxml index f31ef3779..49d9e90e8 100644 --- a/src/button/_example/button.wxml +++ b/src/button/_example/button.wxml @@ -1,7 +1,10 @@ - Button 按钮 - 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 + diff --git a/src/calendar/_example/calendar.wxml b/src/calendar/_example/calendar.wxml index 957fcf6e4..196cfa7a5 100644 --- a/src/calendar/_example/calendar.wxml +++ b/src/calendar/_example/calendar.wxml @@ -1,8 +1,6 @@ - Calendar 日历 - 按照日历形式展示数据或日期的容器 - + diff --git a/src/cascader/_example/cascader.wxml b/src/cascader/_example/cascader.wxml index 6830a4421..452dbd2fb 100644 --- a/src/cascader/_example/cascader.wxml +++ b/src/cascader/_example/cascader.wxml @@ -1,8 +1,6 @@ - Cascader 级联选择器 - 用于多层级数据的逐级选择。 - + diff --git a/src/cell/_example/cell.wxml b/src/cell/_example/cell.wxml index df3f20627..a498f8e6c 100644 --- a/src/cell/_example/cell.wxml +++ b/src/cell/_example/cell.wxml @@ -1,7 +1,6 @@ - Cell 单元格 - 用于各个类别行的信息展示。 + diff --git a/src/checkbox/_example/checkbox.wxml b/src/checkbox/_example/checkbox.wxml index e89f6d46f..def92a884 100644 --- a/src/checkbox/_example/checkbox.wxml +++ b/src/checkbox/_example/checkbox.wxml @@ -2,8 +2,11 @@ - Checkbox 多选框 - 用于预设的一组选项中执行多项选择，并呈现选择结果。 + diff --git a/src/col/_example/col.wxml b/src/col/_example/col.wxml index 69507d741..2483f37d7 100644 --- a/src/col/_example/col.wxml +++ b/src/col/_example/col.wxml @@ -1,9 +1,10 @@ - Layout 布局 - - 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。 - + diff --git a/src/collapse/_example/collapse.wxml b/src/collapse/_example/collapse.wxml index d484a970f..92816789d 100644 --- a/src/collapse/_example/collapse.wxml +++ b/src/collapse/_example/collapse.wxml @@ -1,8 +1,6 @@ - Collapse 折叠面板 - 可以折叠/展开的内容区域。 - + diff --git a/src/color-picker/_example/color-picker.wxml b/src/color-picker/_example/color-picker.wxml index 3e122901c..a0f3cb0a5 100644 --- a/src/color-picker/_example/color-picker.wxml +++ b/src/color-picker/_example/color-picker.wxml @@ -1,8 +1,11 @@ - ColorPicker 颜色选择器 - 用于颜色选择，支持多种格式。 + diff --git a/src/count-down/_example/count-down.wxml b/src/count-down/_example/count-down.wxml index 72970c52b..124ea46a3 100644 --- a/src/count-down/_example/count-down.wxml +++ b/src/count-down/_example/count-down.wxml @@ -1,7 +1,5 @@ -CountDown 倒计时 -用于实时展示倒计时数值。 - + diff --git a/src/date-time-picker/_example/date-time-picker.wxml b/src/date-time-picker/_example/date-time-picker.wxml index bc9080972..425ae8b54 100644 --- a/src/date-time-picker/_example/date-time-picker.wxml +++ b/src/date-time-picker/_example/date-time-picker.wxml @@ -1,7 +1,10 @@ - DateTimePicker 时间选择器 - 用于选择一个时间点或者一个时间段。 + diff --git a/src/dialog/_example/dialog.wxml b/src/dialog/_example/dialog.wxml index 4e90dc01d..f772fa5ad 100644 --- a/src/dialog/_example/dialog.wxml +++ b/src/dialog/_example/dialog.wxml @@ -1,7 +1,10 @@ - Dialog 对话框 - 用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。 + diff --git a/src/divider/_example/divider.wxml b/src/divider/_example/divider.wxml index 3ef7db7c0..df77fcf22 100644 --- a/src/divider/_example/divider.wxml +++ b/src/divider/_example/divider.wxml @@ -1,7 +1,10 @@ - Divider 分割线 - 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 + diff --git a/src/drawer/_example/drawer.wxml b/src/drawer/_example/drawer.wxml index fc606e474..02301221c 100644 --- a/src/drawer/_example/drawer.wxml +++ b/src/drawer/_example/drawer.wxml @@ -1,7 +1,10 @@ - Drawer 抽屉 - 用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。 + diff --git a/src/dropdown-menu/_example/dropdown-menu.wxml b/src/dropdown-menu/_example/dropdown-menu.wxml index c6786801a..6f9eb32bd 100644 --- a/src/dropdown-menu/_example/dropdown-menu.wxml +++ b/src/dropdown-menu/_example/dropdown-menu.wxml @@ -1,7 +1,10 @@ - DropdownMenu 下拉菜单 - 菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。 + diff --git a/src/empty/_example/empty.wxml b/src/empty/_example/empty.wxml index 447aadd39..9f2498abd 100644 --- a/src/empty/_example/empty.wxml +++ b/src/empty/_example/empty.wxml @@ -1,7 +1,6 @@ - Empty 空状态 - 用于空状态时的占位提示。 + diff --git a/src/fab/_example/fab.wxml b/src/fab/_example/fab.wxml index 208e0dd59..12edae423 100644 --- a/src/fab/_example/fab.wxml +++ b/src/fab/_example/fab.wxml @@ -1,6 +1,9 @@ -Fab 悬浮按钮 -当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布 + diff --git a/src/footer/_example/footer.wxml b/src/footer/_example/footer.wxml index ca26ed447..29f05b8db 100644 --- a/src/footer/_example/footer.wxml +++ b/src/footer/_example/footer.wxml @@ -1,6 +1,9 @@ -Footer 页脚 -用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。 + diff --git a/src/grid/_example/grid.wxml b/src/grid/_example/grid.wxml index bcefcfa92..59c856a10 100644 --- a/src/grid/_example/grid.wxml +++ b/src/grid/_example/grid.wxml @@ -1,7 +1,10 @@ - Grid 宫格 - 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。 + diff --git a/src/guide/_example/guide.wxml b/src/guide/_example/guide.wxml index dab2d59a4..0861e9fa5 100644 --- a/src/guide/_example/guide.wxml +++ b/src/guide/_example/guide.wxml @@ -3,8 +3,11 @@ - Guide 引导 - 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。 + diff --git a/src/icon/_example/icon.wxml b/src/icon/_example/icon.wxml index 97003ca8a..d14c2b40e 100644 --- a/src/icon/_example/icon.wxml +++ b/src/icon/_example/icon.wxml @@ -1,9 +1,10 @@ - Icon 图标 - 用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性 + diff --git a/src/image-viewer/_example/image-viewer.wxml b/src/image-viewer/_example/image-viewer.wxml index 1a41a7e3d..b8f1da4dd 100644 --- a/src/image-viewer/_example/image-viewer.wxml +++ b/src/image-viewer/_example/image-viewer.wxml @@ -1,7 +1,10 @@ - ImageViewer 图片预览 - 用于图片内容的缩略展示与查看。 + diff --git a/src/image/_example/image.wxml b/src/image/_example/image.wxml index a2b5fa9dd..c50548a47 100644 --- a/src/image/_example/image.wxml +++ b/src/image/_example/image.wxml @@ -1,7 +1,10 @@ - Image 图片 - 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。 + diff --git a/src/indexes/_example/indexes.wxml b/src/indexes/_example/indexes.wxml index 61f609296..4e8e52da8 100644 --- a/src/indexes/_example/indexes.wxml +++ b/src/indexes/_example/indexes.wxml @@ -1,7 +1,10 @@ - Indexes 索引 - 用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。 + 基础用法 diff --git a/src/input/_example/input.wxml b/src/input/_example/input.wxml index 1ba8a1f69..c9afebcbe 100644 --- a/src/input/_example/input.wxml +++ b/src/input/_example/input.wxml @@ -1,7 +1,6 @@ - Input 输入框 - 用于单行文本信息输入。 + diff --git a/src/link/_example/link.wxml b/src/link/_example/link.wxml index 744a77051..220258a93 100644 --- a/src/link/_example/link.wxml +++ b/src/link/_example/link.wxml @@ -2,8 +2,11 @@ - Link 链接 - 文字超链接用于跳转一个新页面，如当前项目跳转，友情链接等。 + diff --git a/src/loading/_example/loading.wxml b/src/loading/_example/loading.wxml index 21c9f59fd..210c9e87e 100644 --- a/src/loading/_example/loading.wxml +++ b/src/loading/_example/loading.wxml @@ -2,10 +2,11 @@ - Loading 加载 - - 用于表示页面或操作的加载状态，给予用户反馈的同时减缓等待的焦虑感，由一个或一组反馈动效组成。 - + diff --git a/src/message/_example/message.wxml b/src/message/_example/message.wxml index 2da61c277..e4ae3962d 100644 --- a/src/message/_example/message.wxml +++ b/src/message/_example/message.wxml @@ -1,7 +1,10 @@ - Message 消息通知 - 用于轻量级反馈或提示，不会打断用户操作。 + diff --git a/src/navbar/_example/navbar.wxml b/src/navbar/_example/navbar.wxml index 3bdd51900..4f6cea310 100644 --- a/src/navbar/_example/navbar.wxml +++ b/src/navbar/_example/navbar.wxml @@ -1,7 +1,10 @@ - NavBar 导航栏 - 用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。 + diff --git a/src/notice-bar/_example/notice-bar.wxml b/src/notice-bar/_example/notice-bar.wxml index 297ad80b4..4dc5c2c69 100644 --- a/src/notice-bar/_example/notice-bar.wxml +++ b/src/notice-bar/_example/notice-bar.wxml @@ -1,7 +1,10 @@ - NoticeBar 公告栏 - 在导航栏下方，用于给用户显示提示消息。 + diff --git a/src/overlay/_example/overlay.wxml b/src/overlay/_example/overlay.wxml index 93a5de617..9441c5a49 100644 --- a/src/overlay/_example/overlay.wxml +++ b/src/overlay/_example/overlay.wxml @@ -1,7 +1,10 @@ - Overlay 遮罩层 - 通过遮罩层，可以强调部分内容 + diff --git a/src/picker/_example/picker.wxml b/src/picker/_example/picker.wxml index 15eb9bc2c..e50ca4416 100644 --- a/src/picker/_example/picker.wxml +++ b/src/picker/_example/picker.wxml @@ -1,7 +1,6 @@ - Picker 选择器 - 用于一组预设数据中的选择。 + diff --git a/src/popup/_example/popup.wxml b/src/popup/_example/popup.wxml index 24d850449..a73001b6f 100644 --- a/src/popup/_example/popup.wxml +++ b/src/popup/_example/popup.wxml @@ -1,6 +1,9 @@ -Popup 弹出层 -由其他控件触发，屏幕滑出或弹出一块自定义内容区域。 + diff --git a/src/progress/_example/progress.wxml b/src/progress/_example/progress.wxml index 5cc392188..ca8eaa7d5 100644 --- a/src/progress/_example/progress.wxml +++ b/src/progress/_example/progress.wxml @@ -2,8 +2,11 @@ - Progress 进度条 - 在导航栏下方，用于给用户显示提示消息 + diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap index 434fb061b..b5d44fabb 100644 --- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap +++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.js.snap @@ -19,16 +19,11 @@ exports[`PullDownRefresh PullDownRefresh base demo works fine 1`] = ` - - PullDownRefresh 下拉刷新 - - - 用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。 - + diff --git a/src/pull-down-refresh/_example/base/index.wxml b/src/pull-down-refresh/_example/base/index.wxml index 098bc51f2..33ea1613f 100644 --- a/src/pull-down-refresh/_example/base/index.wxml +++ b/src/pull-down-refresh/_example/base/index.wxml @@ -7,8 +7,11 @@ > - PullDownRefresh 下拉刷新 - 用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。 + diff --git a/src/radio/_example/radio.wxml b/src/radio/_example/radio.wxml index 1e3bba165..2a8e5c3f8 100644 --- a/src/radio/_example/radio.wxml +++ b/src/radio/_example/radio.wxml @@ -2,8 +2,11 @@ - Radio 单选框 - 用于在预设的一组选项中执行单项选择，并呈现选择结果。 + diff --git a/src/rate/_example/rate.wxml b/src/rate/_example/rate.wxml index fd147a1f0..0f96aaa1c 100644 --- a/src/rate/_example/rate.wxml +++ b/src/rate/_example/rate.wxml @@ -1,7 +1,6 @@ - Rate 评分 - 用于对某行为/事物进行打分。 + 实心评分 diff --git a/src/result/_example/result.wxml b/src/result/_example/result.wxml index cc0c4bbc6..0300bbcde 100644 --- a/src/result/_example/result.wxml +++ b/src/result/_example/result.wxml @@ -1,7 +1,6 @@ - Result 结果 - 用于反馈不同结果的展示。 + diff --git a/src/search/_example/search.wxml b/src/search/_example/search.wxml index a47ce44fc..504e3dae5 100644 --- a/src/search/_example/search.wxml +++ b/src/search/_example/search.wxml @@ -1,7 +1,10 @@ - Search 搜索框 - 用于用户输入搜索信息，并进行页面内容搜索。 + diff --git a/src/side-bar/_example/side-bar.wxml b/src/side-bar/_example/side-bar.wxml index 10403c0bb..808887e8c 100644 --- a/src/side-bar/_example/side-bar.wxml +++ b/src/side-bar/_example/side-bar.wxml @@ -1,7 +1,6 @@ -SideBar 侧边栏 -用于内容分类后的展示切换。 + 锚点用法 diff --git a/src/skeleton/_example/skeleton.wxml b/src/skeleton/_example/skeleton.wxml index 2b7d8d019..13e4727ac 100644 --- a/src/skeleton/_example/skeleton.wxml +++ b/src/skeleton/_example/skeleton.wxml @@ -1,7 +1,10 @@ - Skeleton 骨架屏 - 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。 + diff --git a/src/slider/_example/slider.wxml b/src/slider/_example/slider.wxml index e3cfa6af7..936d56ed2 100644 --- a/src/slider/_example/slider.wxml +++ b/src/slider/_example/slider.wxml @@ -1,7 +1,10 @@ - Slider 滑动选择器 - 用于选择横轴上的数值、区间、档位。 + diff --git a/src/stepper/_example/stepper.wxml b/src/stepper/_example/stepper.wxml index fcea3368b..ceb827535 100644 --- a/src/stepper/_example/stepper.wxml +++ b/src/stepper/_example/stepper.wxml @@ -1,7 +1,6 @@ - Stepper 步进器 - 用于数量的增减。 + diff --git a/src/steps/_example/steps.wxml b/src/steps/_example/steps.wxml index 1a12d5de1..cf2628a6a 100644 --- a/src/steps/_example/steps.wxml +++ b/src/steps/_example/steps.wxml @@ -2,9 +2,11 @@ - Steps 步骤条 - 用于任务步骤展示或任务进度展示。 - + diff --git a/src/sticky/_example/sticky.wxml b/src/sticky/_example/sticky.wxml index 60c4b961c..a58ee2e7b 100644 --- a/src/sticky/_example/sticky.wxml +++ b/src/sticky/_example/sticky.wxml @@ -2,8 +2,7 @@ - Sticky 吸顶 - 用于常驻页面顶部的信息、操作展示。 + diff --git a/src/swipe-cell/_example/swipe-cell.wxml b/src/swipe-cell/_example/swipe-cell.wxml index af4f32b42..a24475cf1 100644 --- a/src/swipe-cell/_example/swipe-cell.wxml +++ b/src/swipe-cell/_example/swipe-cell.wxml @@ -1,7 +1,10 @@ - SwipeCell 滑动操作 - 用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。 + diff --git a/src/swiper/_example/swiper.wxml b/src/swiper/_example/swiper.wxml index 7a492ed7f..e19d27768 100644 --- a/src/swiper/_example/swiper.wxml +++ b/src/swiper/_example/swiper.wxml @@ -1,7 +1,10 @@ - Swiper 轮播图 - 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。 + diff --git a/src/switch/_example/switch.wxml b/src/switch/_example/switch.wxml index 5aee608be..49e370480 100644 --- a/src/switch/_example/switch.wxml +++ b/src/switch/_example/switch.wxml @@ -1,8 +1,10 @@ - Switch 开关 - 用于控制某个功能的开启和关闭。 - + diff --git a/src/tab-bar/_example/tab-bar.wxml b/src/tab-bar/_example/tab-bar.wxml index 0c74cae24..c7941a54d 100644 --- a/src/tab-bar/_example/tab-bar.wxml +++ b/src/tab-bar/_example/tab-bar.wxml @@ -1,7 +1,10 @@ - TabBar 标签栏 - 用于在不同功能模块之间进行快速切换，位于页面底部。 + diff --git a/src/tabs/_example/tabs.wxml b/src/tabs/_example/tabs.wxml index 62fa0cda2..122b06567 100644 --- a/src/tabs/_example/tabs.wxml +++ b/src/tabs/_example/tabs.wxml @@ -1,7 +1,6 @@ - Tabs 选项卡 - 用于内容分类后的展示切换。 + diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml index 76367dda8..efa2d3dcb 100644 --- a/src/tag/_example/tag.wxml +++ b/src/tag/_example/tag.wxml @@ -1,7 +1,6 @@ - Tag 标签 - 用于表明主体的类目，属性或状态。 + diff --git a/src/textarea/_example/textarea.wxml b/src/textarea/_example/textarea.wxml index 51a36e9e5..a0f5fcffa 100644 --- a/src/textarea/_example/textarea.wxml +++ b/src/textarea/_example/textarea.wxml @@ -2,8 +2,11 @@ - Textarea 多行文本框 - 用于多行文本信息输入。 + diff --git a/src/toast/_example/toast.wxml b/src/toast/_example/toast.wxml index d40e25b83..d565b997c 100644 --- a/src/toast/_example/toast.wxml +++ b/src/toast/_example/toast.wxml @@ -1,7 +1,10 @@ - Toast 轻提示 - 用于轻量级反馈或提示，不会打断用户操作。 + diff --git a/src/tree-select/_example/tree-select.wxml b/src/tree-select/_example/tree-select.wxml index 67250e854..25faeb221 100644 --- a/src/tree-select/_example/tree-select.wxml +++ b/src/tree-select/_example/tree-select.wxml @@ -1,7 +1,6 @@ - TreeSelect 树形选择器 - 用于多层级数据的逐级选择。 + diff --git a/src/upload/_example/upload.wxml b/src/upload/_example/upload.wxml index 65b38275e..b5f64e27f 100644 --- a/src/upload/_example/upload.wxml +++ b/src/upload/_example/upload.wxml @@ -1,11 +1,12 @@ - Upload 上传 - - 用于相册读取或拉起拍照的图片上传功能。（为避免涉及用户隐私，Upload 组件示例均为禁用态，使用时请自行取消禁用态，以便正常使用上传功能。） - + + + 用于相册读取或拉起拍照的图片上传功能。（为避免涉及用户隐私，Upload 组件示例均为禁用态，使用时请自行取消禁用态，以便正常使用上传功能。） + + 上传图片