Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/developer-guide/form-schema.md
Original file line number Diff line number Diff line change
Expand Up @@ -791,3 +791,46 @@ UI 效果:
onValue: "active"
offValue: "inactive"
```

### toggle

切换组件,用于对一组图片、颜色或文字等选择切换,支持单选与多选。它的功能与 `select` 组件类似,但相较于 `select` 组件,`toggle` 组件可以更直观的展示选项。

参数:

- `renderType`:当前组件的渲染类型,可选参数为 `image`、`color`、`text`,默认为 `text`。
- `options`:一组同类型的数据源,数据类型为 `{ label?: string; value: string; render?: string }[]`,其中 `label` 为选项的文本,`value` 为选项的值。`render` 为选项的渲染展示内容,与 `renderType` 参数配合使用。
- 当 `renderType` 为 `image` 时,`render` 参数为图片的 URL。
- 当 `renderType` 为 `color` 时,`render` 参数为颜色的十六进制代码。例如 `#000000`。
- 当 `renderType` 为 `text` 时,`render` 参数为文字内容。
- `multiple`:可选,是否支持多选,默认为 `false`。
- `size`:可选,渲染内容的尺寸,`number` 类型,单位为 `px`。
- `gap`:可选,渲染内容之间的间距,`number` 类型,单位为 `px`。
- `value`: 可选初始值,数据类型为 `string | number | boolean | (string | number | boolean)[]`。

#### 示例

```yaml
- $formkit: toggle
label: 选择图片
name: toggle
render-type: image
size: 100
gap: 10
help: 选择图片作为背景
options:
- label: 图文1
value: 1
render: https://placehold.co/600x400
- label: 图文2
value: 2
render: https://placehold.co/600x400
- label: 图文3
value: 3
render: https://placehold.co/600x400

```

### UI 效果

<img src="/img/formkit/formkit-toggle.png" width="50%" />
6 changes: 6 additions & 0 deletions docs/developer-guide/plugin/api-changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ title: API 变更日志
description: 记录每一个版本的插件 API 变更记录,方便开发者适配
---

## 2.22.8

### 表单定义 > 新增 `toggle` 组件

在 2.22.8 中,我们为 FormKit 表单新增了 `toggle` 组件,这是一个可以对一组图片、颜色或文字等进行选择切换的组件,详细文档可查阅:[表单定义#toggle](../../developer-guide/form-schema.md#toggle)

## 2.22.5

### SpringDoc 依赖更新可能导致插件无法启动
Expand Down
6 changes: 6 additions & 0 deletions docs/developer-guide/theme/api-changelog.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ title: API 变更日志
description: 记录每一个版本的主题 API 变更记录,方便开发者适配
---

## 2.22.8

### 表单定义 > 新增 `toggle` 表单类型

在 2.22.8 中,我们为 FormKit 表单新增了 `toggle` 组件,这是一个可以对一组图片、颜色或文字等进行选择切换的组件,详细文档可查阅:[表单定义#toggle](../../developer-guide/form-schema.md#toggle)

## 2.22.2

### 表单定义 > 新增 `switch` 表单类型
Expand Down
Binary file added static/img/formkit/formkit-toggle.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.