mirror of
https://gitee.com/layui/layui.git
synced 2026-01-28 19:11:26 +08:00
feat(checkbox&radio): 增强模板自定义能力 (#1686)
* 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>
This commit is contained in:
morning-star
@@ -39,7 +39,7 @@ layui.use(function(){
|
||||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
|
||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
|
||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||
|
||||
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
|
||||
|
||||
@@ -85,7 +85,7 @@ layui.use(function(){
|
||||
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
|
||||
|
||||
|
||||
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
|
||||
<h2 id="title" lay-toc="{}">自定义标题模板 <sup>2.8.3+</sup></h2>
|
||||
|
||||
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
|
||||
|
||||
@@ -119,6 +119,19 @@ layui.use(function(){
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||
|
||||
通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。<br>
|
||||
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/form/examples/checkbox.skin.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
|
||||
|
||||
@@ -175,4 +188,4 @@ layui.use(function(){
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
</pre>
|
||||
|
||||
91
docs/form/examples/checkbox.skin.md
Normal file
91
docs/form/examples/checkbox.skin.md
Normal file
@@ -0,0 +1,91 @@
|
||||
<!--
|
||||
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||
-->
|
||||
|
||||
<div class="layui-form" lay-filter="form-demo-skin">
|
||||
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||
<h3 class="ws-bold">自定义“卡片风格”的多选组件</h3>
|
||||
<div class="layui-row layui-col-space8">
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[0]" value="chrome" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-chrome" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[1]" value="edge" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Edge</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[2]" value="firefox" lay-skin="none" disabled>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[3]" value="ie" lay-skin="none" disabled checked>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“标签风格”的多选组件</h3>
|
||||
<div>
|
||||
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
// …
|
||||
});
|
||||
</script>
|
||||
191
docs/form/examples/checkboxAndRadio.style.md
Normal file
191
docs/form/examples/checkboxAndRadio.style.md
Normal file
@@ -0,0 +1,191 @@
|
||||
<style>
|
||||
/*
|
||||
* 基于复选框和单选框的卡片风格多选组件
|
||||
* 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
|
||||
*/
|
||||
|
||||
/* 主体 */
|
||||
.layui-form-checkbox>.lay-skin-checkcard,
|
||||
.layui-form-radio>.lay-skin-checkcard {
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
white-space: normal;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-form-checkbox>.lay-skin-checkcard>*,
|
||||
.layui-form-radio>.lay-skin-checkcard>* {
|
||||
/* display: table-cell; */ /* IE */
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 悬停 */
|
||||
.layui-form-checkbox:hover>.lay-skin-checkcard,
|
||||
.layui-form-radio:hover>.lay-skin-checkcard {
|
||||
border-color: #16b777;
|
||||
}
|
||||
|
||||
/* 选中 */
|
||||
.layui-form-checked>.lay-skin-checkcard,
|
||||
.layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
|
||||
color: #000;
|
||||
border-color: #16b777;
|
||||
background-color: rgb(22 183 119 / 10%) !important;
|
||||
/* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
|
||||
}
|
||||
|
||||
|
||||
/* 禁用 */
|
||||
.layui-checkbox-disabled>.lay-skin-checkcard,
|
||||
.layui-radio-disabled>.lay-skin-checkcard {
|
||||
box-shadow: none;
|
||||
border-color: #e5e5e5 !important;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
/* card 布局 */
|
||||
.lay-skin-checkcard-avatar {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-detail {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-header {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-description {
|
||||
font-size: 13px;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
.layui-disabled .lay-skin-checkcard-description{
|
||||
color: #c2c2c2! important;
|
||||
}
|
||||
|
||||
/* 选中 dot */
|
||||
.layui-form-checked>.lay-check-dot:after,
|
||||
.layui-form-radioed>.lay-check-dot:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-width: 10px;
|
||||
border-style: dashed;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-top-color: #16b777;
|
||||
border-top-style: solid;
|
||||
border-right-color: #16b777;
|
||||
border-right-style: solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot:after,
|
||||
.layui-radio-disabled>.lay-check-dot:after {
|
||||
border-top-color: #d2d2d2;
|
||||
border-right-color: #d2d2d2;
|
||||
}
|
||||
|
||||
/* 选中 dot-2 */
|
||||
.layui-form-checked>.lay-check-dot-2:before,
|
||||
.layui-form-radioed>.lay-check-dot-2:before {
|
||||
position: absolute;
|
||||
font-family: "layui-icon";
|
||||
content: "\e605";
|
||||
color: #fff;
|
||||
bottom: 4px;
|
||||
right: 3px;
|
||||
font-size: 9px;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.layui-form-checked>.lay-check-dot-2:after,
|
||||
.layui-form-radioed>.lay-check-dot-2:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-width: 10px;
|
||||
border-style: dashed;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-right-color: #16b777;
|
||||
border-right-style: solid;
|
||||
border-bottom-color: #16b777;
|
||||
border-bottom-style: solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot-2:before,
|
||||
.layui-radio-disabled>.lay-check-dot-2:before {
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot-2:after,
|
||||
.layui-radio-disabled>.lay-check-dot-2:after {
|
||||
border-bottom-color: #d2d2d2;
|
||||
border-right-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.lay-ellipsis-multi-line {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<!-- 标签风格 -->
|
||||
<style>
|
||||
.layui-form-radio>.lay-skin-tag,
|
||||
.layui-form-checkbox>.lay-skin-tag {
|
||||
font-size: 13px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.layui-form-checked>.lay-skin-tag,
|
||||
.layui-form-radioed>.lay-skin-tag {
|
||||
color: #fff !important;
|
||||
background-color: #16b777 !important;
|
||||
}
|
||||
</style>
|
||||
<!-- 单选框 Color Picker -->
|
||||
<style>
|
||||
/* 主体 */
|
||||
.layui-form-radio>.lay-skin-color-picker {
|
||||
border-radius: 50%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 选中 */
|
||||
.layui-form-radioed>.lay-skin-color-picker {
|
||||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
|
||||
}
|
||||
</style>
|
||||
103
docs/form/examples/radio.skin.md
Normal file
103
docs/form/examples/radio.skin.md
Normal file
@@ -0,0 +1,103 @@
|
||||
<!--
|
||||
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||
-->
|
||||
|
||||
<div class="layui-form" lay-filter="form-demo-skin">
|
||||
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||
<h3 class="ws-bold">自定义“卡片风格”的单选组件</h3>
|
||||
<div class="layui-row layui-col-space8">
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio1" value="chrome" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<span class="layui-icon layui-icon-chrome" style="font-size: 30px"></span>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio1" value="edge" lay-skin="none" checked>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Edge</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio11" value="firefox" lay-skin="none" disabled>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio11" value="ie" lay-skin="none" disabled checked>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“标签风格”的单选组件</h3>
|
||||
<div>
|
||||
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“颜色选择”的单选组件</h3>
|
||||
<div>
|
||||
<input type="radio" name="color" value="red" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: red; background-color: red"></div>
|
||||
<input type="radio" name="color" value="#16b777" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: #16b777; background-color: #16b777"></div>
|
||||
<input type="radio" name="color" value="blueviolet" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: blueviolet; background-color: blueviolet"></div>
|
||||
<input type="radio" name="color" value="#16baaa" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: #16baaa; background-color: #16baaa"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
// …
|
||||
});
|
||||
</script>
|
||||
@@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
|
||||
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
|
||||
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
|
||||
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
|
||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
|
||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">`，`<input type="radio">` 元素 **私有属性** |
|
||||
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
|
||||
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
|
||||
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
|
||||
|
||||
@@ -27,6 +27,7 @@ toc: true
|
||||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
|
||||
- 属性 `lay-skin` 可设置单选框风格，可选值：`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||
|
||||
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
|
||||
|
||||
@@ -51,6 +52,19 @@ toc: true
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||
|
||||
通过对 `radio` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的单选组件。<br>
|
||||
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/form/examples/radio.skin.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
|
||||
|
||||
`form.on('radio(filter)', callback);`
|
||||
|
||||
Reference in New Issue
Block a user