@tuya/miniapp-smart-ui 2.13.5-beta-0

package/lib/nav-bar/README.md

@@ -0,0 +1,378 @@
+---
+category: 导航
+---
+
+# NavBar 导航栏
+
+### 介绍
+
+为页面提供导航功能，常用于页面顶部。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-nav-bar": "@tuya/miniapp-smart-ui/lib/nav-bar/index"
+}
+```
+
+## 代码演示
+
+### 首页
+
+首页的文本样式默认左对齐并加粗，点击左侧文本时触发事件；background `v2.7.0` 属性可以设置nav-bar的背景色。  
+通过 `slot="left"` 可在左侧区域插入自定义内容（如图标），插入的内容使用 `margin-left: auto` 可在不脱离文档流的情况下在左侧容器内居右排列 `v2.12.0`。
+
+```html
+<smart-nav-bar
+  left-text="Home"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+/>
+<smart-nav-bar
+  background="#E4EDFF"
+  left-text="HomeHomeHomeHomeHome"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+/>
+<smart-nav-bar
+  background="#E4EDFF"
+  custom-class="demo-nav-bar"
+  left-text="HomeHomeHomeHomeHome"
+  left-text-type="home"
+  bind:click-left-text="onClickLeftText"
+>
+  <smart-icon 
+    style="margin-left: auto;padding-left: 16px;" 
+    slot="left" 
+    name="https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png" size="24px" 
+  />
+</smart-nav-bar>
+```
+
+```js
+Page({
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-单图标
+
+当中间标题内容比较长，且两侧内容较少时可以设置 `v2.7.3` `side-width` 为 `min`。
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  right-icon="{{ iconMore }}"
+  side-width="min"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-常见情况
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  right-icon="{{ iconMore }}"
+  side-width="mid"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+>
+  <smart-icon
+    slot="right"
+    size="24px"
+    style="margin-right: 16px;"
+    name="{{ iconHouse }}"
+  />
+</smart-nav-bar>
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  right-text="确认"
+  left-text="取消"
+  side-width="mid"
+  right-text-color="#F04C4C"
+  bind:click-right-text="onClickRightText"
+  bind:click-left-text="onClickLeftText"
+  bind:click-title="onClickTitle"
+/>
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  side-width="mid"
+  right-text="确认"
+  right-text-color="#F04C4C"
+  bind:click-right-text="onClickRightText"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import House from '@tuya-miniapp/icons/dist/svg/House';
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconHouse: House,
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+  onClickRightText() {
+    ty.showToast({ title: '点击右侧文本', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 二级页面-短标题
+
+当两侧操作内容较多时可以设置 `side-width` `v2.7.3` 为 `max`，减小标题区域的大小。
+
+```html
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-arrow
+  side-width="max"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-text="Abbrechen"
+  right-text="Speichern"
+  right-text-color="#F04C4C"
+  side-width="max"
+  bind:click-left-text="onClickLeftText"
+  bind:click-title="onClickTitle"
+  bind:click-right-text="onClickRightText"
+/>
+<smart-nav-bar
+  title="ScheduleSchedule"
+  left-arrow
+  right-text="Speichern"
+  right-text-color="#F04C4C"
+  side-width="max"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+  bind:click-right-text="onClickRightText"
+/>
+```
+
+```js
+Page({
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+  onClickRightText() {
+    ty.showToast({ title: '点击右侧文本', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+});
+```
+
+### 自定义宽度 `v2.7.3`
+
+`side-width` 也支持传如 `100`、`100px`、`100rpx` 去自定义两边的宽度。
+
+```html
+<smart-nav-bar
+  title="ScheduleScheduleScheduleSchedule"
+  left-arrow
+  side-width="100px"
+  right-icon="{{ iconMore }}"
+  right-icon-size="24px"
+  bind:click-right="onClickRight"
+  bind:click-left="onClickLeft"
+  bind:click-title="onClickTitle"
+/>
+```
+
+```js
+import More from '@tuya-miniapp/icons/dist/svg/More';
+
+Page({
+  data: {
+    iconMore: More,
+  },
+  onClickLeft() {
+    ty.showToast({ title: '点击返回', icon: 'none' });
+  },
+  onClickTitle() {
+    ty.showToast({ title: '点击中央文本', icon: 'none' });
+  },
+  onClickRight() {
+    ty.showToast({ title: '点击右侧', icon: 'none' });
+  },
+});
+```
+
+### 左标题
+
+部分二级页面标题位于左侧，或同时附带 icon。
+
+```html
+<smart-nav-bar
+  left-text="Home"
+  left-text-type="title"
+  side-width="mid"
+  left-icon="https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png"
+  bind:click-left-icon="onClickLeftIcon"
+  bind:click-left-text="onClickLeftText"
+/>
+```
+
+```js
+Page({
+  onClickLeftIcon() {
+    ty.showToast({ title: '点击左侧图标', icon: 'none' });
+  },
+  onClickLeftText() {
+    ty.showToast({ title: '点击左侧文本', icon: 'none' });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数                | 说明                               | 类型      | 默认值  |
+| ------------------- | ---------------------------------- | --------- | ------- |
+| border              | 是否显示下边框                     | _boolean_ | `true` `v2.0.0` `false` `v2.7.0`  |
+| custom-style        | 根节点自定义样式                   | _string_  | -       |
+| fixed               | 是否固定在顶部                     | _boolean_ | `false` |
+| left-arrow          | 是否显示左侧箭头                   | _boolean_ | `false` |
+| left-arrow-aria-label `v2.13.0` | 左侧返回箭头的无障碍读屏文案 | _string_  | -       |
+| left-text           | 左侧文案                           | _string_  | `''`    |
+| left-text-type `v2.0.0`          | 左侧文本的样式类型，范围为 `home`、`title`、`back`                           | _string_  | `back`    |
+| left-icon `v2.0.0`         | 左侧 Icon                           | _string_  | `''`    |
+| left-icon-aria-label `v2.13.0` | 左侧图标按钮的无障碍读屏文案 | _string_  | -       |
+| left-icon-size `v2.0.0`        | 左侧 Icon 大小，默认为 32                           | _string \| number_  | `32`    |
+| round `v2.1.0`               | 是否显示圆角                     | _boolean_ | `false` |
+| placeholder         | 固定在顶部时是否开启占位           | _boolean_ | `false` |
+| right-text          | 右侧文案                           | _string_  | `''`    |
+| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true`  |
+| title               | 标题                               | _string_  | `''`    |
+| z-index             | 元素 z-index                       | _number_  | `1`     |
+| right-text-color `v2.7.0` | 右侧文案的颜色    | _string_  | -   |
+| right-icon `v2.7.0` | 右侧图标    | _string_  | -   |
+| right-icon-aria-label `v2.13.0` | 右侧图标按钮的无障碍读屏文案 | _string_  | -   |
+| right-icon-color `v2.7.0` | 右侧图标颜色    | _string_  | -   |
+| right-icon-size `v2.7.0` | 右侧图标大小    | _number_  | `32px`   |
+| left-icon-color `v2.7.0` | 左侧图标颜色 （非返回 icon）    | _string_  | -   |
+| background `v2.7.0` | 整体背景色    | _string_  | -   |
+| side-width `v2.7.3` | 两边控制栏的宽度, 提供 `min`、`mid`、`max`三档内置值；也可以传具体宽度值    | _string\/number\/`min`\/`mid`\/`max`_  | `mid` `v2.7.3` `max` `v2.9.0`   |
+
+### Slot
+
+| 名称  | 说明               |
+| ----- | ------------------ |
+| left  | 自定义左侧区域内容 |
+| right | 自定义右侧区域内容 |
+| title | 自定义标题         |
+
+### Events
+
+| 事件名           | 说明               | 参数 |
+| ---------------- | ------------------ | ---- |
+| bind:click-left  | 点击左侧返回 icon 时触发 | -    |
+| bind:click-right | 点击右侧按钮时触发 | -    |
+| bind:click-title `v2.0.0` | 点击中央标题时触发 | -    |
+| bind:click-left-icon `v2.0.0` | 点击左侧 icon 时触发（非返回 icon） | -    |
+| bind:click-left-text `v2.0.0` | 点击左侧文本时触发 | -    |
+| bind:click-right-icon `v2.7.0` | 点击右侧图标时触发 | -    |
+| bind:click-right-text `v2.7.0` | 点击右侧文本时触发 | -    |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+| title-class  | 标题样式类   |
+| left-icon-class `v2.0.0` | 左侧图标样式类 |
+| right-text-class `v2.1.0` | 右侧文字样式类 |
+| right-icon-class `v2.7.0` | 右侧图标样式类 |
+| left-text-class `v2.7.0` | 左侧文字样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --nav-bar-height    | _var(--app-device-navbar-height, 46px)_     | 导航栏高度 |
+| --nav-bar-round-min-height `v2.1.0`    | _56px_        | 导航栏圆角存在时的最小高度 |
+| --nav-bar-round-border-radius `v2.1.0`   | _16px 16px 0px 0px_     | 是否显示导航栏圆角 |
+| --nav-bar-background-color    | _var(--app-B2, #ffffff)_               | 导航栏背景色 |
+| --nav-bar-arrow-color         | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏箭头颜色 |
+| --nav-bar-icon-size `@deprecated v2.7.0`   | _32px_     | 导航栏图标大小 |
+| --nav-bar-icon-color          | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏图标颜色 |
+| --nav-bar-icon-margin `@deprecated v2.7.0`    | _0_      | 导航栏图标外边距 |
+| --nav-bar-text-font-size `v2.1.0`         | _16px_ `v2.1.0` _17px_ `v2.7.3`   | 导航栏侧边文字大小 |
+| --nav-bar-text-font-weight `v2.7.0`         | _600_ `v2.7.0` _normal_ `v2.7.3`   | 导航栏侧边文字字体字重 |
+| --nav-bar-text-color          | _var(--app-B2-N2, rgba(0, 0, 0, 1))_   | 导航栏文字颜色 |
+| --nav-bar-title-font-size     | _17px_                  | 导航栏标题文字大小 |
+| --nav-bar-title-font-weight   | _600_                                  | 导航栏标题字重 |
+| --nav-bar-title-text-color    | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏标题文字颜色 |
+| --nav-bar-home-font-size      | _22px_                                 | 导航栏首页文字大小 |
+| --nav-bar-home-font-weight    | _600_                                  | 导航栏首页字重 |
+| --nav-bar-home-text-color     | _var(--app-B2-N1, rgba(0, 0, 0, 1))_   | 导航栏首页文字颜色 |
+| --nav-bar-right-text-color `v2.5.1`  | _var(--app-B2-N1, rgba(0, 0, 0, 1))_  | 导航栏右侧文字颜色 |
+| --nav-bar-title-max-width `v2.6.0`    | _56%_ `v2.6.0` _calc(100% - 98px - 16px)_ `v2.7.0`   | 导航栏标题的宽度 |
+| --nav-bar-side-width `v2.7.0`    | _98px_ `v2.7.0` _80px_ `v2.7.3`  | 两边默认宽度 |
+| --nav-bar-text-padding `v2.7.0`    | _20px_ `v2.7.0` _16px_ `v2.7.3`    | 两边文字内边距 |
+| --nav-bar-icon-padding `v2.7.0`    | _16px_   | 两边图标内边距 |
+| --nav-bar-title-margin `v2.7.0`    | _16px_   | 标题外边距 |
+| --nav-bar-home-max-width `v2.7.0`    | _calc(100% - 98px - 16px)_   | 小程序首页时左侧标题最大宽度 |
+| --nav-bar-side-width-min `v2.7.3`    | _40px_   | 侧边min时宽度 |
+| --nav-bar-side-width-max `v2.7.3`    | _105px_   | 侧边max时宽度 |
+
+
+
+

package/lib/nav-bar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar,.smart-nav-bar__placeholder{box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px))}.smart-nav-bar__placeholder--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__placeholder--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,17px);font-weight:var(--nav-bar-text-font-weight,normal);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,80px)}.smart-nav-bar__left--min,.smart-nav-bar__right--min{width:var(--nav-bar-side-width-min,var(--nav-bar-side-width,40px))}.smart-nav-bar__left--max,.smart-nav-bar__right--max{width:var(--nav-bar-side-width-max,var(--nav-bar-side-width,105px))}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:100%}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,16px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,16px)}

package/lib/nav-bar/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/nav-bar/index.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    classes: [
+        'title-class',
+        'right-text-class',
+        'left-icon-class',
+        'right-icon-class',
+        'left-text-class',
+    ],
+    props: {
+        title: String,
+        sideWidth: {
+            type: null,
+            value: 'max',
+        },
+        fixed: Boolean,
+        placeholder: Boolean,
+        background: String,
+        leftTextType: {
+            type: String,
+            value: 'back',
+        },
+        leftText: String,
+        leftIcon: String,
+        leftIconColor: String,
+        leftIconSize: {
+            type: null,
+            value: 32,
+        },
+        rightText: String,
+        rightTextColor: String,
+        rightIcon: String,
+        rightIconColor: String,
+        rightIconSize: {
+            type: null,
+            value: 32,
+        },
+        customStyle: String,
+        leftArrow: Boolean,
+        border: {
+            type: Boolean,
+            value: false,
+        },
+        round: {
+            type: Boolean,
+            value: false,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        safeAreaInsetTop: {
+            type: Boolean,
+            value: true,
+        },
+        leftArrowAriaLabel: {
+            type: String,
+            value: '',
+        },
+        leftIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        rightIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        leftArrowIcon: Left_1.default,
+    },
+    methods: {
+        onClickLeft: function () {
+            this.$emit('click-left');
+        },
+        onClickRight: function () {
+            this.$emit('click-right');
+        },
+        onClickTitle: function () {
+            this.$emit('click-title');
+        },
+        onClickRightIcon: function () {
+            this.$emit('click-right-icon');
+        },
+        onClickLeftIcon: function () {
+            this.$emit('click-left-icon');
+        },
+        onClickLeftText: function () {
+            this.$emit('click-left-text');
+        },
+        onClickRightText: function () {
+            this.$emit('click-right-text');
+        },
+    },
+});

package/lib/nav-bar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-icon": "../icon/index"
+  }
+}

package/lib/nav-bar/index.wxml

@@ -0,0 +1,87 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  wx:if="{{ fixed && placeholder }}"
+  class="smart-nav-bar__placeholder{{ safeAreaInsetTop ? ' smart-nav-bar__placeholder--safe' : '' }}{{ round ? ' smart-nav-bar__placeholder--round' : '' }}"
+/>
+
+<view
+  class="{{ utils.bem('nav-bar', { fixed, round, safe: safeAreaInsetTop }) }} custom-class {{ border ? 'smart-hairline--bottom' : '' }}"
+  style="{{ computed.barStyle({ zIndex, background }) }}; {{ customStyle }}"
+>
+  <view class="smart-nav-bar__content">
+    <view class="{{ computed.leftClass({ sideWidth, leftTextType, leftText, leftArrow, leftIcon }) }}" style="{{ computed.sideStyle({ sideWidth }) }}" bind:tap="onClickLeft">
+      <smart-icon
+        wx:if="{{ leftArrow }}"
+        size="24px"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        name="{{ leftArrowIcon }}"
+        data-type="leftArrow"
+        aria-role="button"
+        aria-label="{{ leftArrowAriaLabel }}"
+        custom-class="smart-nav-bar__arrow"
+      />
+      <view
+        wx:if="{{ leftIcon }}"
+        data-type="leftIcon"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        class="smart-nav-bar__icon-wrap"
+        catch:tap="onClickLeftIcon"
+        aria-role="button"
+        role="button"
+        aria-label="{{ leftIconAriaLabel }}"
+      >
+        <smart-icon 
+         class="left-icon-class" 
+         custom-class="smart-nav-bar__icon" 
+         size="{{ leftIconSize }}" 
+         name="{{ leftIcon }}" 
+         color="{{ leftIconColor }}" 
+        />
+      </view>
+      <view
+        wx:if="{{ leftText }}"
+        class="smart-nav-bar__text left-text-class"
+        catch:tap="onClickLeftText"
+        hover-class="{{ leftTextType === 'back' ? 'smart-nav-bar__text--hover' : '' }}"
+        hover-stay-time="70"
+      >
+        {{ leftText }}
+      </view>
+      <slot name="left" />
+    </view>
+    <view class="smart-nav-bar__title title-class smart-ellipsis" bind:tap="onClickTitle">
+      <block>{{ title }}</block>
+      <slot name="title" />
+    </view>
+    <view class="{{ computed.rightClass({ sideWidth, rightText }) }}" style="{{ computed.sideStyle({ sideWidth }) }}" bind:tap="onClickRight">
+      <view
+        wx:if="{{ rightIcon }}"
+        data-type="rightIcon"
+        hover-class="smart-nav-bar__icon--hover"
+        hover-stay-time="70"
+        class="smart-nav-bar__icon-wrap"
+        bind:tap="onClickRightIcon"
+        aria-role="button"
+        role="button"
+        aria-label="{{ rightIconAriaLabel }}"
+      >
+        <smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
+      </view>
+      <view
+        wx:if="{{ rightText }}"
+        class="smart-nav-bar__text right-text-class"
+        style="color: {{ rightTextColor }};"
+        hover-class="smart-nav-bar__text--hover"
+        hover-stay-time="70"
+        bind:tap="onClickRightText"
+      >
+        {{ rightText }}
+      </view>
+      <slot name="right" />
+    </view>
+  </view>
+</view>

package/lib/nav-bar/index.wxs

@@ -0,0 +1,59 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var utils = require('../wxs/utils.wxs');
+
+function barStyle(data) {
+  return style({
+    'z-index': data.zIndex,
+    background: data.background,
+  });
+}
+
+function leftClass(data) {
+  var classObj = {};
+  if (data.sideWidth === 'max') {
+    classObj.max = true;
+  } else if (data.sideWidth === 'min') {
+    classObj.min = true;
+  } else {
+    classObj.mid = true;
+  }
+  classObj.home = data.leftTextType === 'home';
+  classObj.title = data.leftTextType === 'title';
+  classObj.text = !!data.leftText;
+  classObj.icon = data.leftArrow || data.leftIcon;
+  return utils.bem('nav-bar__left', classObj);
+}
+
+function rightClass(data) {
+  var classObj = {};
+  if (data.sideWidth === 'max') {
+    classObj.max = true;
+  } else if (data.sideWidth === 'min') {
+    classObj.min = true;
+  } else {
+    classObj.mid = true;
+  }
+  classObj.text = !!data.rightText;
+  return utils.bem('nav-bar__right', classObj);
+}
+
+function sideStyle(data) {
+  var isDefaultWidth = ['min', 'max', 'mid'].includes(data.sideWidth);
+  var width = '';
+  if (!isDefaultWidth && data.sideWidth) { 
+    if (typeof data.sideWidth === 'string' && data.sideWidth.includes('px')) { 
+      width = data.sideWidth;
+    } else {
+      width = data.sideWidth + 'px';
+    }
+  }
+  return width ? 'width: ' + width + ';' : '';
+}
+
+module.exports = {
+  barStyle: barStyle,
+  leftClass: leftClass,
+  rightClass: rightClass,
+  sideStyle: sideStyle,
+};

package/lib/nav-bar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar,.smart-nav-bar__placeholder{box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px))}.smart-nav-bar__placeholder--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__placeholder--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,17px);font-weight:var(--nav-bar-text-font-weight,normal);overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,80px)}.smart-nav-bar__left--min,.smart-nav-bar__right--min{width:var(--nav-bar-side-width-min,var(--nav-bar-side-width,40px))}.smart-nav-bar__left--max,.smart-nav-bar__right--max{width:var(--nav-bar-side-width-max,var(--nav-bar-side-width,105px))}.smart-nav-bar__left{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:100%}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-title-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--text{padding-left:var(--nav-bar-text-padding,16px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse;padding-right:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));text-align:right}.smart-nav-bar__right--text{padding-right:var(--nav-bar-text-padding,16px)}