@tuya-miniapp/smart-ui 2.13.1 → 2.13.2-beta-1

package/lib/tabbar/README.md

@@ -0,0 +1,333 @@
+---
+category: 导航
+---
+
+# Tabbar 标签栏
+
+### 介绍
+
+底部导航栏，用于在不同页面之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-tabbar": "@tuya-miniapp/smart-ui/lib/tabbar/index",
+  "smart-tabbar-item": "@tuya-miniapp/smart-ui/lib/tabbar-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    // event.detail 的值为当前选中项的索引
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 通过名称匹配
+
+在标签指定`name`属性的情况下，`v-model`的值为当前标签的`name`。
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item name="home" icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item name="search" icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item name="friends" icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item name="setting" icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 'home',
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 显示徽标
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search" dot>标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o" info="5">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o" info="20">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+### 自定义图标
+
+可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item info="3">
+    <image
+      slot="icon"
+      src="{{ icon.normal }}"
+      mode="aspectFit"
+      style="width: 30px; height: 18px;"
+    />
+    <image
+      slot="icon-active"
+      src="{{ icon.active }}"
+      mode="aspectFit"
+      style="width: 30px; height: 18px;"
+    />
+    自定义
+  </smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+    icon: {
+      normal:
+        'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+      active:
+        'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+    },
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 自定义颜色
+
+```html
+<smart-tabbar
+  active="{{ active }}"
+  active-color="#07c160"
+  inactive-color="#000"
+  bind:change="onChange"
+>
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 切换标签事件
+
+```html
+<smart-tabbar active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签1</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签2</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签3</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签4</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onClick(event) {
+    ty.showToast({
+      title: `点击标签 ${event.detail + 1}`,
+      icon: 'none',
+    });
+  },
+});
+```
+
+### 使用插槽
+
+```html
+<smart-tabbar
+  active="{{ active }}"
+  data-key="active"
+  custom-class="tabbar-position"
+  safe-area-inset-bottom="{{ false }}"
+  bind:change="onChange"
+>
+  <image style="height: 40px;width:40px;margin: 6px 10px;" src="{{icon.left}}" slot="left" />
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon1}}" slot="icon" />
+    <smart-icon name="{{defaultIcon1}}" color="red" slot="icon-active" />
+    标签1
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon2}}" slot="icon" />
+    <smart-icon name="{{defaultIcon2}}" color="red" slot="icon-active" />
+    标签2
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon3}}" slot="icon" />
+    <smart-icon name="{{defaultIcon3}}" color="red" slot="icon-active" />
+    标签3
+  </smart-tabbar-item>
+  <smart-tabbar-item>
+    <smart-icon name="{{defaultIcon4}}" slot="icon" />
+    <smart-icon name="{{defaultIcon4}}" color="red" slot="icon-active" />
+    标签4
+  </smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+import Tornado from '@tuya-miniapp/icons/dist/svg/Tornado';
+import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
+import TorSnownado from '@tuya-miniapp/icons/dist/svg/Snow';
+import Connect from '@tuya-miniapp/icons/dist/svg/Connect';
+
+Page({
+  data: {
+    active: 0,
+    icon: {
+      left: 'https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png',
+    },
+    defaultIcon1: Tornado,
+    defaultIcon2: Timer,
+    defaultIcon3: TorSnownado,
+    defaultIcon4: Connect,
+  },
+  onChange(event) {
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 上下颠倒 `v2.5.1`
+
+`upside-down` 属性可以实现组件的上下样式颠倒，让标题在图标的上方。
+
+```html
+<smart-tabbar upside-down active="{{ active }}" bind:change="onChange">
+  <smart-tabbar-item icon="home-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="search">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="friendsmart-o">标签</smart-tabbar-item>
+  <smart-tabbar-item icon="setting-o">标签</smart-tabbar-item>
+</smart-tabbar>
+```
+
+```javascript
+Page({
+  data: {
+    active: 0,
+  },
+  onChange(event) {
+    // event.detail 的值为当前选中项的索引
+    this.setData({ active: event.detail });
+  },
+});
+```
+
+### 结合自定义 tabBar
+
+请参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html) 与 [代码片段](https://developers.weixin.qq.com/s/vaXgTsmQ7hnm)。
+
+## API
+
+### Tabbar Props
+
+| 参数                   | 说明                                               | 类型      | 默认值                                                  |
+| ---------------------- | -------------------------------------------------- | --------- | ------------------------------------------------------- |
+| active                 | 当前选中标签的索引                                 | _number_  | -                                                       |
+| active-color           | 选中标签的颜色                                     | _string_  | `--tabbar-item-active-color` \| `--app-M1` \| `#3678e3` |
+| border                 | 是否展示外边框                                     | _boolean_ | `true`                                                  |
+| fixed                  | 是否固定在底部                                     | _boolean_ | `true`                                                  |
+| inactive-color         | 未选中标签的颜色                                   | _string_  | `#7d7e80`                                               |
+| placeholder            | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false`                                                 |
+| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离                    | _boolean_ | `true`                                                  |
+| z-index                | 元素 z-index                                       | _number_  | `1`                                                     |
+| upside-down `v2.5.1`   | 上下颠倒                                           | _boolean_ | `false`                                                 |
+
+### Tabbar Slot
+
+| 名称           | 说明                    |
+| -------------- | ----------------------- |
+| -              | 默认插槽，插入子 tab 页 |
+| left `v2.2.0`  | tab 左侧的插槽          |
+| right `v2.2.0` | tab 右侧的插槽          |
+
+### Tabbar Event
+
+| 事件名      | 说明           | 参数                                     |
+| ----------- | -------------- | ---------------------------------------- |
+| bind:change | 切换标签时触发 | event.detail: 当前选中标签的名称或索引值 |
+
+### TabbarItem Props
+
+| 参数                 | 说明                                                                                                                                         | 类型               | 默认值           |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------- |
+| dot                  | 是否显示小红点                                                                                                                               | _boolean_          | -                |
+| icon                 | 图标 svg 值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)                                                    | _string_           | -                |
+| icon-prefix          | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](/material/smartui?comId=icon&appType=miniapp#Props)                                         | _string_           | `smart-icon`     |
+| info                 | 图标右上角提示信息                                                                                                                           | _string \| number_ | -                |
+| link-type `v1.10.13` | 链接跳转类型，可选值为 `redirectTo`、[`switchTab`](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html)、`reLaunch` | _string_           | `redirectTo`     |
+| name                 | 标签名称，作为匹配的标识符                                                                                                                   | _string \| number_ | 当前标签的索引值 |
+| url `v1.10.13`       | 点击后跳转的链接地址, 需要以 `/` 开头                                                                                                        | _string_           | -                |
+| disabled `v2.3.5`    | 是否禁用                                                                                                                                     | _boolean_          | -                |
+
+### TabbarItem Slot
+
+| 名称        | 说明           |
+| ----------- | -------------- |
+| icon        | 未选中时的图标 |
+| icon-active | 选中时的图标   |
+
+### TabbarItem Event
+
+| 名称  | 说明                                 |
+| ----- | ------------------------------------ |
+| click | 点击事件，设置 disabled 时也会有回调 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                        | 默认值                                 | 描述             |
+| --------------------------- | -------------------------------------- | ---------------- |
+| --tabbar-height             | _55px_                                 | 标签栏高度       |
+| --tabbar-background-color   | _var(--app-B5, #f6f7fb)_               | 标签栏背景颜色   |
+| --tabbar-border-color       | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 标签栏边框颜色   |
+| --tabbar-item-font-size     | _12px_                                 | 标签项字体大小   |
+| --tabbar-item-text-color    | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 标签项文本颜色   |
+| --tabbar-item-active-color  | _var(--app-M1, #3678e3)_               | 活动状态项目颜色 |
+| --tabbar-item-line-height   | _1_                                    | 标签项行高       |
+| --tabbar-item-icon-size     | _22px_                                 | 标签项图标大小   |
+| --tabbar-item-margin-bottom | _4px_                                  | 标签项下边距     |

package/lib/tag/README.md

@@ -0,0 +1,184 @@
+---
+category: 展示
+new: true
+---
+
+# Tag 标签
+
+> v2.0.0 开始加入
+
+### 介绍
+
+用于标记关键词和概括主要内容。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-tag": "@tuya-miniapp/smart-ui/lib/tag/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过 `type` 属性控制标签颜色，默认为灰色。
+
+```html
+<smart-tag type="primary">标签</smart-tag>
+<smart-tag type="success">标签</smart-tag>
+<smart-tag type="danger">标签</smart-tag>
+<smart-tag type="warning">标签</smart-tag>
+```
+
+### 空心样式
+
+设置 `plain` 属性设置为空心样式。
+
+```html
+<smart-tag plain type="primary">标签</smart-tag>
+<smart-tag plain type="success">标签</smart-tag>
+<smart-tag plain type="danger">标签</smart-tag>
+<smart-tag plain type="warning">标签</smart-tag>
+```
+
+### 圆角样式
+
+通过 `round` 设置为圆角样式。
+
+```html
+<smart-tag round type="primary">标签</smart-tag>
+<smart-tag round type="success">标签</smart-tag>
+<smart-tag round type="danger">标签</smart-tag>
+<smart-tag round type="warning">标签</smart-tag>
+```
+
+### 标记样式
+
+通过 `mark` 设置为标记样式(半圆角)。
+
+```html
+<smart-tag mark type="primary">标签</smart-tag>
+<smart-tag mark type="success">标签</smart-tag>
+<smart-tag mark type="danger">标签</smart-tag>
+<smart-tag mark type="warning">标签</smart-tag>
+```
+
+### 自定义颜色
+```html
+<smart-tag color="rgba(16, 208, 208, 1)">标签</smart-tag>
+<smart-tag color="rgba(16, 208, 208, 0.2)" text-color="rgba(16, 208, 208, 1)">标签</smart-tag>
+<smart-tag color="rgba(16, 208, 208, 1)" plain>标签</smart-tag>
+```
+
+### 标签大小
+
+```html
+<smart-tag type="danger">标签</smart-tag>
+<smart-tag type="danger" size="medium">标签</smart-tag>
+<smart-tag type="danger" size="large">标签</smart-tag>
+```
+
+### 可关闭标签
+
+添加 `closeable` 属性表示标签是可关闭的，关闭标签时会触发 `close` 事件，在 `close` 事件中可以执行隐藏标签的逻辑。
+
+```html
+<smart-tag
+  ty:if="{{ show.primary }}"
+  closeable
+  size="medium"
+  type="primary"
+  id="primary"
+  bind:close="onClose"
+>
+  标签
+</smart-tag>
+<smart-tag
+  ty:if="{{ show.success }}"
+  closeable
+  size="medium"
+  type="success"
+  id="success"
+  bind:close="onClose"
+>
+  标签
+</smart-tag>
+```
+
+```js
+Page({
+  data: {
+    show: {
+      primary: true,
+      success: true,
+    },
+  },
+  onClose(event) {
+    this.setData({
+      [`show.${event.target.id}`]: false,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                                  | 类型      | 默认值  |
+| ---------- | ----------------------------------------------------- | --------- | ------- |
+| close-icon-aria-label `v2.13.0` | 关闭按钮的无障碍读屏文案，透传至关闭图标的 `ariaLabel` | _string_  | -       |
+| closeable  | 是否为可关闭标签                                      | _boolean_ | `false` |
+| color      | 标签颜色                                              | _string_  | -       |
+| mark       | 是否为标记样式                                        | _boolean_ | `false` |
+| plain      | 是否为空心样式                                        | _boolean_ | `false` |
+| round      | 是否为圆角样式                                        | _boolean_ | `false` |
+| size       | 大小, 可选值为 `large` `medium`                       | _string_  | -       |
+| text-color | 文本颜色，优先级高于 `color` 属性                     | _string_  | `white` |
+| type       | 类型，可选值为 `primary` `success` `danger` `warning` | _string_  | -       |
+
+### Slot
+
+| 名称 | 说明                |
+| ---- | ------------------- |
+| -    | 自定义 Tag 显示内容 |
+
+### Events
+
+| 事件名     | 说明           | 回调参数 |
+| ---------- | -------------- | -------- |
+| bind:close | 关闭标签时触发 | -        |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --tag-padding        | _2px 8px_                           | 组件padding    |
+| --tag-text-color        | _#fff_                         | 文字颜色    |
+| --tag-border-radius  | _4px_    | 组件外部radius    |
+| --tag-line-height  | _17px_    | 文字默认行高    |
+| --tag-medium-line-height  | _20px_    | medium尺寸文字行高    |
+| --tag-large-line-height  | _22px_    | large尺寸文字行高    |
+| --tag-font-size  | _12px_  | 字体默认大小   |
+| --tag-medium-font-size  | _14px_    | medium尺寸字体大小    |
+| --tag-large-font-size  | _16px_    | large尺寸字体大小    |
+| --tag-round-border-radius  | _999px_    | round模式组件外部radius    |
+| --tag-default-color  | _#969799_    | default模式背景色或边框色    |
+| --tag-danger-color  | _#ee0a24_    | danger模式背景色或边框色    |
+| --tag-primary-color  | _#1989fa_    | primary模式背景色或边框色    |
+| --tag-success-color  | _#07c160_    | success模式背景色或边框色    |
+| --tag-warning-color  | _#ff976a_    | warning模式背景色或边框色    |
+| --tag-plain-background-color  | _transparent_    | 空心模式背景色    |