@cloudbase/weda-ui 0.2.17 → 2.0.8

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

@@ -0,0 +1,29 @@
+# Tab 元素
+
+<TableLayoutView
+  componentKey="TabBarItem"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+用于放置于Tab栏组件的插槽中使用
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="TabBarItem"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="TabBarItem"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1 @@
+{ "label": "导航菜单", "position": 60 }

package/src/docs/compsdocs/senior/Lottery.mdx

@@ -0,0 +1,48 @@
+# 九宫格抽奖
+
+<TableLayoutView
+  componentKey="Lottery"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+1. 奖品配置，支持手动配置和数据源配置，最多支持8个奖品，不足8个奖品会有占位图显示，超过8个的无效。
+
+手动配置：
+
+![https://qcloudimg.tencent-cloud.cn/raw/3f5eb1b837c60c1b65f2a50ce19a5786.png](https://qcloudimg.tencent-cloud.cn/raw/3f5eb1b837c60c1b65f2a50ce19a5786.png)
+
+绑定数据源配置：
+
+![https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png](https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png)
+
+2. 设置启动抽奖为开始开关，如果设置为关闭则不会触发抽奖动作，抽奖过程成如果绑定数据源返回false，立马停止。
+
+3. 设置抽奖希望的结果，支持1-8，从左上角第一个奖品位置开始为1，2，3……的奖品顺序，
+
+4. 点击开始抽奖页面，触发抽奖动画，开始后收到绑定数据抽奖的结果后动画逐渐停止，并且显示中奖的位置，如果收不到则超时后自动停止动画。
+
+![https://qcloudimg.tencent-cloud.cn/raw/a3e11d2daa54950a69b2c3d9862c57bb.png](https://qcloudimg.tencent-cloud.cn/raw/a3e11d2daa54950a69b2c3d9862c57bb.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Lottery"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Lottery"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>
+
+
+

package/src/docs/compsdocs/senior/Modal.mdx

@@ -0,0 +1,58 @@
+# 弹窗
+
+<TableLayoutView
+  componentKey="Modal"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+使用弹窗组件可以快速的实现页面的底部弹窗效果
+
+### 使用变量控制弹窗的展示/关闭
+
+在实际应用搭建过程中，我们经常会遇到点击按钮后弹出弹窗的场景，实现方式如下:
+
+1. 创建一个boolean类型的普通变量，并将默认值设置为false
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d0936c280bf26e86b192228eabe0d6ba.png)
+
+2. 将弹窗组件的”显示窗口“属性与上一步中创建的普通变量进行绑定，可以看到绑定完成后弹窗组件变为了隐藏状态
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d5a02342da5974b88760a29ac4f931a5.png)
+
+3. 创建一个按钮组件，并为按钮组件配置点击时触发变量赋值方法，配置方式如下图所示:
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a3fd1ea58c7be782150b5f169b80b75a.png)
+
+![](https://qcloudimg.tencent-cloud.cn/raw/42dac526443b92382bf97f00f0866b51.png)
+
+![](https://qcloudimg.tencent-cloud.cn/raw/9986419485249da37645203e5bd733bb.png)
+
+4. 配置完成后，在预览区点击按钮组件，可以看到弹窗成功被调起
+
+![](https://qcloudimg.tencent-cloud.cn/raw/07e104490813cfe2b36a98d46da67d96.png)
+
+弹窗组件同样需要通过变量实现关闭，实现方式与上文相似，通过弹窗的close事件进行变量赋值，实现弹窗的关闭
+
+![](https://qcloudimg.tencent-cloud.cn/raw/bce3e0097b032eafb9f4369561cf726f.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Modal"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Modal"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/senior/SlotMachine.mdx

@@ -0,0 +1,52 @@
+# 抽奖机
+
+<TableLayoutView
+  componentKey="SlotMachine"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+### 点击按钮实现抽奖机滚动
+
+1. 创建一个boolean类型的普通变量，并将初始值设为false
+
+![](https://qcloudimg.tencent-cloud.cn/raw/ed5449e3a45eb731829250a660f85233.png)
+
+2. 在编辑区中添加一个抽奖机组件与一个按钮组件
+
+![](https://qcloudimg.tencent-cloud.cn/raw/91ab3e5aabdbf866c381c209c1bcdd66.png)
+
+
+
+3. 在抽奖机的组件配置区中将"立即开始滚动"绑定刚刚刚刚创建的模型变量并且将"刷新后重置"配置项开启
+
+![](https://qcloudimg.tencent-cloud.cn/raw/f5ae5c3482111168be601f4eb0609257.png)
+
+4. 为按钮组件配置点击时变量赋值的事件，将控制滚动的变量赋值为true，如下图所示
+
+![](https://qcloudimg.tencent-cloud.cn/raw/05165c2b7b15309909aaf6e36129a3f9.png)
+
+5.保存完成后点击按钮，抽奖机便可以开始正常进行滚动
+
+![](https://qcloudimg.tencent-cloud.cn/raw/00e6ef563e9b1a94d9a22b05fd98ac2c.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="SlotMachine"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="SlotMachine"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1 @@
+{ "label": "高级", "position": 70}

package/src/docs/compsdocs/show/Calendar.mdx

@@ -0,0 +1,29 @@
+# 日历
+
+<TableLayoutView
+  componentKey="Calendar"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+展示配置属性中，可添加多个日期，将对应的日期进行置灰或打点标记![](https://qcloudimg.tencent-cloud.cn/raw/0e9258fd54a78f6031d5839b3c92de98.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Calendar"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Calendar"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/Divider.mdx

@@ -0,0 +1,31 @@
+# 分割线
+
+<TableLayoutView
+  componentKey="Divider"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+我们可以使用分割线组件实现页面功能模块之间的分割，如下图所示:
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d1b43a05da18f0e1cd495a5466337452.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Divider"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Divider"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/GraphicCard.mdx

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

package/src/docs/compsdocs/show/Item.mdx

@@ -0,0 +1,32 @@
+# 列表项
+
+<TableLayoutView
+  componentKey="Item"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+在配置区中对组件的各项属性进行自定义配置，即可快速实现常见的列表项展示效果。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/a2c76cf309c1b2146fbccc4a473ceaae.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Item"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Item"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/ItemList.mdx

@@ -0,0 +1,47 @@
+# 图文列表
+
+<TableLayoutView
+  componentKey="ItemList"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+### 手动实现多个列表配置
+
+图文列表组件支持通过在配置区中进行多条列表数据的快速生成。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/c8cd3588f4f28b642dec6b63467aa704.png)
+
+### 通过数据实现列表的自动生成
+
+通过配置区的**绑定数据源**按钮可实现列表的自动生成，方法如下:
+
+1. 点击配置区的**绑定数据源**按钮，进入数据源绑定模式![](https://qcloudimg.tencent-cloud.cn/raw/f22a5edf1163c5fc247ead58c8152c58.png)
+
+2. 推荐绑定以下格式的变量以实现从数据模型中获取列表数据
+   1. 变量类型：模型变量
+   2. 变量初始化方法：查询列表-内置
+   3. 绑定节点![](https://qcloudimg.tencent-cloud.cn/raw/113fbd81692a6c2f144a10fd0df69940.png)
+
+3. 绑定时选取「记录列表」节点![](/Users/tory/Library/Application Support/typora-user-images/image-20220405210624757.png)
+4. 变量绑定完成后，即可对各项属性进行模型变量字段的绑定，配置完成后即可根据模型变量中数据的条数实现列表的自动生成![](https://qcloudimg.tencent-cloud.cn/raw/7102be7820b867b3a33059d43d0e5973.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="ItemList"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="ItemList"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/Media.mdx

@@ -0,0 +1,25 @@
+# 图文展示项
+
+<TableLayoutView
+  componentKey="Media"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Media"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Media"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/StatusTip.mdx

@@ -0,0 +1,25 @@
+# 状态提示
+
+<TableLayoutView
+  componentKey="StatusTip"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="StatusTip"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="StatusTip"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1,33 @@
+# 轮播图
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+### 通过简单配置实现轮播图的展示效果
+
+仅需在组件配置区中进行简单配置即可实现轮播图的展示效果，也可以在配置区中为每一张图片设置其对应的跳转页面，同时在高级设置中我们支持对轮播图组件的播放动画、锚点等高级属性进行深度的自定义配置。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/f569f0ab2f0f8245fa4a4104dbe6cd45.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Swiper"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/show/Tabs.mdx

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

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

@@ -0,0 +1 @@
+{ "label": "展示", "position": 30 }

package/src/docs/compsdocs/show/button.mdx

@@ -0,0 +1,25 @@
+# 按钮
+
+<TableLayoutView
+  componentKey="Button"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 属性
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Button"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件
+
+<TableLayoutView
+  componentKey="Button"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/text/Link.mdx

@@ -0,0 +1,43 @@
+# 链接
+
+<TableLayoutView
+  componentKey="Link"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+### 实现基础的超链接功能
+
+通过在配置区对应用页面/外部链接以及文本内容进行配置后，点击链接组件时即可跳转至对应的页面。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/c8665ead872addcad63f4d06edf65a83.png)
+
+### 实现模块化的点击跳转功能
+
+链接组件同样可实现模块化的跳转功能，在大纲树-链接组件的内容插槽中拖入单个/多个组件，即可将内容插槽中的组件作为一个模块并实现点击跳转功能。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d8a9e45e545f892021959562f73d4893.png)
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Link"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Link"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 限制说明
+
+由于小程序仅支持通过webview组件的方式进行外部链接的跳转，因此链接组件不支持在小程序中进行构建使用。

package/src/docs/compsdocs/text/RichTextView.mdx

@@ -0,0 +1,36 @@
+# 富文本展示
+
+<TableLayoutView
+  componentKey="RichTextView"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+
+富文本展示组件支持对html语言进行渲染，在组件配置区中输入html语言即可实现自定义的页面展示效果。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/2e6e0921ec02486e38cb62cc073989da.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="RichTextView"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="RichTextView"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 限制说明
+
+通过该功能构建的展示内容可能无法在小程序中生效，请以小程序实际运行效果为准。

package/src/docs/compsdocs/text/Text.mdx

@@ -0,0 +1,31 @@
+# 文本
+
+<TableLayoutView
+  componentKey="Text"
+  type="description"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 使用说明
+文本组件可以用于在页面中对文本内容进行基础的展示，通过在配置区可以对文本的样式属性进行自定义的调整。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/53e93064ccaf7f6d08889405a5392b04.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Text"
+  type="attribute"
+  origin="sourceCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Text"
+  type="event"
+  origin="sourceCode"
+></TableLayoutView>

package/src/docs/compsdocs/text/Title.mdx

@@ -0,0 +1,32 @@
+# 标题
+
+<TableLayoutView
+  componentKey="Title"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+标题组件自带不同的标题级别属性，对编辑区进行简单的配置后即可在页面实现不同的标题层级展示。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/d83d5bbf384a113a4c20371b61cd50f4.png)
+
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Title"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Title"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1 @@
+{ "label": "文本", "position": 10 }