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

package/dist/circle/README.md

@@ -0,0 +1,116 @@
+---
+category: 展示
+new: true
+version: v2.3.0
+---
+
+# Circle 环形进度条
+
+### 介绍
+
+圆环形的进度条组件，支持进度渐变动画。
+
+> v2.3.0 之后重构
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-circle": "@tuya/miniapp-smart-ui/lib/circle/index"
+}
+```
+
+```warning:⚠️注意
+从 v2.3.9 开始将不支持微信小程序。
+```
+
+## 代码演示
+
+### 基础用法
+
+`percent`属性表示进度条的目标进度。
+
+```html
+<smart-circle percent="{{50}}" trackWidth="{{10}}"></smart-circle>
+```
+
+### 缺口圆角
+
+`mode`属性表示类型，angle、angle2 为半圆类型，`angle-offset` `v2.8.0` 属性用于设置半圆类型（`angle`、`angle2`）的起始角度偏移，单位为度。值越大，圆环的缺口越大。默认值为 -1，表示使用默认偏移。
+
+```html
+<smart-circle percent="{{50}}" mode="angle">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle2">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle2" angle-offset="{{30}}">
+</smart-circle>
+```
+
+### 不使用圆角
+
+`round`属性设置为 false 为直角。
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+### 自定义颜色
+
+`fillColor` 可设置自定义颜色，`fillColorStops` 设置渐变色，
+
+```html
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColor="#DE23CB">
+</smart-circle>
+<smart-circle percent="{{50}}" mode="angle" round="{{false}}" fillColorStops="{{gradientColor}}">
+</smart-circle>
+```
+
+```js
+Page({
+  data: {
+    gradientColor: {
+      '0%': '#2361DE',
+      '50%': '#23DEB5',
+    },
+  }
+})
+```
+
+### 自定义宽度
+
+```html
+<smart-circle percent="{{60}}" trackWidth="15" mode="angle" round="{{false}}">
+</smart-circle>
+```
+
+## API
+
+### props
+
+| 属性名                     | 描述     | 类型          | 默认值                     |
+| -------------------------- | -------- | ------------- | -------------------------- |
+| angle-offset   `v2.8.0`   | 角度偏移 | number        | -1                         |
+| children                   | 子元素   | ReactNode     | undefined                  |
+| class-name                 | 类名     | string        | undefined                  |
+| custom-style `v2.3.3`      | 样式     | CSSProperties | undefined                  |
+| fill-color                 | 填充颜色 | string        | '#007AFF'                  |
+| mask-color      | 遮罩颜色 | string        | 'transparent'                  |
+| mode `v2.3.0`              | 样式风格 | string        | `basic`、`angle`、`angle2` |
+| percent                    | 百分比   | number        | 0                          |
+| round `v2.3.0`             | 遮罩颜色 | string        | `true`                     |
+| size                       | 尺寸     | string        | '100px'                    |
+| style `@deprecated v2.1.7` | 样式     | CSSProperties | undefined                  |
+| track-color                | 滑槽颜色 | string        | '#d3d3d3'                  |
+| track-width                | 滑槽宽度 | number        | 10                         |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                     | 默认值    | 描述             |
+| ---------------------------------------- | --------- | ---------------- |
+| --circle-text-color `@deprecated v2.3.0` | _#323233_ | 圆环内的文字颜色 |

package/dist/circle/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}:host{width:-webkit-fit-content;width:fit-content}

package/dist/circle/index.d.ts

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

package/dist/circle/index.js

@@ -0,0 +1,137 @@
+/* eslint-disable guard-for-in */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable prettier/prettier */
+import { SmartComponent } from '../common/component';
+// @ts-ignore
+import Render from './index.rjs';
+const idListRef = {
+    value: [],
+};
+SmartComponent({
+    props: {
+        className: String,
+        customStyle: String,
+        size: {
+            type: String,
+            value: '100px',
+        },
+        trackWidth: {
+            type: Number,
+            value: 10,
+        },
+        trackColor: {
+            type: String,
+            value: '#d3d3d3',
+        },
+        fillColor: {
+            type: String,
+            value: '#007AFF',
+        },
+        maskColor: {
+            type: String,
+            value: 'transparent',
+        },
+        fillColorStops: {
+            type: null,
+        },
+        angleOffset: {
+            type: Number,
+            value: -1,
+        },
+        percent: {
+            type: Number,
+            value: 0,
+            observer(val) {
+                if (this.render && this.data.dpr) {
+                    this.render.init(this.data, this.data.angleOffset);
+                }
+            },
+        },
+        mode: {
+            type: String,
+            // basic | angle
+            value: 'basic',
+        },
+        round: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        canvasId: '',
+        dpr: 0,
+        width: 100,
+        height: 100,
+    },
+    watch: {
+        dpr() {
+            if (this.render) {
+                this.render.init(this.data, this.data.angleOffset);
+            }
+        },
+    },
+    created() {
+        this.initId();
+        this.initSize();
+        this.render = new Render(this);
+    },
+    mounted() {
+        this.initRate();
+    },
+    destroyed() {
+        idListRef.value = idListRef.value.filter(id => id !== this.data.canvasId);
+    },
+    methods: {
+        initId() {
+            if (this.data.canvasId)
+                return;
+            const id = `smart-ui-circle_${String(+new Date()).slice(-4)}_${String(Math.random()).slice(-2)}`;
+            if (idListRef.value.includes(id)) {
+                this.initId();
+                return;
+            }
+            this.setData({
+                canvasId: id,
+            });
+            idListRef.value.push(id);
+        },
+        initSize() {
+            const sizeVal = this.parseSize();
+            this.setData({
+                width: +sizeVal,
+                height: +sizeVal,
+            });
+        },
+        parseSize() {
+            if (typeof this.data.size === 'number')
+                return this.data.size;
+            if (typeof this.data.size === 'string') {
+                const res = this.data.size.match(/\d+/);
+                if (res) {
+                    return res[0];
+                }
+            }
+            return this.data.size;
+        },
+        initRate() {
+            wx.getSystemInfo({
+                success: res => {
+                    const dpr = res.pixelRatio; // 获取设备像素比
+                    const sizeVal = this.parseSize();
+                    const params = {
+                        canvasWidth: +sizeVal,
+                        canvasHeight: +sizeVal,
+                        width: +sizeVal,
+                        height: +sizeVal,
+                        lineWidth: this.data.trackWidth,
+                        dpr: dpr,
+                        canvasId: this.data.canvasId,
+                    };
+                    this.setData(params);
+                },
+            });
+        },
+    },
+});

package/dist/circle/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/circle/index.rjs

@@ -0,0 +1,249 @@
+export default Render({
+  canvas: null,
+  lineWidth: 10,
+  maskColor: '#ffffff',
+  trackColor: '#d3d3d3',
+  fillColorStops: null,
+  dpr: 1,
+  fillColor: '#007AFF',
+
+  async init(data, offsetValue) {
+    let canvas = this.canvas;
+    if (!canvas) {
+      canvas = await getCanvasById(data.canvasId);
+      this.canvas = canvas;
+    }
+    if (!canvas) {
+      console.error('canvas not found');
+      return;
+    }
+
+    const canvaswidth = data.width * data.dpr;
+    const canvasheight = data.height * data.dpr;
+    canvas.width = canvaswidth;
+    canvas.height = canvasheight;
+    canvas.style.width = `${data.width}px`;
+    canvas.style.height = `${data.height}px`;
+
+    const ctx = canvas.getContext('2d');
+
+    this.width = data.width;
+    this.height = data.height;
+
+    this.dpr = data.dpr;
+    this.lineWidth = data.trackWidth;
+    this.maskColor = data.maskColor;
+    this.trackColor = data.trackColor;
+    this.fillColorStops = data.fillColorStops;
+    this.dpr = data.dpr;
+    this.fillColor = data.fillColor;
+    this.mode = data.mode;
+    this.gradientColor = data.gradientColor;
+    this.round = data.round;
+
+    ctx.scale(this.dpr, this.dpr);
+    this.render(data.percent, offsetValue);
+  },
+  percentToDecimal(percent) {
+    percent = percent.replace('%', '');
+    return percent / 100;
+  },
+  renderAll(
+    progress,
+    ops = {
+      lineCap: 'round',
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 1) / 2; // 圆形半径
+    const startAngle = Math.PI; // 起始角度（3点钟方向）
+    const endAngle = 4 * Math.PI; // 结束角度（360度）
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      ctx.lineWidth = lineWidth;
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      const progressAngle = progress * (Math.PI * 2); // 根据进度计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf(
+    progress,
+    ops = {
+      lineCap: 'round',
+      offset: 1,
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 1) / 2; // 圆形半径
+
+    const offset = ops.offset || 1;
+    const startOffset = (180 - offset) / 180;
+    const endOffset = ((180 - offset) + 180 + offset * 2) / 180;
+
+    const startAngle = startOffset * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = endOffset * Math.PI; // 结束角度（360度）
+    const availableAngle = endAngle - startAngle; // 实际可用角度范围
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      // progress 的范围是 0-0.5（对应 percent 0-100%），需要归一化到 0-1
+      const normalizedProgress = progress * 2; // 将 0-0.5 映射到 0-1
+      const progressAngle = normalizedProgress * availableAngle; // 根据归一化进度和实际可用角度范围计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+
+  renderHalf2(
+    progress,
+    ops = {
+      lineCap: 'round',
+      offset: 36,
+    }
+  ) {
+    const canvas = this.canvas;
+    const ctx = canvas.getContext('2d');
+
+    const lineWidth = this.lineWidth; // 进度条宽度
+    const radius = ((this.width - lineWidth) * 1) / 2; // 圆形半径
+
+    const offset = ops.offset || 36;
+    const startOffset = (180 - offset) / 180;
+    const endOffset = ((180 - offset) + 180 + offset * 2) / 180;
+    const startAngle = startOffset * Math.PI; // 起始角度（3点钟方向）
+    const endAngle = endOffset * Math.PI; // 结束角度（360度）
+    const availableAngle = endAngle - startAngle; // 实际可用角度范围
+
+    // 绘制环形进度条的函数
+    const drawProgressBar = (progress, color) => {
+      ctx.clearRect(0, 0, this.width, this.height); // 清除画布
+
+      // 绘制灰色背景
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, endAngle);
+      // 填充颜色
+      ctx.fillStyle = this.maskColor; // 你想填充的颜色
+      ctx.fill(); // 填充路径
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = this.trackColor; // 灰色背景
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+
+      // 绘制进度条
+      // progress 的范围是 0-0.666...（对应 percent 0-100%），需要归一化到 0-1
+      const normalizedProgress = progress * 1.5; // 将 0-0.666... 映射到 0-1 (1 / 0.666... = 1.5)
+      const progressAngle = normalizedProgress * availableAngle; // 根据归一化进度和实际可用角度范围计算角度
+      ctx.beginPath();
+      ctx.arc(this.width / 2, this.height / 2, radius, startAngle, startAngle + progressAngle);
+      ctx.lineWidth = lineWidth;
+
+      if (this.fillColorStops) {
+        // 创建线性渐变（起点x,y 到 终点x,y）
+        const gradient = ctx.createLinearGradient(0, 0, this.width, 0);
+
+        for (const stop in this.fillColorStops) {
+          // 添加渐变色
+          gradient.addColorStop(this.percentToDecimal(stop), this.fillColorStops[stop]);
+        }
+
+        ctx.strokeStyle = gradient; // 自定义颜色
+      } else {
+        ctx.strokeStyle = color; // 自定义颜色
+      }
+
+      ctx.lineCap = ops.lineCap; // 设置圆角效果
+      ctx.stroke();
+    };
+
+    // 示例：绘制不同的进度条
+    drawProgressBar(progress, this.fillColor); // 25%的蓝色进度条
+  },
+  render(val, offsetValue) {
+    var offset = offsetValue !== -1 ? Math.max(offsetValue, 1) : undefined;
+    val = Math.min(Math.max(0, val), 100);
+    if (this.mode === 'basic') {
+      this.renderAll(val / 100, this.round ? { lineCap: 'round' } : { lineCap: '' });
+    }
+    if (this.mode === 'angle') {
+      this.renderHalf(val / 200, this.round ? { lineCap: 'round', offset: offset } : { lineCap: '', offset: offset });
+    }
+    if (this.mode === 'angle2') {
+      this.renderHalf2(val / 150, this.round ? { lineCap: 'round', offset: offset } : { lineCap: '', offset: offset });
+    }
+  },
+});

package/dist/circle/index.wxml

@@ -0,0 +1,8 @@
+<view class="smart-progress-circle" style="width:{{width}}px;height:{{height}}px;{{customStyle}}">
+  <canvas 
+  type="2d" 
+  wx:if="{{canvasId}}" 
+  canvas-id="{{canvasId}}" 
+  style="width:100%;height:100%;"
+  ></canvas>
+</view>

package/dist/circle/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}:host{width:-webkit-fit-content;width:fit-content}

package/dist/col/README.md

@@ -0,0 +1,134 @@
+---
+category: 布局
+---
+
+# Layout 布局
+
+### 介绍
+
+Layout 提供了`smart-row`和`smart-col`两个组件来进行行列布局。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-row": "@tuya/miniapp-smart-ui/lib/row/index",
+  "smart-col": "@tuya/miniapp-smart-ui/lib/col/index"
+}
+```
+
+## 代码演示
+
+### 基本用法
+
+Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置列所占的宽度百分比。此外，添加`offset`属性可以设置列的偏移宽度，计算方式与 span 相同。
+
+```html
+<smart-row>
+  <smart-col span="8" custom-class="dark">span: 8</smart-col>
+  <smart-col span="8" custom-class="light">span: 8</smart-col>
+  <smart-col span="8" custom-class="dark">span: 8</smart-col>
+</smart-row>
+
+<smart-row>
+  <smart-col span="4" custom-class="dark">span: 4</smart-col>
+  <smart-col span="10" offset="4" custom-class="light">offset: 4, span: 10</smart-col>
+</smart-row>
+
+<smart-row>
+  <smart-col offset="12" span="12" custom-class="dark">offset: 12, span: 12</smart-col>
+</smart-row>
+```
+
+less样式：
+
+```less
+.dark,
+.light {
+  color: #fff;
+  font-size: 13px;
+  line-height: 30px;
+  text-align: center;
+  margin-bottom: 10px;
+  background-clip: content-box;
+}
+
+.dark {
+  background-color: #39a9ed;
+}
+
+.light {
+  background-color: #66c6f2;
+}
+```
+
+### 设置列元素间距
+
+通过`gutter`属性可以设置列元素之间的间距，默认间距为 0。
+
+```html
+<smart-row gutter="20">
+  <smart-col span="8" custom-class="dark">span: 8</smart-col>
+  <smart-col span="8" custom-class="light">span: 8</smart-col>
+  <smart-col span="8" custom-class="dark">span: 8</smart-col>
+</smart-row>
+```
+
+less样式：
+
+```less
+.dark,
+.light {
+  color: #fff;
+  font-size: 13px;
+  line-height: 30px;
+  text-align: center;
+  margin-bottom: 10px;
+  background-clip: content-box;
+}
+
+.dark {
+  background-color: #39a9ed;
+}
+
+.light {
+  background-color: #66c6f2;
+}
+```
+
+## API
+
+### Row Props
+
+| 参数   | 说明                          | 类型               | 默认值 |
+| ------ | ----------------------------- | ------------------ | ------ |
+| gutter | 列元素之间的间距（单位为 px） | _string \| number_ | -      |
+
+### Col Props
+
+| 参数   | 说明           | 类型               | 默认值 |
+| ------ | -------------- | ------------------ | ------ |
+| offset | 列元素偏移距离 | _string \| number_ | -      |
+| span   | 列元素宽度     | _string \| number_ | -      |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                          | 默认值                                       | 描述                                       |
+| --------------------------------------------- | -------------------------------------------- | ------------------------------------------ |
+| --collapse-item-transition-duration           | _0.3s_                                       | 折叠项过渡持续时间                         |
+| --collapse-item-content-padding               | _15px_                                       | 折叠项内容内边距                           |
+| --collapse-item-content-font-size             | _13px_                                       | 折叠项内容字体大小                         |
+| --collapse-item-content-line-height           | _1.5_                                        | 折叠项内容行高                             |
+| --collapse-item-content-text-color            | _#969799_                                    | 折叠项内容文本颜色                         |
+| --collapse-item-content-background-color      | _var(--app-B6, #fff)_                        | 折叠项内容背景颜色                         |
+| --collapse-item-title-disabled-color          | _#c8c9cc_                                    | 折叠项标题禁用状态颜色                     |

package/dist/col/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';.smart-col{box-sizing:border-box;float:left}.smart-col--1{width:4.16666667%}.smart-col--offset-1{margin-left:4.16666667%}.smart-col--2{width:8.33333333%}.smart-col--offset-2{margin-left:8.33333333%}.smart-col--3{width:12.5%}.smart-col--offset-3{margin-left:12.5%}.smart-col--4{width:16.66666667%}.smart-col--offset-4{margin-left:16.66666667%}.smart-col--5{width:20.83333333%}.smart-col--offset-5{margin-left:20.83333333%}.smart-col--6{width:25%}.smart-col--offset-6{margin-left:25%}.smart-col--7{width:29.16666667%}.smart-col--offset-7{margin-left:29.16666667%}.smart-col--8{width:33.33333333%}.smart-col--offset-8{margin-left:33.33333333%}.smart-col--9{width:37.5%}.smart-col--offset-9{margin-left:37.5%}.smart-col--10{width:41.66666667%}.smart-col--offset-10{margin-left:41.66666667%}.smart-col--11{width:45.83333333%}.smart-col--offset-11{margin-left:45.83333333%}.smart-col--12{width:50%}.smart-col--offset-12{margin-left:50%}.smart-col--13{width:54.16666667%}.smart-col--offset-13{margin-left:54.16666667%}.smart-col--14{width:58.33333333%}.smart-col--offset-14{margin-left:58.33333333%}.smart-col--15{width:62.5%}.smart-col--offset-15{margin-left:62.5%}.smart-col--16{width:66.66666667%}.smart-col--offset-16{margin-left:66.66666667%}.smart-col--17{width:70.83333333%}.smart-col--offset-17{margin-left:70.83333333%}.smart-col--18{width:75%}.smart-col--offset-18{margin-left:75%}.smart-col--19{width:79.16666667%}.smart-col--offset-19{margin-left:79.16666667%}.smart-col--20{width:83.33333333%}.smart-col--offset-20{margin-left:83.33333333%}.smart-col--21{width:87.5%}.smart-col--offset-21{margin-left:87.5%}.smart-col--22{width:91.66666667%}.smart-col--offset-22{margin-left:91.66666667%}.smart-col--23{width:95.83333333%}.smart-col--offset-23{margin-left:95.83333333%}.smart-col--24{width:100%}.smart-col--offset-24{margin-left:100%}

package/dist/col/index.d.ts

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

package/dist/col/index.js

@@ -0,0 +1,9 @@
+import { useParent } from '../common/relation';
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    relation: useParent('row'),
+    props: {
+        span: Number,
+        offset: Number,
+    },
+});

package/dist/col/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}