MyGit

lokesh-coder/pretty-checkbox

Fork: 153 Star: 1799 (更新于 1970-01-01 00:00:00)

license: MIT

Language: CSS .

A pure CSS library to beautify checkbox and radio buttons.

最后发布版本: v3.0.3 ( 2017-10-22 01:51:47)

官方网址 GitHub网址


Pretty checkbox

pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

Github Release Licence Downloads


Pretty checkbox preview

Features

  • Basic
    • Shapes - Square, Curve, Round
    • Variants - Default, Fill, Thick
    • Colors - Primary, Success, Info, Warning, Danger
    • Color types - Solid, Outline
    • Animations - Smooth, Tada, Jelly, Pulse, Rotate
  • Switch - iOS style - Outline, Fill, Slim
  • Responsive
  • No JavaScript
  • Custom Font Icons
  • SVG Icons
  • Image support
  • Toggle between icons / SVG's / images
  • Lock
  • State - Focus, Hover, Indeterminate
  • Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma, ...
  • SCSS customization
  • Supports all modern browsers, including mobile devices
  • Print friendly
  • and more... ( I am kidding, that's all! )

Installation

  • From CLI

Install the library from npm or yarn package manager

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

Add pretty-checkbox.min.css in your html


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css"/>

Download the source from Github.

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

<PATH> is where the library is downloaded.


SCSS

You can also import pretty-checkbox.scss in your main scss file.

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

Please refer the document for SCSS settings.

Usage

Pretty checkbox comes with many styles,

Class name Description
p-default Basic style
p-switch iOS like toggle style
p-icon Custom font icons
p-svg Custom SVG files, markup
p-image Tiny images

And three shapes p-round p-curve p-square (default)

Basic checkbox

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

Basic checkbox has three variants p-fill p-thick p-outline (default)

You can combine them.

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

Switch checkbox

Switch has three variants p-outline p-fill p-slim

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

Custom Font icons

  <div class="pretty p-icon">
    <input type="checkbox">
    <div class="state">
      <i class="icon fa fa-check"></i>
      <label>Check me</label>
    </div>
  </div>
Note: class `icon` should be added along with icon class names
Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.
more details
---

SVG

Supports SVG file in tag, markup (<svg> ... </svg>) and sprites

  <div class="pretty p-svg">
    <input type="checkbox">
    <div class="state">
      <img class="svg" src="file.svg" />
      <label>Check me</label>
    </div>
  </div>
Note: class `svg` to be added in img tag or svg tag.
more details
---

Image

Supports any type of valid image format.

  <div class="pretty p-image">
    <input type="checkbox" />
    <div class="state">
      <img class="image" src="/check.png" />
      <label>Block</label>
    </div>
  </div>
Note: class `image` to be added in img tag.
more details
---

Colors

There are five solid colors p-primary p-success p-warning p-info p-danger

And five outline colors 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>
Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.
more details

More

There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to know about them.

Browser support

Works in all modern browsers.

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

Font Icon libraries

SVG

Libraries

Inspiration

Contributions

Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!

License

This project is licensed under the MIT License

最近版本更新:(数据更新于 1970-01-01 00:00:00)

2017-10-22 01:51:47 v3.0.3

2017-10-22 01:39:42 v3.0.2

2017-10-22 01:18:45 v3.0.1

2017-10-21 10:58:15 v3.0.0

2017-10-21 10:34:48 v2.0.1

2017-10-21 10:34:48 v2.0.0

2017-10-21 10:34:48 v2.0.2

2017-04-01 20:28:09 v2.2.1

2017-04-01 00:36:55 v2.2.0

2016-11-23 14:09:45 v2.1.0

主题(topics):

animation, bootstrap, checkbox, css, html, icons, radio-buttons, react, scss

lokesh-coder/pretty-checkbox同语言 CSS最近更新仓库

2024-11-14 08:39:22 primefaces/primeng

2024-10-08 06:03:05 ParisNeo/lollms-webui

2024-09-11 20:01:02 Achuan-2/siyuan-themes-tsundoku

2024-09-03 23:15:18 Zuoqiu-Yingyi/siyuan-theme-dark-plus

2024-07-25 23:02:20 jgthms/bulma

2024-05-31 23:14:02 timpaul/form-extractor-prototype