动态表单

Baklib

发布于：2024-07-07

模板的强大之处就是，你可以动态扩展模板页面的变量，以达到前自定义丰富的展示效果。本次一共发布了 20个表单组件，覆盖了大部分建站的场景需求：

Checkbox

Paragraph

Color

Radio

Background

Range

Date

Richtext

Font Picker

Select

Header

Tag Picker

Html

Text

Image Picker

Textarea

Link

Unknown

Number

Video Picker

表单 type: checkbox

Param

Description

Input

Type

—

checkbox

Label

—

Default

—

0 1 false true

Info

—

前端变量值

类型：TrueClass

true

前端变量显示

{{page.settings.foo}}

true

示例：

表单代码：

{
  "id": "recommend_to_index",
  "type": "checkbox",
  "label": "推荐到首页展示",
  "default": true
}

表单预览：

表单 type: color

Param

Description

Input

Type

—

color

Label

—

Default

—

#00AA00

Colors

—

#FF0000|#00FF00|#0000FF

Info

—

前端变量值

类型：String

前端变量显示

{{ page.settings.text_color }}

#00AA00

示例：

代码：

{
   "id": "text_color",
   "type": "color",
   "label": "Hero 文字颜色"
}

预览：

表单 type: color_background

Param

Description

Input

Id

—

bg_color

Label

—

Info

—

Default

—

{"from":"#0F69E8","to":"#1C0597"}

Colors

—

rgba(244, 67, 54, 1)|rgba(233, 30, 99, 1)

前端变量值

类型：DynamicForm::ColorBackgroundComponent::Value

前端变量显示

{{page.settings.bg_color}}

linear-gradient(90deg, #0F69E8, #1C0597)

{{page.settings.bg_color.to}}

#1C0597

{{page.settings.bg_color.degree}}

90

{{page.settings.bg_color.from}}

#0F69E8

示例：

代码：

{
   "id": "banner_background",
   "label": "Hero 背景色",
   "type": "color_background"
}

预览：

表单 type: date

Param

Description

Input

Type

—

date

Label

—

foo

Default

—

2024-01-28

Info

—

这是一个日期选择器

前端变量值

类型：Date

"2024-01-28"

前端变量显示

{{page.settings.foo}}

2024-01-28

示例：

代码：

{
   "id": "start_at",
   "type": "date",
   "label": "开始时间",
   "default": "2025-01-01"
}

预览：

表单 type: font_picker

Param

Description

Input

Type

—

font_picker

Label

—

Default

—

arial

Fonts

—

["system-ui", "arial"]

Info

—

选择一个字体

前端变量值

类型：String

"arial"

前端变量显示

{{page.settings.font_name}}

arial

示例：

代码：

{
   "id": "font",
   "type": "font_picker",
   "label": "字体",
   "default": "Arial"
}

预览：

表单 type: header

动态表单分类标题，用于分组表单字段。

* 没有前端变量

Param

Description

Input

Content

—

示例：

代码：

{
   "type": "header",
   "content": "分组 1"
}

预览：

表单 type: paragraph

这是一段文字介绍，用于动态表单的说明文字, 支持安全的 HTML 标签，自动过滤 script 标签。

* 没有前端变量

Param

Description

Input

Content

—

示例：

代码：

{
   "type": "paragraph",
   "content": "paragraph"
}

预览：

表单 type: html

Param

Description

Input

Id

—

google_ads

Label

—

谷歌广告代码

Default

—

Info

—

粘贴谷歌广告 HTML 代码

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">这是蓝色粗体字</strong>"

前端变量显示

{{page.settings.google_ads}}

这是蓝色粗体字

示例：

代码：

{
   "id": "third_party_video_url",
   "type": "html",
   "label": "Youtube或其他视频地址",
   "info": "<iframe src='https://www.youtube.com/embed/yrLV3ONB..."
}

预览：

表单 type: image_picker

Param

Description

Input

Id

—

Label

—

Default

—

Width

—

640

Height

—

400

Ratio

比例, 例如 16:9

16:9

Info

—

从资源库中选择

前端变量值

类型：String

图片路径

前端变量显示

{{page.settings.banner}}

示例：

代码：

{
   "id": "thumb_image_url",
   "type": "image_picker",
   "ratio": "16:9",
   "width": 240,
   "label": "封面图",
   "info": "选择一个 16:9 的图片，默认宽度 240px"
}

预览：

表单 type: link

Param

Description

Input

Id

—

foo

Label

—

友情链接

Default

—

http://www.google.com

Choices

—

[{"label":"百度","value":"http://www.baidu.com"},{"label":"谷歌","value":"http://www.google.com"},{"label":"必应","value":"http://www.bing.com"}]

Info

—

前端变量值

类型：DynamicForm::RadioComponent::Value

"#<DynamicForm::RadioComponent::Value:0x0000000118f413c0 label: \"谷歌\", value: \"http://www.google.com\">"

前端变量显示

{{page.settings.foo}}

谷歌

{{page.settings.foo.value}}

http://www.google.com

{{page.settings.foo.label}}

谷歌

示例：

代码：

{
   "id": "friend_link",
   "type": "link",
   "label": "友情链接",
   "default": "https://www.google.com",
   "choices": [{"label":"百度","value":"http://www.baidu.com"},{"label":"谷歌","value":"http://www.google.com"},{"label":"必应","value":"http://www.bing.com"}]
}

预览：

表单 type: number

Param

Description

Input

Id

—

price

Label

—

Default

—

10

Min

—

0

Max

—

10

Step

—

0.5

Info

—

给产品标定一个价格

前端变量值

类型：Float

10.0

前端变量显示

{{page.settings.price}}

10.0

示例：

代码：

{
   "id": "price",
   "type": "number",
   "label": "商品数量",
   "min": "0",
   "max": "10",
   "step": "0.5",
   "default": "5"
}

预览：

表单 type: radio

Param

Description

Input

Id

—

gender

Label

—

性别

Default

—

0

Choices

—

[{"label":"保密","value":"0"},{"label":"男","value":"1"},{"label":"女","value":"2"}]

Info

—

前端变量值

类型：DynamicForm::RadioComponent::Value

"#<DynamicForm::RadioComponent::Value:0x000000011bf68738 label: \"保密\", value: \"0\">"

前端变量显示

{{page.settings.gender}}

保密

{{page.settings.gender.value}}

0

{{page.settings.gender.label}}

保密

示例：

代码：

{
  "id": "page_type",
  "type": "radio",
  "label": "页面格式",
  "choices": [{"label":"富文本","value":"0"},{"label":"HTML","value":"1"}],
  "default": "0",
  "info": "*  如果选择 HTML 格式，则整页面只会呈现【html_content】表单信息"
},

预览：

表单 type: range

Param

Description

Input

Id

—

distance

Label

—

可送范围

Default

—

6.5

Min

—

0

Max

—

10

Step

—

0.5

Unit

—

Km

Info

—

选择快递可送范围

前端变量值

类型：Float

6.5

前端变量显示

{{page.settings.distance}}

6.5

示例：

代码：

{
    "id": "distance",
    "type": "range",
    "label": "配送范围",
    "min": "0",
    "max": "100",
    "step": "0.1",
    "default": "15",
    "unit": "km",
    "info": "选择快递可配送范围"
}

预览：

表单 type: richtext

Param

Description

Input

Id

—

foo

Label

—

Default

—

Info

—

这是一个HTML输入框

前端变量值

类型：ActiveSupport::SafeBuffer

"<strong style=\"color: blue;\">HTML源代码会被转义</strong>"

前端变量显示

{{page.settings.foo}}

HTML源代码会被转义

示例：

代码：

{
   "id": "richtext_1",
   "type": "richtext",
   "label": "richtext"
}

预览：

表单 type: select

select 选项有三种情况：默认下拉框、分组下拉框、多选下拉框。

default（默认）

Param

Description

Input

Id

—

company_size

Label

—

公司规模

Default

—

1

Choices

—

[{"label":"10 人以下","value":"0"},{"label":"10~50人","value":"1"},{"label":"50~200人","value":"2"},{"label":"200~1000人","value":"3"},{"label":"1000以上","value":"4"}]

Info

—

模前端变量显示

{{page.settings.company_size}}

10~50人

{{page.settings.company_size.value}}

1

{{page.settings.company_size.label}}

10~50人

示例：

代码：

{
   "id": "source_type",
   "type": "select",
   "default": "0",
   "choices": [{"label":"资源库视频","value":"0"},{"label":"Youtube视频","value":"1"},{"label":"其他","value":"2"}],
   "label": "视频来源"
}

预览：

Grouped（分组）

Param

Description

Input

Id

—

city

Label

—

城市

Default

—

km

Choices

—

[{"group":"四川省","label":"成都市","value":"cd"},{"group":"四川省","label":"德阳市","value":"dy"},{"group":"云南省","label":"昆明市","value":"km"},{"group":"云南省","label":"大理市","value":"dl"}]

Info

—

选择您所在的城市

前端变量显示

{{page.settings.city}}

昆明市

{{page.settings.city.value}}

km

{{page.settings.city.label}}

昆明市

multiple（多选）

Param

Description

Input

Id

—

city

Label

—

城市

Default

—

["km", "dl"]

Choices

—

[{"group":"四川省","label":"成都市","value":"cd"},{"group":"四川省","label":"德阳市","value":"dy"},{"group":"云南省","label":"昆明市","value":"km"},{"group":"云南省","label":"大理市","value":"dl"}]

Info

—

选择您所在的城市

表单 type: tag_picker

Param

Description

Input

Id

—

tag

Label

—

产品标签

Default

—

Multiple

—

true

Info

—

前端变量值

类型：Array

[]

前端变量显示

{{page.settings.tag}}

[]

示例：

代码：

{
   "id": "tags",
   "type": "tag_picker",
   "multiple": true,
   "label": "站点热门标签"
}

预览：

表单 type: text

Param

Description

Input

Id

—

Label

—

Default

—

Info

—

前端变量值

类型：ActiveSupport::SafeBuffer

"&lt;strong style=&quot;color: blue;&quot;&gt;HTML源代码会被转义&lt;/strong&gt;"

前端变量显示

{{page.settings.foo}}

<strong style="color: blue;">HTML源代码会被转义</strong>

示例：

代码：

{
   "id": "slogan",
   "type": "text",
   "label": "站点口号",
   "default": "👋 引领先锋，探码科技"
}

预览：

表单 type: textarea

Param

Description

Input

Id

—

foo

Label

—

foo

Default

—

Rows

—

4

Info

—

这是一个HTML输入框

前端变量值

类型：ActiveSupport::SafeBuffer

"&lt;strong style=&quot;color: blue;&quot;&gt;HTML源代码会被转义&lt;/strong&gt;"

前端变量显示

{{page.settings.foo}}

<strong style="color: blue;">HTML源代码会被转义</strong>

示例：

代码：

{
   "id": "textarea_1",
   "type": "textarea",
   "label": "Textarea"
}

预览：

表单 type: video_picker

Param

Description

Input

Id

—

my_video

Label

—

宣传视频

Default

—

Height

—

Width

—

480

Ratio

—

16:9

Info

—

从资源库中选择视频

前端变量值

类型：String

视频地址

前端变量显示

{{page.settings.my_video}}

示例：

代码：

{
   "id": "video_url",
   "type": "video_picker",
   "label": "视频",
   "info": "从资源库选择视频"
}

预览：

提交反馈
您觉得这篇文章是否有帮助？