WONDERFUL

@tutttuwi

FEATURES

  • Upon importing wonderful.js, you can use this! - without JS Libraries such as jQuery
  • Customize icon following fontawesome
  • Device support - (Not yet verified)
  • Some element support - checkbox (TBI:radio,input)

REQUIREMENT only fontawesome

you must import fontawesome in your header element. as follows:
                
                  <link rel="stylesheet"
                  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
                  integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI="
                  crossorigin="anonymous"/>
                
              

CHECKBOX

You can use icon in fontawesome.

  • only import wonderful.js!! bottom of body
  •                       
                            <script type="text/javascript" src="wonderful.js"></script>
                          
                         
  • That's all !!

Live

State

  • import wonderful.js!! bottom of body
  •                       <script type="text/javascript" src="wonderful.js"></script>
                         
  • configration as below
  •                       new Wonderful.Checkbox({ targetClass: 'wonderful-check-stack', isStack: true }).init()
                         

Live

State

  • import wonderful.js!! bottom of body
  •                       <script type="text/javascript" src="wonderful.js"></script>
                         
  • configration as below
  •                       
      new Wonderful.Checkbox({
        targetClass: 'wonderful-check-color-blue',
        bfColor: 'blue',
        afColor: 'blue'
      }).init();
      new Wonderful.Checkbox({
        targetClass: 'wonderful-check-color-red',
        bfColor: 'red',
        afColor: 'red'
      }).init();
      new Wonderful.Checkbox({
        targetClass: 'wonderful-check-color-green',
        bfColor: 'green',
        afColor: 'green'
      }).init();
      new Wonderful.Checkbox({
        targetClass: 'wonderful-check-color-purple',
        bfColor: 'purple',
        afColor: 'purple'
      }).init();
    
                         

Live

Other