@cloudbase/weda-ui 1.0.24 → 2.0.10

package/src/docs/compsdocs/grid/Container.mdx

@@ -0,0 +1,42 @@
+# 普通容器
+
+<TableLayoutView
+  componentKey="Container"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+普通容器存在多种使用场景，对于应用的搭建有着重要的作用
+
+### 使用普通容器进行组件样式的统一控制
+
+普通容器常被作为其他组件的父级节点进行使用，当普通容器的样式属性修改时，其子节点的组件也会随之进行修改
+
+![](https://qcloudimg.tencent-cloud.cn/raw/6789641ff7a752b2cb2fe77c94fdeb3a.png)
+
+### 使用普通容器进行组件的循环遍历展示
+
+我们可以将普通容器绑定循环后，实现其子节点组件的循环展示，如下图所示，具体操作方式可参考文档: [组件循环说明](https://cloud.tencent.com/document/product/1301/58434)
+
+![](https://qcloudimg.tencent-cloud.cn/raw/9cdb80ecd07ea73cbdb0c644cb788208.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Container"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Container"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/Footer.mdx

@@ -0,0 +1,31 @@
+# 页脚容器
+
+<TableLayoutView
+  componentKey="Footer"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+当组件放置在页脚容器中时，组件位置便会固定展示在页面的底部。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/2f2c5df2b1072ded515e033fde785f19.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Footer"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Footer"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/GridLayout.mdx

@@ -0,0 +1,32 @@
+# 网格布局
+
+<TableLayoutView
+  componentKey="GridLayout"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+网格布局组件可以通过配置区生成对应比例的插槽，用于帮助更好的实现横向的排列效果。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/6ed4e14bb69eede45c745c845f6f6675.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="GridLayout"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="GridLayout"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/Header.mdx

@@ -0,0 +1,31 @@
+# 页头容器
+
+<TableLayoutView
+  componentKey="Header"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+当组件放置在页头容器中时，组件位置便会固定展示在页面的顶部，常用于展示标题。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/91fcc54d14e1440773fb68ec294bcfc1.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Header"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Header"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/Layout.mdx

@@ -0,0 +1,25 @@
+# 垂直布局
+
+<TableLayoutView
+  componentKey="Layout"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Layout"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Layout"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/List.mdx

@@ -0,0 +1,31 @@
+# 分组列表容器
+
+<TableLayoutView
+  componentKey="List"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用分组列表容器的自带插槽即可快速的实现列表的分组效果，常与**列表项**组件配合使用。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/f0ada7b2b47704710b9d14b0e009a9a3.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="List"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="List"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/ScrollView.mdx

@@ -0,0 +1,37 @@
+# 滚动容器
+
+<TableLayoutView
+  componentKey="ScrollView"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容，示例如下:
+
+1. 拖入一个滚动容器组件，将高度设置为300
+
+![](https://qcloudimg.tencent-cloud.cn/raw/15e8ca4864efeda01609b062fc867675.png)
+
+2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/aca40c58815769adad57f551b994a8fe.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="ScrollView"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="ScrollView"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/grid/Swiper.mdx

@@ -0,0 +1,58 @@
+# 轮播容器
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用方法
+
+### 通过数据源数据/变量控制对轮播图的展示内容进行控制
+
+当存在需要使用数据进行轮播图内容管理的场景下，我们可以使用轮播容器组件实现，操作方式如下:
+
+1. 在编辑区中添加一个轮播容器组件，并将图片组件添加轮播容器的子节点下
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a21ba8b333eea0ca66a89e395c772edc.png)
+
+2. 为图片组件通过绑定循环功能，绑定用来控制轮播图内容的循环/普通变量，绑定完成后轮播图即可根据变量中的数据进行渲染
+
+![](https://qcloudimg.tencent-cloud.cn/raw/e713f95b5ae74eb7b55a1ac7c683a1e3.png)
+
+### 使用轮播容器实现高级的轮播场景
+
+我们可以使用轮播容器实现更为复杂的轮播场景，如下图所示:
+
+![](https://qcloudimg.tencent-cloud.cn/raw/3e8f4b15877539b0fb8a6e49fd5ccf5b.png)
+
+1. 为轮播容器的子节点下添加普通容器组件，并在普通容器组件的子节点下添加图片以及按钮组件
+
+![](https://qcloudimg.tencent-cloud.cn/raw/06b7e81713821bf352763ef9ceda52b5.png)
+
+2. 设置按钮组件的定位模式为**固定**，并进行位置的调整后即可实现类似的复杂轮播场景。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/293a179b0b2ed580c97d4e0ba9dcc5a3.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 组件使用限制
+
+需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为auto，否则将无法渲染。

package/src/docs/compsdocs/grid/_category_.json

@@ -0,0 +1 @@
+{ "label": "布局容器", "position": 40 }

package/src/docs/compsdocs/media/Icon.mdx

@@ -0,0 +1,31 @@
+# 图标
+
+<TableLayoutView
+  componentKey="Icon"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+可以通过在图标组件的配置区中选择微搭提供的内置icon实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5cd6ab3affb14dc404ddcd939aa6a220.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Icon"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Icon"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/media/Image.mdx

@@ -0,0 +1,55 @@
+# 图片
+
+<TableLayoutView
+  componentKey="Image"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+### 展示微搭素材中心图片
+
+在图片组件的配置区中点击icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/e8f7807bf68597e6f61d7a7fe8517109.png)
+
+### 展示url图片
+
+图片组件同样支持对图片url进行渲染展示，仅需在配置区中输入对应的图片url便可以完成图片的渲染。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d41b668fd07f55df539507474569dbdb.png)
+
+### 绑定变量实现图片展示
+
+当变量内容为图片url的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
+
+1. 创建一个普通变量，并将其初始值填写为图片的url
+
+![](https://qcloudimg.tencent-cloud.cn/raw/bccd4aff2ae2b17b229b9dbec37e24d4.png)
+
+2. 点击图片组件配置区的绑定按钮，并绑定该变量，可以看到图片已经被正常渲染
+
+![](https://qcloudimg.tencent-cloud.cn/raw/dd90f11577ff88d15db608dfc57817c4.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Image"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Image"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 组件使用限制
+
+需注意，由于小程序端样式限制问题，图片组件的高度不得设置为auto，否则将无法渲染。

package/src/docs/compsdocs/media/_category_.json

@@ -0,0 +1 @@
+{ "label": "多媒体", "position": 50 }

package/src/docs/compsdocs/model/ModelCreate.mdx

@@ -0,0 +1,20 @@
+# 新增组件
+
+## 适用场景
+
+用于新增单条数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的新增页面生成该组件，并与数据的更新/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

package/src/docs/compsdocs/model/ModelDetail.mdx

@@ -0,0 +1,20 @@
+# 详情组件
+
+## 适用场景
+
+用于查看数据详情
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的查看页面生成该组件，并与数据的新增/更新/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

package/src/docs/compsdocs/model/ModelTable.mdx

@@ -0,0 +1,24 @@
+# 表格组件
+
+## 适用场景
+
+用于以表格形式展示列表数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的管理表格页面生成该组件，并与数据的新增/更新/查看页面构建关联关系，实现对应的页面跳转逻辑![](https://qcloudimg.tencent-cloud.cn/raw/d42cd232d5f05c47544286a46bcab537.png)
+
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组       | 默认值      | 说明               |
+| ---------- | -------- | -------------- | ----------- | ------------------ |
+| 绑定数据源 | `object` | 基础属性       | -           | 展示数据的数据来源 |
+| 搜索方式   | -        | 基础属性       | "searchbox" |                    |
+| 筛选字段   | -        | 基础属性       | -           |                    |
+| 按钮       | `array`  | 顶部按钮配置   | -           | 设置组件中的按钮   |
+| 按钮       | `array`  | 操作列按钮配置 | -           | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

package/src/docs/compsdocs/model/ModelUpdate.mdx

@@ -0,0 +1,21 @@
+# 更新组件
+
+## 适用场景
+
+用于更新现有单条数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的更新页面生成该组件，并与数据的新增/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

package/src/docs/compsdocs/model/PageLayout.mdx

@@ -0,0 +1,21 @@
+# 布局组件
+
+## 适用场景
+
+用于构建带有顶部导航的页面布局
+
+## 使用说明
+
+组件顶部区域标题可自定义，中间内容插槽区域中可放入其他组件用于构建页面内容
+
+![](https://qcloudimg.tencent-cloud.cn/raw/5f6380288d48e9b12f7d906358965f11.png)
+
+## 属性介绍
+
+| 属性名   | 类型     | 属性分组 | 默认值   | 说明                   |
+| -------- | -------- | -------- | -------- | ---------------------- |
+| 页面标题 | `string` | 基础属性 | 页面标题 | 组件顶部显示的标题内容 |
+
+## 事件介绍
+
+无

package/src/docs/compsdocs/model/_category_.json

@@ -0,0 +1 @@
+{ "label": "模型组件", "position": 75 }

package/src/docs/compsdocs/navmenu/Classification.mdx

@@ -0,0 +1,38 @@
+# 侧边导航面板
+
+<TableLayoutView
+  componentKey="Classification"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用侧边导航面板组件可以实现页面的左侧Tab切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同Tab的的内容构建，以下文为例:
+
+1. 在侧边导航面板组件的两个内容插槽中分别添加两个文本组件，并为两个文本组件设置不同的内容
+
+![](https://qcloudimg.tencent-cloud.cn/raw/0b5640a94e57826585ea975d66b1b56d.png)
+
+2. 可以看到，当进行Tab切换时，不同的Tab便呈现出了不同的文本组件内容
+
+![](https://qcloudimg.tencent-cloud.cn/raw/3b40f7e41c7e4b42c143119937e24996.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Classification"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Classification"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/navmenu/NavBar.mdx

@@ -0,0 +1,43 @@
+# 顶部导航
+
+<TableLayoutView
+  componentKey="NavBar"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+通过配置区进行简单的配置即可快速实现页面的顶部导航效果，同时该组件提供了返回上级页面与返回主页的功能，当在组件区开启对应配置时该组件便会渲染出对应的按钮，点击后即可实现对应的页面跳转。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d96f3fbe60300da2c1eead0d6abbe4b6.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="NavBar"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="NavBar"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>
+
+## 限制说明
+
+1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出2个导航栏，同时导航栏中间会留有不可消除的空白间距
+
+   <img src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png" width="50%" />
+
+   <img src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png" width="35%"/>
+
+2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
+
+   <img src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png" width="50%"/>

package/src/docs/compsdocs/navmenu/NavLayout.mdx

@@ -0,0 +1,30 @@
+# 宫格导航
+
+<TableLayoutView
+  componentKey="NavLayout"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+支持灵活定义各个导航项目的图标文字内容、跳转交互、PC/移动多端列数和各项细致完备的样式属性![](https://qcloudimg.tencent-cloud.cn/raw/85be8cc619042f1e16f58e4015ee0e67.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="NavLayout"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="NavLayout"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/navmenu/TabBar.mdx

@@ -0,0 +1,43 @@
+# Tab 栏
+
+<TableLayoutView
+  componentKey="TabBar"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+通过组件配置区即可快速实现Tab栏的实现，Tab栏除了基础的标题、图标配置外也可以通过配置区快速的实现页面跳转逻辑。
+
+### 设置选中页面
+
+1. 首先在配置区中进行选中页面的设置，以首页为例
+
+![](https://qcloudimg.tencent-cloud.cn/raw/291b8e10bd0efd58add639e2aae6d700.png)
+
+2. 随后为第一个Tab进行跳转页面-首页的相关配置
+
+![](https://qcloudimg.tencent-cloud.cn/raw/904e0f94800150671ac0bc7fc149f3d5.png)
+
+3. 可以看到，因为Tab的跳转页面与步骤1中设置的选中页面相同，该Tab的标题与图标便会变为激活状态。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a2b7c6f347ab8889bdcefdb7a80702fa.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="TabBar"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="TabBar"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>