Magic-Input 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Magic-Input 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Magic-Input 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 HTML/CSS 查看源码 »
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 国产
投 递 者 小弟调调
适用人群 未知
收录时间 2016-04-29

软件简介

CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo
源码:https://github.com/dcsite/magic-input

使用

$ npm install magic-input

你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以使用 magic-input.styl 文件

<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">

Checkbox iPhone 的样式

<input type="checkbox" class="mgc-switch mgc-sm" checked /> <input type="checkbox" class="mgc-switch" /> <input type="checkbox" class="mgc-switch mgc-lg" checked />

Checkbox

<input type="checkbox" class="mgc" checked/> Default <input type="checkbox" class="mgc mgc-primary" checked /> Primary <input type="checkbox" class="mgc mgc-success" /> Success <input type="checkbox" class="mgc mgc-info" checked /> Info <input type="checkbox" class="mgc mgc-warning" checked /> Warning <input type="checkbox" class="mgc mgc-danger" checked /> Danger

Radios

<input type="radio" name="radio3" class="mgr mgr-sm"/> Default <input type="radio" name="radio3" class="mgr mgr-primary" /> Primary <input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success <input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info <input type="radio" name="radio3" class="mgr mgr-warning" /> Warning <input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger

设置input大小的class

sm 是 small的缩写 , lg 是 large缩写

在 Checkbox中设置下面class

    mgc-sm mgc-lg

在 Radio Button中设置下面

    mgr-sm mgr-lg

改变颜色的 Class

在 Checkbox中设置下面class

    mgc-primary mgc-info mgc-success mgc-warning mgc-danger

在 Radio Button中设置下面
mgr-primary mgr-info mgr-success mgr-warning mgr-danger

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(2)
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
2 评论
13 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部