lokesh-coder/pretty-checkbox — Gitpedia

<h1 align="center"> <br> <a href="https://lokesh-coder.github.io/pretty-checkbox/"><img src="logo.png" alt="Pretty checkbox" width="100"></a> <br> <br> pretty-checkbox.css <br> </h1> <h4 align="center">A pure CSS library to beautify checkbox and radio buttons.</h4> <p align="center"> <a href="https://github.com/lokesh-coder/pretty-checkbox/releases"> <img src="https://img.shields.io/github/release/lokesh-coder/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Github Release"> </a> <a href="LICENSE"> <img src="https://img.shields.io/npm/l/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Licence"> </a> <a href="#"> <img src="https://img.shields.io/npm/dm/pretty-checkbox.svg?style=flat-square&colorA=8033b0&colorB=75b7dd" alt="Downloads"> </a> </p> <br> <div class="highlight highlight-source-shell"> <pre> <div align="center"><strong >Demo and documentation</strong></div> <div align="center"><a align="center" href="https://lokesh-coder.github.io/pretty-checkbox/">https://lokesh-coder.github.io/pretty-checkbox/</a></div> </pre> </div> <div align="center"> <img src="preview.gif" alt="Pretty checkbox preview"/> </div>

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

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

Add pretty-checkbox.min.css in your html

<br>

From CDN ( jsDelivr )

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

<br>

Manual download ( Github )

Download the source from Github.

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

<PATH> is where the library is downloaded.

<br>

SCSS

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

scss
@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

html
  <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.

html
  <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

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

Custom Font icons

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

<blockquote> <sub> <strong>Note</strong>: class `icon` should be added along with icon class names </sub> </blockquote> <blockquote> <sub> <strong>Note</strong>: 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. </sub> </blockquote> <div align="right"> <i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#fonticons"> more details</a></sub></i> </div> <div align="center"><strong >---</strong></div>

SVG

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

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

<blockquote> <sub> <strong>Note</strong>: class `svg` to be added in img tag or svg tag. </sub> </blockquote> <div align="right"> <i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#svg">more details</a></sub></i> </div> <div align="center"><strong >---</strong></div>

Image

Supports any type of valid image format.

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

<blockquote> <sub> <strong>Note</strong>: class `image` to be added in img tag. </sub> </blockquote> <div align="right"> <i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#image">more details</a></sub></i> </div> <div align="center"><strong >---</strong></div>

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

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

<blockquote> <sub> <strong>Note</strong>: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature. </sub> </blockquote> <div align="right"> <i><sub><a href="https://lokesh-coder.github.io/pretty-checkbox#colors">more details</a></sub></i> </div>

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

Please refer the documentation to know about them.