@tuya-miniapp/smart-ui 2.13.2-beta-0 → 2.13.2-beta-2

package/dist/slider/README.md

@@ -0,0 +1,366 @@
+---
+category: 数据录入
+---
+
+# Slider 滑块
+
+### 介绍
+
+滑动输入条，用于在给定的范围内选择一个值。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-slider": "@tuya-miniapp/smart-ui/lib/normal-slider/index"
+}
+```
+
+## 代码演示
+
+### 普通滑动条
+
+> 注意 instanceId 值必选，需要设置为一个字符串值且不能数字开头，每个 slider 实例的 instanceId 不同
+
+```html
+<smart-slider
+  instanceId="slider1"
+  trackStyle="height:4px"
+  barStyle="height:4px"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条
+
+设置 `step` 属性可开启间隔拖动模式
+
+```html
+<smart-slider
+  instanceId="slider2"
+  trackStyle="height:8px"
+  barStyle="height:8px"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:4px;"
+  activeStepStyle="background:#fff;"
+  showSteps="{{true}}"
+  step="{{10}}"
+  min="{{0}}"
+  max="{{100}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 间隔滑动条隐藏滑块
+
+设置 `hideThumbButton` 为 `true` 可以隐藏滑块
+
+```html
+<smart-slider
+  instanceId="slider3"
+  trackStyle="height:40px;border-radius:16px;"
+  barStyle="height:40px;border-radius:16px;"
+  thumbStyle="width:18px;height:18px;"
+  stepStyle="width:4px;height:12px;border-radius:4px;"
+  activeStepStyle="width:4px;height:12px;border-radius:4px;background:#fff;"
+  hideThumbButton="{{true}}"
+  showSteps="{{true}}"
+  step="{{30}}"
+  min="{{0}}"
+  max="{{90}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 拖动滑动条
+
+设置 `parcel` 为true，可以使滑块包裹在滑条内。
+
+```html
+<smart-slider
+  instanceId="slider4"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:13px;"
+  barStyle="height:22px;border-radius:13px;"
+  thumbStyle="width:20px;height:20px;background:#fff;border-radius:50%;"
+  parcelThumbWidth="{{18}}"
+  parcelThumbHeight="{{18}}"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式1
+
+可通过 `trackStyle`、`barStyle`、`thumbStyle` 自定义滑槽、滑动条、滑块的样式
+
+```html
+<smart-slider
+  instanceId="slider5"
+  trackStyle="height:45px;border-radius:8px;"
+  barStyle="height:45px;border-radius:8px;"
+  thumbStyle="width:15px;height:50px;background:#BBC5D4;border:2px solid #FFFFFF;box-shadow:0px 0px 2px 0px rgba(0, 0, 0, 0.5);border-radius:2px;"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+
+### 拖动滑动条自定义样式2
+
+```html
+<smart-slider
+  instanceId="slider6"
+  parcel="{{true}}"
+  parcelMargin="{{2}}"
+  trackStyle="height:26px;border-radius:5px;"
+  barStyle="height:22px;border-radius:5px;"
+  parcelThumbWidth="{{3}}"
+  parcelThumbHeight="{{16}}"
+  thumbStyle="width:5px;height:16px;background:#fff;"
+  value="{{currentValue}}"
+  bind:end="onChange"
+/>
+```
+
+```js
+Page({
+  data: {
+    currentValue: 50,
+  },
+  onChange(event) {
+    this.setData({
+      currentValue: event.detail.value,
+    });
+  },
+});
+```
+
+### 双滑块滑动条
+
+两个滑块的滑动条，需要引用：
+
+```json
+"usingComponents": {
+  "smart-range-slider": "@tuya-miniapp/smart-ui/lib/slider/index"
+}
+```
+
+添加 `range` 属性就可以开启双滑块模式，确保 `value` 的值是一个数组。
+
+```html
+<smart-range-slider
+  min="{{0}}"
+  max="{{100}}"
+  value="{{range}}"
+  bind:change="onRangeChange"
+  bar-height="4px"
+  inactive-color="#D8D9DC"
+  active-color="#007AFF"
+/>
+```
+
+```js
+Page({
+  data: {
+    range: [10, 40],
+  },
+  onRangeChange(event) {
+    this.setData({
+      range: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数                             | 说明                                   | 类型         | 默认值   |
+| -------------------------------- | -------------------------------------- | ------------ | -------- |
+| active-step-style                | 激活阶段样式                           | _string_     | null     |
+| bar-style                        | 滑条样式                               | _string_     | null     |
+| class-name                       | css 样式名                             | _string_     | null     |
+| direction                        | 滑条方向（"horizontal"                 | "vertical"） | _string_ | null |
+| disable                          | 是否禁用滑块                           | _boolean_    | false    |
+| enable-touch                     | 是否启用触摸跳跃                       | _boolean_    | true     |
+| enable-touch-bar                 | 是否启用触摸 bar 增加偏移              | _boolean_    | false    |
+| hidden                           | 是否隐藏组件                           | _boolean_    | null     |
+| hide-bar-on-first-render         | 是否在首次渲染时隐藏 bar               | _boolean_    | false    |
+| hide-thumb                       | 是否隐藏滑块                           | _boolean_    | false    |
+| hide-thumb-button                | 是否隐藏 thumb 按钮                    | _boolean_    | false    |
+| hot-area-style                   | 点击热区样式                           | _string_     | null     |
+| instance-id                      | 唯一 ID                                | _string_     | null     |
+| max                              | 最大值                                 | _number_     | 100      |
+| min                              | 最小值                                 | _number_     | 0        |
+| parcel                           | 是否启用 parcel 模式                   | _boolean_    | false    |
+| parcel-margin                    | parcel 模式下滑块边距                  | _number_     | 0        |
+| parcel-thumb-height              | parcel 模式下滑块高度                  | _number_     | null     |
+| parcel-thumb-width               | parcel 模式下滑块宽度                  | _number_     | null     |
+| reverse                          | 是否反转滑条                           | _boolean_    | false    |
+| show-steps                       | 是否显示阶段提示                       | _boolean_    | false    |
+| show-text                        | 是否在 bar 上显示文本                  | _boolean_    | null     |
+| step                             | 阶段值                                 | _number_     | 1        |
+| step-style                       | 阶段样式                               | _string_     | null     |
+| text-style                       | 文本样式                               | _string_     | null     |
+| text-template                    | 文本格式化模板，例如 "比率 {{text}} %" | _string_     | null     |
+| thumb-height                     | 滑块高度                               | _number_     | null     |
+| thumb-style                      | 滑块样式                               | _string_     | null     |
+| thumb-style-calc                 | 动态计算 thumb 样式                    | _null_       | null     |
+| thumb-style-render-formatter     | 自定义 thumb 样式渲染格式化函数        | _null_       | null     |
+| thumb-style-render-value-reverse | 是否反转 thumb 样式渲染的值            | _boolean_    | false    |
+| thumb-style-render-value-scale   | 自定义 thumb 样式渲染时的值缩放比例    | _number_     | 1        |
+| thumb-style-render-value-start   | 自定义 thumb 样式渲染时的起始值        | _number_     | 1        |
+| thumb-width                      | 滑块宽度                               | _number_     | null     |
+| thumb-wrap-style                 | 滑块包装样式                           | _null_       | null     |
+| track-style                      | 轨道样式                               | _string_     | null     |
+| value                            | 右滑块初始值/单向滑条初始值            | _number_     | 0        |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| bar `v.2.4.0` | 滑动条插槽 |
+| thumb `v.2.4.0` | 滑块插槽 |
+
+### Events
+
+| 事件名      | 说明         | 参数                         |
+| ----------- | ------------ | ---------------------------- |
+| bind:change | 值改变后触发 | event.detail.value: 当前进度 |
+| bind:end    | 拖动松手触发 | event.detail.value: 当前进度 |
+| bind:start  | 拖动前触发   | event.detail.value: 当前进度 |
+
+## 双滑块滑动条 API
+
+### 双滑块滑动条 Props
+
+| 参数              | 说明                                     | 类型                 | 默认值    |
+| ----------------- | ---------------------------------------- | -------------------- | --------- |
+| active-color      | 进度条激活态颜色                         | _string_             | `#1989fa` |
+| bar-height        | 进度条高度，默认单位为 `px`              | _string \| number_   | `2px`     |
+| disabled          | 是否禁用滑块                             | _boolean_            | `false`   |
+| inactive-color    | 进度条默认颜色                           | _string_             | `#e5e5e5` |
+| max               | 最大值                                   | _number_             | `100`     |
+| min               | 最小值                                   | _number_             | `0`       |
+| range `v1.8.4`    | 是否开启双滑块模式                       | _boolean_            | `false`   |
+| step              | 步长                                     | _number_             | `1`       |
+| use-button-slot   | 是否使用按钮插槽                         | _boolean_            | `false`   |
+| value             | 当前进度百分比，在双滑块模式下为数组格式 | _number \| number[]_ | `0`       |
+| vertical `v1.8.5` | 是否垂直展示                             | _boolean_            | `false`   |
+
+### 双滑块滑动条 Events
+
+| 事件名          | 说明             | 参数                         |
+| --------------- | ---------------- | ---------------------------- |
+| bind:change     | 进度值改变后触发 | event.detail: 当前进度       |
+| bind:drag       | 拖动进度条时触发 | event.detail.value: 当前进度 |
+| bind:drag-end   | 结束拖动时触发   | -                            |
+| bind:drag-start | 开始拖动时触发   | -                            |
+
+### 双滑块滑动条外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 双滑块滑动条 Slots
+
+| 名称                  | 说明                                | 参数                |
+| --------------------- | ----------------------------------- | ------------------- |
+| button                | 自定义滑块按钮                      | _{ value: number }_ |
+| left-button `v1.8.4`  | 自定义左侧滑块按钮（双滑块模式下）  | _{ value: number }_ |
+| right-button `v1.8.4` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ |
+
+### 样式变量
+
+双滑块滑动条样式变量  
+  
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --slider-active-background-color  | _#1989fa_                               | 活动状态背景颜色   |
+| --slider-inactive-background-color| _#ebedf0_                               | 非活动状态背景颜色 |
+| --slider-disabled-opacity         | _0.3_                                   | 禁用状态透明度     |
+| --slider-bar-height               | _2px_                                   | 滑动条高度         |
+| --slider-button-width             | _24px_                                  | 滑块按钮宽度       |
+| --slider-button-height            | _24px_                                  | 滑块按钮高度       |
+| --slider-button-border-radius     | _50%_                                   | 滑块按钮边框圆角   |
+| --slider-button-background-color  | _#fff_                                  | 滑块按钮背景颜色   |
+| --slider-button-box-shadow        | _0 1px 2px rgba(0, 0, 0, 0.5)_          | 滑块按钮阴影       |
+| --slider-thumb-color              | _var(--app-B3, #ffffff)_                | 滑块拇指颜色       |

package/dist/stepper/README.md

@@ -0,0 +1,208 @@
+---
+category: 数据录入
+---
+
+# Stepper 步进器
+
+### 介绍
+
+步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-stepper": "@tuya-miniapp/smart-ui/lib/stepper/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`value`设置输入值，可以通过`change`事件监听到输入值的变化。
+
+```html
+<smart-stepper value="{{ 1 }}" bind:change="onChange" />
+```
+
+```js
+Page({
+  onChange(event) {
+    console.log(event.detail);
+  },
+});
+```
+
+### 步长设置
+
+通过`step`属性设置每次点击增加或减少按钮时变化的值，默认为`1`。
+
+```html
+<smart-stepper value="{{ 1 }}" step="2" />
+```
+
+### 限制输入范围
+
+通过`min`和`max`属性限制输入值的范围。
+
+```html
+<smart-stepper value="{{ 5 }}" min="5" max="8" />
+```
+
+### 支持负数输入 `v2.13.2`
+
+当`min`小于`0`时，输入框支持手动输入负数，适合温度、偏移量等允许负值的场景。
+
+```html
+<smart-stepper value="{{ -3 }}" min="{{ -10 }}" max="{{ 10 }}" />
+```
+
+### 限制输入整数
+
+设置`integer`属性后，输入框将限制只能输入整数。
+
+```html
+<smart-stepper value="{{ 1 }}" integer />
+```
+
+### 禁用状态
+
+通过设置`disabled`属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。
+
+```html
+<smart-stepper value="{{ 1 }}" disabled />
+```
+
+### 关闭长按
+
+通过设置`long-press`属性决定步进器是否开启长按手势。
+
+```html
+<smart-stepper value="{{ 1 }}" long-press="{{ false }}" />
+```
+
+### 固定小数位数
+
+通过设置`decimal-length`属性可以保留固定的小数位数。
+
+```html
+<smart-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
+```
+
+### 异步变更
+
+如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`。
+
+```html
+<smart-stepper value="{{ value }}" async-change bind:change="onChange" />
+```
+
+```js
+Page({
+  data: {
+    value: 1,
+  },
+
+  onChange(value) {
+    Toast.loading({ forbidClick: true });
+
+    setTimeout(() => {
+      Toast.clear();
+      this.setData({ value });
+    }, 500);
+  },
+});
+```
+
+### 自定义大小
+
+通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度。
+
+```html
+<smart-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
+```
+
+## API
+
+### Props
+
+| 参数                  | 说明                                                                            | 类型               | 默认值  |
+| --------------------- | ------------------------------------------------------------------------------- | ------------------ | ------- |
+| always-embed `v1.9.3` | 强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | _boolean_          | `false` |
+| async-change          | 是否开启异步变更，开启后需要手动控制输入值                                      | _boolean_          | `false` |
+| button-size           | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致                       | _string \| number_ | `28px`  |
+| decimal-length        | 固定显示的小数位数                                                              | _number_           | -       |
+| disable-input         | 是否禁用输入框                                                                  | _boolean_          | `false` |
+| disable-minus         | 是否禁用减少按钮                                                                | _boolean_          | -       |
+| disable-plus          | 是否禁用增加按钮                                                                | _boolean_          | -       |
+| disabled              | 是否禁用                                                                        | _boolean_          | `false` |
+| input-width           | 输入框宽度，默认单位为 `px`                                                     | _string \| number_ | `32px`  |
+| integer               | 是否只允许输入整数                                                              | _boolean_          | `false` |
+| long-press            | 是否开启长按手势                                                                | _boolean_          | `true`  |
+| max                   | 最大值                                                                          | _string \| number_ | -       |
+| min                   | 最小值                                                                          | _string \| number_ | `1`     |
+| minus-aria-label `v2.13.0` | 减少按钮的无障碍读屏文案                                                   | _string_           | -       |
+| name                  | 在表单内提交时的标识符                                                          | _string_           | -       |
+| plus-aria-label `v2.13.0` | 增加按钮的无障碍读屏文案                                                    | _string_           | -       |
+| show-minus            | 是否显示减少按钮                                                                | _boolean_          | `true`  |
+| show-plus             | 是否显示增加按钮                                                                | _boolean_          | `true`  |
+| step                  | 步长                                                                            | _string \| number_ | `1`     |
+| theme                 | 样式风格，可选值为 `round`                                                      | _string_           | -       |
+| value                 | 输入值                                                                          | _string \| number_ | 最小值  |
+
+### Events
+
+| 事件名         | 说明                     | 回调参数                   |
+| -------------- | ------------------------ | -------------------------- |
+| bind:blur      | 输入框失焦时触发         | -                          |
+| bind:change    | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 |
+| bind:focus     | 输入框聚焦时触发         | -                          |
+| bind:minus     | 点击减少按钮时触发       | -                          |
+| bind:overlimit | 点击不可用的按钮时触发   | -                          |
+| bind:plus      | 点击增加按钮时触发       | -                          |
+
+### Slot
+
+| 名称  | 说明     |
+| ----- | -------- |
+| minus | 减号按钮 |
+| plus  | 加号按钮 |
+
+### 外部样式类
+
+| 类名            | 说明           |
+| --------------- | -------------- |
+| custom-class    | 根节点样式类   |
+| input-class     | 输入框样式类   |
+| minusmart-class | 减号按钮样式类 |
+| plusmart-class  | 加号按钮样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --stepper-container-background-color | _var(--app-B6-N9, rgba(0, 0, 0, 0.05))_ | 背景色 |
+| --stepper-background-border-radius | _10px_ | 背景圆角 |
+| --stepper-padding | _2px_ | 外部合作内边距 |
+| --stepper-active-color | _#e8e8e8_ | 按钮点击后颜色 |
+| --stepper-background-color | _var(--app-B6, #fff)_ | 按钮背景色 |
+| --stepper-button-icon-color | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_ | 按钮内部图标颜色 |
+| --stepper-button-disabled-color | _none_ `v2.1.7`  _var(--app-B6, #ffffff)_ `v2.6.1` | 按钮禁用颜色 |
+| --stepper-button-disabled-icon-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 按钮禁用图标颜色 |
+| --stepper-button-round-theme-color | _#ee0a24_ | 圆角样式按钮颜色 |
+| --stepper-btn-width | _44px_ | 按钮宽度 |
+| --stepper-btn-height | _28px_ | 按钮高度 |
+| --stepper-input-width | _50px_ | 中间数组输入框宽度 |
+| --stepper-input-height | _28px_ | 中间数组输入框高度 |
+| --stepper-input-font-size | _16px_ | 中间数组输入框字体大小 |
+| --stepper-input-line-height | _normal_ | 中间数组输入框字体高度 |
+| --stepper-input-text-color | _var(--app-B6-N1, rgba(0, 0, 0, 1))_ | 中间数组输入框字体颜色 |
+| --stepper-input-disabled-text-color | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_ | 中间数组输入框禁用模式字体颜色 |
+| --stepper-border-radius | _8px_ | 按钮圆角 |
+| --stepper-button-border `v2.2.0` | _0_ | 按钮边框 |
+| --stepper-button-icon-font-size `v2.2.0` | _22px_ | 按钮内部图标的字体大小 |

package/dist/sticky/README.md

@@ -0,0 +1,124 @@
+---
+category: 布局
+---
+
+# Sticky 粘性布局
+
+### 介绍
+
+Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-sticky": "@tuya-miniapp/smart-ui/lib/sticky/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在`Sticky`组件内即可。
+
+```html
+<smart-sticky>
+  <smart-button type="primary">基础用法</smart-button>
+</smart-sticky>
+```
+
+### 吸顶距离
+
+通过`offset-top`属性可以设置组件在吸顶时与顶部的距离。
+
+```html
+<smart-sticky offset-top="{{ 50 }}">
+  <smart-button type="info">吸顶距离</smart-button>
+</smart-sticky>
+```
+
+### 指定容器
+
+通过`container`属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。
+
+```html
+<view id="container" style="height: 150px;">
+  <smart-sticky container="{{ container }}">
+    <smart-button type="warning">指定容器</smart-button>
+  </smart-sticky>
+</view>
+```
+
+```js
+Page({
+  data: {
+    container: null,
+  },
+
+  onReady() {
+    this.setData({
+      container: () => ty.createSelectorQuery().select('#container'),
+    });
+  },
+});
+```
+
+### 嵌套在 scroll-view 内使用
+
+通过 `scroll-top` 与 `offset-top` 属性可以实现在 scroll-view 内嵌套使用。
+
+```html
+<scroll-view
+  bind:scroll="onScroll"
+  scroll-y
+  id="scroller"
+  style="height: 200px;"
+>
+  <view style="height: 400px; padding-top: 50px;">
+    <smart-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
+      <smart-button type="warning">嵌套在 scroll-view 内</smart-button>
+    </smart-sticky>
+  </view>
+</scroll-view>
+```
+
+```js
+Page({
+  data: {
+    scrollTop: 0,
+    offsetTop: 0,
+  },
+
+  onScroll(event) {
+    ty.createSelectorQuery()
+      .select('#scroller')
+      .boundingClientRect((res) => {
+        this.setData({
+          scrollTop: event.detail.scrollTop,
+          offsetTop: res.top,
+        });
+      })
+      .exec();
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数       | 说明                                                         | 类型       | 默认值 |
+| ---------- | ------------------------------------------------------------ | ---------- | ------ |
+| container  | 一个函数，返回容器对应的 NodesRef 节点                       | _function_ | -      |
+| offset-top | 吸顶时与顶部的距离，单位`px`                                 | _number_   | `0`    |
+| scroll-top | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_   | -      |
+| z-index    | 吸顶时的 z-index                                             | _number_   | `99`   |
+
+### Events
+
+| 事件名      | 说明       | 回调参数                                       |
+| ----------- | ---------- | ---------------------------------------------- |
+| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |