pretty 检查框.cs

一个纯CSS库来美化复选框和收音机按钮.

Demo and documentation
https://pretty-checkbox.netlify.app/

特征

• 基础
  • 形状 - 说吧 平方边, (中文(简体) ), 曲线, (中文(简体) ), 回合
  • 备选案文 - 说吧 默认, (中文(简体) ), 填充, (中文(简体) ), 细
  • 颜色 - 说吧 小学, (中文(简体) ), 成绩, (中文(简体) ), 资讯, (中文(简体) ), 3⁄4 ̄ ̧漯B, (中文(简体) ), 危险
  • 颜色类型 - 说吧 固态, (中文(简体) ), 大纲
  • 动画 - 说吧 平滑, (中文(简体) ), 塔达, (中文(简体) ), 果冻, (中文(简体) ), 脉搏, (中文(简体) ), 旋转
• 切换 - iOS 样式 - 大纲, (中文(简体) ), 填充, (中文(简体) ), 斯莱姆
• 响应
• 没有 Java 脚本
• 自定义字体图标
• SVG 图标
• 图像支持
• 在图标/ SVG / 图像之间切换
• 锁定
• 国家 焦点, (中文(简体) ), 缓冲, (中文(简体) ), 不确定
• 支持框架 - 诱饵, (中文(简体) ), 基金会, (中文(简体) ), 分层UI, (中文(简体) ), 布玛,, , , , , , , , .
• SCSS 定制
• 支持包括移动设备在内的所有现代浏览器
• 方便打印
• 还有.. 我开玩笑的,就这样! (中文(简体) )

安装

从CLI

使用 npm 或者说 yarn数字 :

npm install @djthoms/pretty-checkbox # or
yarn add @djthoms/pretty-checkbox

添加 pretty-checkbox.min.css 在您的 html 中:

从CDN

<link
    rel="stylesheet"
    href="https://unpkg.com/@djthoms/pretty-checkbox/dist/pretty-checkbox.min.css"
/>

手工下载

下载源从 Github。 。 。 .

<link rel="stylesheet" href="<PATH>/pretty-checkbox/dist/pretty-checkbox.min.css" />

<PATH> 是图书馆下载的地方.

常设委员会

您也可以导入 pretty-checkbox.scss 在您的主要 scs 文件中.

@import '~@djthoms/pretty-checkbox/src/pretty-checkbox.scss';

请参考SCSS设置的文档 .

使用量

漂亮的复选框 有很多风格,

还有三个形状 p-round p-curve p-square (默认)

基本复选框

<div class="pretty p-default">
    <input type="checkbox" />
    <div class="state">
        <label>Check me</label>
    </div>
</div>

基本复选框有三个变体 p-fill p-thick p-outline (默认)

你可以结合他们.

<div class="pretty p-default p-curve p-fill">
    <input type="checkbox" />
    <div class="state">
        <label>Fill</label>
    </div>
</div>

切换复选框

开关有三个变体 p-outline p-fill p-slim

<div class="pretty p-switch p-fill">
    <input type="checkbox" />
    <div class="state">
        <label>On</label>
    </div>
</div>

自定义字体图标

<div class="pretty p-icon">
    <input type="checkbox" />
    <div class="state">
        <i class="icon fa fa-check"></i>
        <label>Check me</label>
    </div>
</div>

_{说明: 分类 " icon " 应加上图标类名称}

_{说明:图标要工作,需要添加相应的字体图标库. 在以上的例子中,我们使用了字体真棒图标。 因此,FontAwesome应该单独列入.}

特别工作组

支持 SVG 文件在 标记标记, 标记 (<svg> ... </svg>)和图示

<div class="pretty p-svg">
    <input type="checkbox" />
    <div class="state">
        <img class="svg" src="file.svg" />
        <label>Check me</label>
    </div>
</div>

_{说明: 将 " svg " 级添加到 img 标记或 svg 标记中.}

图像

支持任何类型的有效图像格式.

<div class="pretty p-image">
    <input type="checkbox" />
    <div class="state">
        <img class="image" src="/check.png" />
        <label>Block</label>
    </div>
</div>

_{说明: " 图像 " 类将添加到印花标记中.}

颜色

有五种坚固的颜色 p-primary p-success p-warning p-info p-danger

还有五道轮廓颜色 p-primary-o p-success-o p-warning-o p-info-o p-danger-o

<div class="pretty p-default p-curve p-thick">
    <input type="checkbox" />
    <div class="state p-warning">
        <label>Warning</label>
    </div>
</div>

_{说明:彩色类必须在州级中加入. 固体颜色和Ouline颜色在字体图标和切换功能中具有不同的作用.}

RTL 支持

包含 rtl.css 在您的源文件中 : smile :

再来

还有很多像 无线电按钮 , (中文(简体) ), 切换 , (中文(简体) ), 国家 , (中文(简体) ), 动画 , (中文(简体) ), 边框减少 , (中文(简体) ), 锁定 , (中文(简体) ), 缩放, (中文(简体) ), SCSS 设置。 。 。 .

请参考 文档 要知道他们.

浏览器支持

在所有现代浏览器中工作.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9

字体图标库

• 字型不错
• 飞毛腿
• 材料图标( MDI)
• 材料图标( ZMDI)
• 离子图标
• 泰普森斯语Name
• 材料图标 (Google)
• 另一些没有经过测试,但将会起作用(99%).

特别工作组

• 用户界面Kit
• 羽毛
• 其他人员

图书馆

• 武杰斯 - 韦杰斯 - VueJs - pretty 复选框
• 角质 - ngx- pretty 检查框
• 反应 - 漂亮复选框反应

灵感

• 很棒的靴子夹检查框 - 创意
• 动画 - 动画

捐款

多亏了这些好人 花了宝贵的时间 帮助改进了图书馆 欢迎任何捐款!

许可证

这个项目根据麻省理工学院的许可证颁发