Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zzx_123123
zui
提交
89bbca60
Z
zui
项目概览
zzx_123123
/
zui
与 Fork 源项目一致
Fork自
易企天创 / zui
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
89bbca60
编写于
3月 15, 2018
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* add checkboxs advance style.
上级
7a96c58a
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
138 addition
and
14 deletion
+138
-14
docs/part/control-checkbox.md
docs/part/control-checkbox.md
+46
-0
src/less/controls/checkbox.less
src/less/controls/checkbox.less
+92
-14
未找到文件。
docs/part/control-checkbox.md
浏览文件 @
89bbca60
...
@@ -207,3 +207,49 @@ filter: duoxuanhedanxuankuang dxhdx radio
...
@@ -207,3 +207,49 @@ filter: duoxuanhedanxuankuang dxhdx radio
<input
disabled
type=
"radio"
name=
"radioOptionsExample"
>
被禁用的单选框
<input
disabled
type=
"radio"
name=
"radioOptionsExample"
>
被禁用的单选框
</label>
</label>
```
```
## 高级外观
高级外观的多选和单选框使用自定义的外观代替原生外观,在所有浏览器都具有一致的体验。
<example>
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
id=
"primaryCheckbox1"
><label
for=
"primaryCheckbox1"
>
未选中
</label></div>
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
checked=
"checked"
id=
"primaryCheckbox2"
><label
for=
"primaryCheckbox2"
>
选中
</label></div>
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
checked=
"checked"
disabled=
"disabled"
id=
"primaryCheckbox3"
><label
for=
"primaryCheckbox3"
>
禁用
</label></div>
</example>
```
html
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
id=
"primaryCheckbox1"
><label
for=
"primaryCheckbox1"
>
未选中
</label></div>
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
checked=
"checked"
id=
"primaryCheckbox2"
><label
for=
"primaryCheckbox2"
>
选中
</label></div>
<div
class=
"checkbox-primary"
><input
type=
"checkbox"
checked=
"checked"
disabled=
"disabled"
id=
"primaryCheckbox3"
><label
for=
"primaryCheckbox3"
>
禁用
</label></div>
```
<example>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
id=
"primaryradio1"
><label
for=
"primaryradio1"
>
选项一
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
id=
"primaryradio2"
><label
for=
"primaryradio2"
>
选项二
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
id=
"primaryradio3"
><label
for=
"primaryradio3"
>
选项三
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
disabled=
"disabled"
id=
"primaryradio4"
><label
for=
"primaryradio4"
>
禁用
</label></div>
</example>
```
html
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
id=
"primaryradio1"
><label
for=
"primaryradio1"
>
选项一
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
id=
"primaryradio2"
><label
for=
"primaryradio2"
>
选项二
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
id=
"primaryradio3"
><label
for=
"primaryradio3"
>
选项三
</label></div>
<div
class=
"radio-primary"
><input
type=
"radio"
name=
"primaryRadioGroup1"
checked=
"checked"
disabled=
"disabled"
id=
"primaryradio4"
><label
for=
"primaryradio4"
>
禁用
</label></div>
```
高级外观还可以不使用
`<input>`
元素,在此种情况下,为
`.checkbox-primary`
或
`.radio-primary`
添加
`.checked`
类标记为选中状态,用户无法通过点击来切换选中状态,但可以通过程序手动添加或移除
`.checked`
来更改选中状态。
<example>
<div
class=
"checkbox-primary"
><label>
未选中
</label></div>
<div
class=
"checkbox-primary checked"
><label>
选中
</label></div>
<div
class=
"radio-primary"
><label>
未选中
</label></div>
<div
class=
"radio-primary checked"
><label>
选中
</label></div>
</example>
```
html
<div
class=
"checkbox-primary"
><label>
未选中
</label></div>
<div
class=
"checkbox-primary checked"
><label>
选中
</label></div>
<div
class=
"radio-primary"
><label>
未选中
</label></div>
<div
class=
"radio-primary checked"
><label>
选中
</label></div>
```
src/less/controls/checkbox.less
浏览文件 @
89bbca60
.checkbox-primary {
.checkbox-primary,
display: inline-block;
.radio-primary {
display: block;
position: relative;
position: relative;
> input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
margin: 0;
z-index: 3;
width: 20px;
}
> label {
> label {
padding-left: 25px;
padding-left: 25px;
cursor: pointer;
cursor: pointer;
font-weight: normal;
&:before,
&:before,
&:after {
&:after {
...
@@ -40,19 +54,83 @@
...
@@ -40,19 +54,83 @@
}
}
}
}
&.checked {
> input:checked + label,
> label {
&.checked > label {
&:after {
&:after {
border-color: @color-primary;
border-color: @color-primary;
border-width: 4px;
border-width: 4px;
background-color: @color-primary;
background-color: @color-primary;
}
}
&:before {
color: white;
opacity: 1;
transform: scale(1);
}
}
> input:focus + label {
&:after {
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-primary;
border-color: @color-primary;
}
}
&.disabled > label,
input:disabled + label {
&:after {
background-color: #e5e5e5;
border-color: #bbb;
}
}
&.checked.disabled > label,
input:disabled:checked + label {
&:after {
background-color: #bbb;
}
}
}
&:before {
.radio-primary {
color: white;
> label {
opacity: 1;
&:after {
transform: scale(1);
border-radius: 50%;
}
}
&:before {
content: ' ';
width: 6px;
height: 6px;
border-radius: 50%;
border: none;
top: 7px;
left: 5px;
}
}
> input:checked + label,
&.checked > label {
&:after {
border-color: @color-primary;
border-width: 2px;
background-color: transparent;
}
&:before {
background-color: @color-primary;
}
}
&.checked.disabled > label,
input:disabled:checked + label {
&:after {
background-color: transparent;
border-color: #bbb;
}
&:before {
background-color: #bbb;
}
}
}
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录