feat: add information tips to all sample pages

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"

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"
+  }
+}

example/components/demo-header/index.ts

@@ -0,0 +1,16 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    title: {
+      type: String,
+    },
+    desc: {
+      type: String,
+    },
+    notice: {
+      type: String,
+    },
+  },
+});

example/components/demo-header/index.wxml

@@ -0,0 +1,8 @@
+<block>
+  <t-notice-bar visible content="{{notice}}" />
+  <view class="demo-title">{{title}}</view>
+  <view class="demo-desc">
+    {{desc}}
+    <slot name="desc" />
+  </view>
+</block>

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

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="ActionSheet" leftArrow />
 <view class="demo">
-  <view class="demo-title">ActionSheet 动作面板</view>
-  <view class="demo-desc">从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。</view>
+  <t-demo-header
+    title="ActionSheet 动作面板"
+    desc="从底部弹出的模态框，提供和当前场景相关的操作动作，也支持提供信息输入和描述。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="列表型动作面板" padding>
     <list />
   </t-demo>

src/avatar/_example/avatar.wxml

@@ -2,8 +2,11 @@
   <t-navbar class="demo-navbar" title="Avatar" leftArrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
-      <view class="demo-title">Avatar 头像</view>
-      <view class="demo-desc">用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。</view>
+      <t-demo-header
+        title="Avatar 头像"
+        desc="用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
       <t-demo title="01 组件类型" desc="图片头像" padding>
         <imageAvatar />
       </t-demo>

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

@@ -1,8 +1,10 @@
 <t-navbar class="demo-navbar" title="BackTop" leftArrow />
 <view class="demo">
-  <view class="demo-title">BackTop 返回顶部</view>
-  <view class="demo-desc"> 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。</view>
-
+  <t-demo-header
+    title="BackTop 返回顶部"
+    desc="用于当页面过长往下滑动时，帮助用户快速回到页面顶部。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="组件类型" desc="圆形返回顶部" padding>
     <t-button theme="primary" size="large" block variant="outline" data-source="round" bindtap="onBtnClick">
       圆形返回顶部

src/badge/_example/badge.wxml

@@ -1,6 +1,9 @@
 <t-navbar title="Badge" leftArrow />
-<view class="demo-title">Badge 徽标</view>
-<view class="demo-desc">用于告知用户，该区域的状态变化或者待处理任务的数量。</view>
+<t-demo-header
+  title="Badge 徽标"
+  desc="用于告知用户，该区域的状态变化或者待处理任务的数量。"
+  notice="渲染框架支持情况：Skyline、WebView"
+/>
 <t-demo title="01 组件类型">
   <base />
 </t-demo>

src/button/_example/button.wxml

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="Button" leftArrow />
 <view class="demo">
-  <view class="demo-title">Button 按钮</view>
-  <view class="demo-desc">用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。</view>
+  <t-demo-header
+    title="Button 按钮"
+    desc="用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型" desc="基础按钮">
     <base />
   </t-demo>

src/calendar/_example/calendar.wxml

@@ -1,8 +1,6 @@
 <t-navbar title="Calendar" leftArrow />
 <view class="demo">
-  <view class="demo-title">Calendar 日历</view>
-  <view class="demo-desc">按照日历形式展示数据或日期的容器</view>
-
+  <t-demo-header title="Calendar 日历" desc="按照日历形式展示数据或日期的容器" notice="渲染框架支持情况：WebView" />
   <t-demo title="01 组件类型" desc="基础日历">
     <base />
   </t-demo>

src/cascader/_example/cascader.wxml

@@ -1,8 +1,6 @@
 <t-navbar title="Cascader" leftArrow />
 <view class="demo">
-  <view class="demo-title">Cascader 级联选择器</view>
-  <view class="demo-desc">用于多层级数据的逐级选择。</view>
-
+  <t-demo-header title="Cascader 级联选择器" desc="用于多层级数据的逐级选择。" notice="渲染框架支持情况：WebView" />
   <t-demo title="01 类型" desc="">
     <base />
   </t-demo>

src/cell/_example/cell.wxml

@@ -1,7 +1,6 @@
 <t-navbar title="Cell" leftArrow />
 <view class="demo">
-  <view class="demo-title">Cell 单元格</view>
-  <view class="demo-desc">用于各个类别行的信息展示。</view>
+  <t-demo-header title="Cell 单元格" desc="用于各个类别行的信息展示。" notice="渲染框架支持情况：Skyline、WebView" />
   <t-demo title="01 组件类型" desc="单行单元格">
     <base />
   </t-demo>

src/checkbox/_example/checkbox.wxml

@@ -2,8 +2,11 @@
   <t-navbar title="Checkbox" leftArrow />
   <scroll-view scroll-y type="list" class="scroll-view">
     <view class="demo">
-      <view class="demo-title">Checkbox 多选框</view>
-      <view class="demo-desc">用于预设的一组选项中执行多项选择，并呈现选择结果。</view>
+      <t-demo-header
+        title="Checkbox 多选框"
+        desc="用于预设的一组选项中执行多项选择，并呈现选择结果。"
+        notice="渲染框架支持情况：Skyline、WebView"
+      />
       <t-demo title="01 组件类型" desc="纵向多选框">
         <base />
       </t-demo>

src/col/_example/col.wxml

@@ -1,9 +1,10 @@
 <t-navbar title="Layout" leftArrow />
 <view class="demo">
-  <view class="demo-title">Layout 布局</view>
-  <view class="demo-desc">
-    以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
-  </view>
+  <t-demo-header
+    title="Layout 布局"
+    desc="以规则的网格阵列来指导和规范页面中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型" desc="基础用法">
     <base />
   </t-demo>

src/collapse/_example/collapse.wxml

@@ -1,8 +1,6 @@
 <t-navbar title="Collapse" leftArrow />
 <view class="demo">
-  <view class="demo-title">Collapse 折叠面板</view>
-  <view class="demo-desc">可以折叠/展开的内容区域。</view>
-
+  <t-demo-header title="Collapse 折叠面板" desc="可以折叠/展开的内容区域。" notice="渲染框架支持情况：WebView" />
   <t-demo title="01 组件类型" desc="基础折叠面板">
     <base />
   </t-demo>

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

@@ -1,8 +1,11 @@
 <t-navbar class="demo-navbar" title="ColorPicker" leftArrow />
 
 <view class="demo">
-  <view class="demo-title">ColorPicker 颜色选择器</view>
-  <view class="demo-desc">用于颜色选择，支持多种格式。</view>
+  <t-demo-header
+    title="ColorPicker 颜色选择器"
+    desc="用于颜色选择，支持多种格式。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="基础颜色选择器">
     <base />
   </t-demo>

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

@@ -1,7 +1,5 @@
 <t-navbar class="demo-navbar" title="CountDown" leftArrow />
-<view class="demo-title">CountDown 倒计时</view>
-<view class="demo-desc">用于实时展示倒计时数值。</view>
-
+<t-demo-header title="CountDown 倒计时" desc="用于实时展示倒计时数值。" notice="渲染框架支持情况：Skyline、WebView" />
 <t-demo padding title="01 组件类型">
   <base />
 </t-demo>

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

@@ -1,7 +1,10 @@
 <t-navbar title="DateTimePicker" leftArrow />
 <view class="demo">
-  <view class="demo-title">DateTimePicker 时间选择器</view>
-  <view class="demo-desc">用于选择一个时间点或者一个时间段。</view>
+  <t-demo-header
+    title="DateTimePicker 时间选择器"
+    desc="用于选择一个时间点或者一个时间段。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="年月日选择器" />
   <year-month-date />
   <t-demo desc="年月选择器" />

src/dialog/_example/dialog.wxml

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="Dialog" leftArrow />
 <view class="demo">
-  <view class="demo-title">Dialog 对话框</view>
-  <view class="demo-desc">用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。</view>
+  <t-demo-header
+    title="Dialog 对话框"
+    desc="用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="反馈类对话框" padding>
     <base />
   </t-demo>

src/divider/_example/divider.wxml

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="Divider" leftArrow />
 <view class="demo">
-  <view class="demo-title">Divider 分割线</view>
-  <view class="demo-desc">用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。</view>
+  <t-demo-header
+    title="Divider 分割线"
+    desc="用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型" desc="水平分割线">
     <base />
   </t-demo>

src/drawer/_example/drawer.wxml

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="Drawer" leftArrow />
 <view class="demo">
-  <view class="demo-title">Drawer 抽屉</view>
-  <view class="demo-desc">用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。</view>
+  <t-demo-header
+    title="Drawer 抽屉"
+    desc="用作一组平行关系页面/内容的切换器，相较于Tab，同屏可展示更多的选项数量。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型" desc="基础抽屉" padding>
     <base />
   </t-demo>

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

@@ -1,7 +1,10 @@
 <t-navbar title="DropdownMenu" leftArrow />
 <view class="demo">
-  <view class="demo-title">DropdownMenu 下拉菜单</view>
-  <view class="demo-desc">菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。</view>
+  <t-demo-header
+    title="DropdownMenu 下拉菜单"
+    desc="菜单呈现数个并列的选项类目，用于整个页面的内容筛选，由菜单面板和菜单选项组成。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="单选下拉菜单">
     <single />
   </t-demo>

src/empty/_example/empty.wxml

@@ -1,7 +1,6 @@
 <t-navbar class="demo-navbar" title="Empty" leftArrow />
 <view class="demo">
-  <view class="demo-title">Empty 空状态</view>
-  <view class="demo-desc">用于空状态时的占位提示。</view>
+  <t-demo-header title="Empty 空状态" desc="用于空状态时的占位提示。" notice="渲染框架支持情况：Skyline、WebView" />
   <t-demo title="01 类型" desc="图标空状态">
     <base />
   </t-demo>

src/fab/_example/fab.wxml

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

src/footer/_example/footer.wxml

@@ -1,6 +1,9 @@
 <t-navbar class="demo-navbar" title="Footer" leftArrow />
-<view class="demo-title">Footer 页脚</view>
-<view class="demo-desc">用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。</view>
+<t-demo-header
+  title="Footer 页脚"
+  desc="用于基础列表展示，可附带文字、品牌logo、操作，常用商详、个人中心、设置等页面。"
+  notice="渲染框架支持情况：Skyline、WebView"
+/>
 <t-demo title="01 类型" desc="基础页脚">
   <base />
 </t-demo>

src/grid/_example/grid.wxml

@@ -1,7 +1,10 @@
 <t-navbar title="Grid" leftArrow />
 <view class="demo">
-  <view class="demo-title">Grid 宫格</view>
-  <view class="demo-desc">用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。</view>
+  <t-demo-header
+    title="Grid 宫格"
+    desc="用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。"
+    notice="渲染框架支持情况：WebView"
+  />
   <t-demo title="01 组件类型" desc="基础宫格">
     <base />
   </t-demo>

src/guide/_example/guide.wxml

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

src/icon/_example/icon.wxml

@@ -1,9 +1,10 @@
 <t-navbar class="demo-navbar" title="Icon" leftArrow />
 <view class="demo">
-  <view class="demo-title">Icon 图标</view>
-  <view class="demo-desc"
-    >用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性</view
-  >
+  <t-demo-header
+    title="Icon 图标"
+    desc="用于界面中的操作、入口、功能、服务等视觉表达，icon风格与品牌风格需要保持一致的感受，从而增加一致性"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 基础组件图标">
     <base />
   </t-demo>

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

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="ImageViewer" leftArrow />
 <view class="demo">
-  <view class="demo-title">ImageViewer 图片预览</view>
-  <view class="demo-desc">用于图片内容的缩略展示与查看。</view>
+  <t-demo-header
+    title="ImageViewer 图片预览"
+    desc="用于图片内容的缩略展示与查看。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型" desc="基础图片预览" padding>
     <base />
   </t-demo>

src/image/_example/image.wxml

@@ -1,7 +1,10 @@
 <t-navbar class="demo-navbar" title="Image" leftArrow />
 <view class="demo">
-  <view class="demo-title">Image 图片</view>
-  <view class="demo-desc">用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。</view>
+  <t-demo-header
+    title="Image 图片"
+    desc="用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。"
+    notice="渲染框架支持情况：Skyline、WebView"
+  />
   <t-demo title="01 组件类型">
     <base />
   </t-demo>

src/indexes/_example/indexes.wxml

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

src/input/_example/input.wxml

@@ -1,7 +1,6 @@
 <t-navbar title="Input" leftArrow />
 <view class="input-example">
-  <view class="demo-title">Input 输入框</view>
-  <view class="demo-desc">用于单行文本信息输入。</view>
+  <t-demo-header title="Input 输入框" desc="用于单行文本信息输入。" notice="渲染框架支持情况：Skyline、WebView" />
   <t-demo title="01 组件类型" desc="基础输入框">
     <base />
   </t-demo>