装飾されたキレイなチェックボックスコンポーネント「pretty-checkbox-vue」

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox-vue.min.js"></script>
<div id="app">
  <div>
    <h2>Basic checkbox</h2>
    <p-check class="p-default">Default</p-check>
    <p-check class="p-default p-fill">Fill</p-check>
    <p-check class="p-default p-thick">Thick</p-check>
    <p-check class="p-default p-curve">Curve</p-check>
    <p-check class="p-default p-round">Round</p-check>
  </div>
  
  <div>
    <h2>Switch</h2>
    <p-check class="p-switch">Default</p-check>
    <p-check class="p-switch p-fill">Fill</p-check>
    <p-check class="p-switch p-slim">Thick</p-check>
  </div>
  <div>
    <h2>Colors</h2>
    <p-check class="p-default" color="primary">Primary</p-check>
    <p-check class="p-default" color="success">Success</p-check>
    <p-check class="p-default" color="info">Info</p-check>
    <p-check class="p-default" color="warning">Warning</p-check>
    <p-check class="p-default" color="danger">Danger</p-check>
  </div>
  <div>
    <h2>Font icons</h2>
    <p-check class="p-icon p-round">
      <i class="icon mdi mdi-check" slot="extra"></i>
      Pay Bills
    </p-check>
    <p-check class="p-icon p-curve">
        <i class="icon mdi mdi-close" slot="extra"></i>
        Fuel refill
    </p-check>
    <p-check class="p-icon">
        <i class="icon mdi mdi-close-outline" slot="extra"></i>
        Buy groceries
    </p-check>
  </div>
  <div>
    <h2>Animations</h2>
    <p-check class="p-icon p-curve p-smooth">
      <i slot="extra" class="icon mdi mdi-check"></i>
      Smooth
    </p-check>
    <p-check class="p-icon p-curve p-jelly" color="primary">
      <i slot="extra" class="icon mdi mdi-check"></i>
      Jelly
    </p-check>
    <p-check class="p-icon p-curve p-tada"  color="primary">
      <i...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.use(PrettyCheckbox);
new Vue({
  el: '#app'
});