From b5cc9d87878771ff982b71494df8288ffe5138cf Mon Sep 17 00:00:00 2001 From: morning-star <26325820+Sight-wcg@users.noreply.github.com> Date: Thu, 28 Mar 2024 23:38:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(checkbox&radio):=20=E5=A2=9E=E5=BC=BA?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E8=87=AA=E5=AE=9A=E4=B9=89=E8=83=BD=E5=8A=9B?= =?UTF-8?q?=20(#1686)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(checkbox): 增强模板自定义能力 * feat(radio): 支持 lay-skin 属性; 增强模板自定义能力 * feat(form): 新增 lay-skin="none" 无样式风格 * docs: 添加 lay-skin="none" 文档 * docs: update * fix: 单选禁用光标效果 * docs: lay-skin="none" 相关示例迁移至 form 页面 * docs: 新增 checkbox 自定义风格示例文件 * docs(form): 新增 radio 自定义风格示例文件 * docs(form): 新增 checkbox,radio 自定义风格示例的样式文件 * docs(form): 新增 checkbox 自定义风格示例 * docs(form): 新增 radio 自定义风格示例 * docs(form): 转移 checkbox,radio 自定义风格示例到对应的组件页面 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com> --- docs/form/checkbox.md | 19 +- docs/form/examples/checkbox.skin.md | 91 +++++++++ docs/form/examples/checkboxAndRadio.style.md | 191 +++++++++++++++++++ docs/form/examples/radio.skin.md | 103 ++++++++++ docs/form/index.md | 2 +- docs/form/radio.md | 14 ++ src/css/layui.css | 12 ++ src/modules/form.js | 42 +++- 8 files changed, 460 insertions(+), 14 deletions(-) create mode 100644 docs/form/examples/checkbox.skin.md create mode 100644 docs/form/examples/checkboxAndRadio.style.md create mode 100644 docs/form/examples/radio.skin.md diff --git a/docs/form/checkbox.md b/docs/form/checkbox.md index 169ed5aa..59704876 100644 --- a/docs/form/checkbox.md +++ b/docs/form/checkbox.md @@ -39,7 +39,7 @@ layui.use(function(){ - 属性 `checked` 可设置默认选中 - 属性 `disabled` 可设置禁用状态 - 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制） -- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`2.8+,`switch`，默认风格可不填 +- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`2.8+,`switch`，`none`(无样式)2.9.8+ 默认风格可不填 特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。 @@ -85,7 +85,7 @@ layui.use(function(){ 在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题 -

标题模板 2.8.3+

+

自定义标题模板 2.8.3+

在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。 @@ -119,6 +119,19 @@ layui.use(function(){ +

自定义任意风格 2.9.8+

+ +通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。
+**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。 + +
+  
+
+

复选框事件

@@ -175,4 +188,4 @@ layui.use(function(){ }); - \ No newline at end of file + diff --git a/docs/form/examples/checkbox.skin.md b/docs/form/examples/checkbox.skin.md new file mode 100644 index 00000000..3ad57ca5 --- /dev/null +++ b/docs/form/examples/checkbox.skin.md @@ -0,0 +1,91 @@ + + +
+ {{- d.include("/form/examples/checkboxAndRadio.style.md") }} +

自定义“卡片风格”的多选组件

+
+
+ +
+
+ +
+
+
Chrome
+
+ 由 Google 公司开发的网页浏览器，被大多数人所使用。 +
+
+
+
+
+ +
+
+ +
+
+
Edge
+
+ 由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。 +
+
+
+
+
+ +
+
+ +
+
+
Firefox
+
+ 由 Mozilla 开发的开放源代码的网页浏览器。 +
+
+
+
+
+ +
+
+ +
+
+
Internet Explorer
+
+ 由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。 +
+
+
+
+
+ +

自定义“标签风格”的多选组件

+
+ +
唱
+ +
跳
+ +
rap
+ +
篮球
+
+ +
+

更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。

+ +
+ + + diff --git a/docs/form/examples/checkboxAndRadio.style.md b/docs/form/examples/checkboxAndRadio.style.md new file mode 100644 index 00000000..258430bc --- /dev/null +++ b/docs/form/examples/checkboxAndRadio.style.md @@ -0,0 +1,191 @@ + + + + + diff --git a/docs/form/examples/radio.skin.md b/docs/form/examples/radio.skin.md new file mode 100644 index 00000000..98b08649 --- /dev/null +++ b/docs/form/examples/radio.skin.md @@ -0,0 +1,103 @@ + + +
+ {{- d.include("/form/examples/checkboxAndRadio.style.md") }} +

自定义“卡片风格”的单选组件

+
+
+ +
+
+ +
+
+
Chrome
+
+ 由 Google 公司开发的网页浏览器，被大多数人所使用。 +
+
+
+
+
+ +
+
+ +
+
+
Edge
+
+ 由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。 +
+
+
+
+
+ +
+
+ +
+
+
Firefox
+
+ 由 Mozilla 开发的开放源代码的网页浏览器。 +
+
+
+
+
+ +
+
+ +
+
+
Internet Explorer
+
+ 由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。 +
+
+
+
+
+ +

自定义“标签风格”的单选组件

+
+ +
唱
+ +
跳
+ +
rap
+ +
篮球
+
+ +

自定义“颜色选择”的单选组件

+
+ +
+ +
+ +
+ +
+
+ +
+

更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。

+ +
+ + + diff --git a/docs/form/index.md b/docs/form/index.md index a3b05df1..108145c3 100644 --- a/docs/form/index.md +++ b/docs/form/index.md @@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。 | lay-vertype | `tips`吸附层
`alert` 对话框
`msg` 默认 | 设置验证异常时的提示层模式 | | lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 | | lay-affix | [#详见](input.html#affix) | 输入框动态点缀，``元素 **私有属性** | -| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `` 元素 **私有属性** | +| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 ``，`` 元素 **私有属性** | | lay-search | 默认不区分大小写;
设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`` 元素 **私有属性** | | lay-submit | 无需值 | 设置元素（一般为`