mirror of
https://github.com/halo-dev/docs.git
synced 2026-01-13 06:03:55 +08:00
Add Iconify icon selector to FormKit docs (#527)
This commit is contained in:
@@ -584,3 +584,46 @@ menuSelect 基于 select,并兼容 select 的[参数](#select-params)。
|
||||
label: 标签
|
||||
value: []
|
||||
```
|
||||
|
||||
### iconify
|
||||
|
||||
统一的图标选择器,基于 [Iconify](https://iconify.design/)。
|
||||
|
||||
示例
|
||||
|
||||
```yaml
|
||||
- $formkit: iconify
|
||||
name: social_icon
|
||||
label: 社交图标
|
||||
format: svg # svg / dataurl / url / name
|
||||
```
|
||||
|
||||
#### 参数
|
||||
|
||||
- `format`:图标格式
|
||||
- `svg`:svg 字符串
|
||||
- `dataurl`:base64 的图片链接,可以直接用于 img 标签
|
||||
- `url`:Iconify 的 CDN 链接
|
||||
- `name`:Iconify 的图标名称,需要在使用的地方自行加载图标
|
||||
|
||||
在主题模板中的使用示例:
|
||||
|
||||
```html
|
||||
<!-- 当 format 为 name 时,使用 Iconify 封装的 Web Component 加载图标 -->
|
||||
<script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
|
||||
<iconify-icon th:icon="${theme.config.group.social_icon}"></iconify-icon>
|
||||
|
||||
<!-- svg -->
|
||||
<th:block th:utext="${theme.config.group.social_icon}"></th:block>
|
||||
|
||||
<!-- dataurl 或者 url -->
|
||||
<img th:src="${theme.config.group.social_icon}" />
|
||||
```
|
||||
|
||||
开发者可根据具体使用情况自行选择图标格式,通常推荐 `svg` 或者 `dataurl`,因为这样无需任何网络请求,确保图标可以稳定地正常加载。
|
||||
|
||||
UI 效果:
|
||||
|
||||
<p>
|
||||
<img src="/img/formkit/formkit-iconify.png" width="50%" class="medium-zoom-image" />
|
||||
</p>
|
||||
|
||||
@@ -45,3 +45,7 @@ pnpm install @halo-dev/ui-shared
|
||||
|
||||
2. 提升 [plugin.yaml#spec.requires](./basics/manifest.md#字段详解) 版本为 `>=2.22.0`。
|
||||
3. 按照[最新文档](./extension-points/ui/attachment-selector-create.md)修改插件代码
|
||||
|
||||
### 表单定义 > 新增 Iconify 图标选择器
|
||||
|
||||
在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify)
|
||||
|
||||
10
docs/developer-guide/theme/api-changelog.md
Normal file
10
docs/developer-guide/theme/api-changelog.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: API 变更日志
|
||||
description: 记录每一个版本的主题 API 变更记录,方便开发者适配
|
||||
---
|
||||
|
||||
## 2.22.0
|
||||
|
||||
### 表单定义 > 新增 Iconify 图标选择器
|
||||
|
||||
在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify)
|
||||
@@ -340,7 +340,7 @@ module.exports = {
|
||||
items: ["developer-guide/plugin/examples/todolist"],
|
||||
},
|
||||
// "developer-guide/plugin/appendices",
|
||||
"developer-guide/plugin/api-changelog"
|
||||
"developer-guide/plugin/api-changelog",
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -401,6 +401,7 @@ module.exports = {
|
||||
"developer-guide/theme/global-variables",
|
||||
"developer-guide/theme/template-tag",
|
||||
"developer-guide/theme/code-snippets",
|
||||
"developer-guide/theme/api-changelog",
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
BIN
static/img/formkit/formkit-iconify.png
Normal file
BIN
static/img/formkit/formkit-iconify.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Reference in New Issue
Block a user