Skip to content

M
myAppraisal
Switch branch/tag
Find file
Normal viewHistoryPermalink
form-switch.component.html 7.74 KB
Newer Older
init
2e49948e
 
Ooh-Ao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 

<app-page-header title="Form Switch" title1="Form Switch" activeitem="Forms"></app-page-header>

 <!-- Start::row-1 -->
      <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Default Toggle Switch</h5>
                </div>
                <div class="box-body">
                  <input type="checkbox" id="hs-basic-usage" class="ti-switch">
                  <label for="hs-basic-usage" class="sr-only">Toggle switch</label>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Toggle Switch With Tooltip</h5>
                </div>
                <div class="box-body">
                  <div class="hs-tooltip flex items-center">
                    <input type="checkbox" id="hs-tooltip-example" class="hs-tooltip-toggle ti-switch shrink-0">
                    <label for="hs-tooltip-example" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Allow push notifications</label>
                    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
                      Enable push notifications
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <!-- End::row-1 -->

      <!-- Start::row-2 -->
      <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Toggle Switch With Description</h5>
                </div>
                <div class="box-body">
                  <div class="space-y-4">
                    <div class="flex items-center">
                      <input type="checkbox" id="hs-basic-with-description-unchecked" class="ti-switch">
                      <label for="hs-basic-with-description-unchecked" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Unchecked</label>
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="hs-basic-with-description-checked" class="ti-switch" checked>
                      <label for="hs-basic-with-description-checked" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Checked</label>
                    </div>

                    <div class="flex items-center">
                      <label class="text-sm text-gray-500 ltr:mr-3 rtl:ml-3 dark:text-white/70">On</label>
                      <input type="checkbox" id="hs-basic-with-description" class="ti-switch">
                      <label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Off</label>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Disabled Toggle Switch</h5>
                </div>
                <div class="box-body">
                  <div class="space-y-4">
                    <div class="flex items-center opacity-70">
                      <input type="checkbox" id="hs-basic-disabled-with-description-unchecked" class="ti-switch shrink-0 pointer-events-none" disabled>
                      <label for="hs-basic-disabled-with-description-unchecked" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Unchecked</label>
                    </div>

                    <div class="flex items-center opacity-70">
                      <input type="checkbox" id="hs-basic-disabled-with-description-checked" class="ti-switch shrink-0 pointer-events-none" checked disabled>
                      <label for="hs-basic-disabled-with-description-checked" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Checked</label>
                    </div>

                    <div class="flex items-center opacity-70">
                      <label class="text-sm text-gray-500 ltr:mr-3 rtl:ml-3 dark:text-white/70">On</label>
                      <input type="checkbox" id="hs-basic-disabled-with-description" class="ti-switch shrink-0 pointer-events-none" disabled>
                      <label class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Off</label>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <!-- End::row-2 -->

      <!-- Start::row-3 -->
      <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Toggle Switch With Sizes</h5>
                </div>
                <div class="box-body">
                  <div class="space-y-4">
                    <div class="flex items-center">
                      <input type="checkbox" id="hs-small-switch" class="ti-switch shrink-0 w-11 h-6 before:w-5 before:h-5">
                      <label for="hs-small-switch" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Small</label>
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="hs-medium-switch" class="ti-switch shrink-0">
                      <label for="hs-medium-switch" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Medium</label>
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="hs-large-switch" class="ti-switch shrink-0 w-[4.25rem] h-9 before:w-8 before:h-8">
                      <label for="hs-large-switch" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Large</label>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-6">
            <div class="box">
                <div class="box-header">
                    <h5 class="box-title">Toggle Switch Validation States</h5>
                </div>
                <div class="box-body">
                  <div class="space-y-4">
                    <div class="flex items-center">
                      <input type="checkbox" id="hs-valid-toggle-switch" class="ti-switch shrink-0 checked:bg-none checked:bg-green-600 checked:hover:bg-green-600 checked:focus:bg-green-600 focus:border-green-600 focus:ring-green-600 dark:checked:bg-green-600

                      checked:before:bg-green-200 dark:checked:before:bg-green-200" checked>
                      <label for="hs-valid-toggle-switch" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Valid toggle switch</label>
                    </div>

                    <div class="flex items-center">
                      <input type="checkbox" id="hs-invalid-toggle-switch" class="ti-switch shrink-0 checked:bg-none checked:bg-red-600 checked:hover:bg-red-600 checked:focus:bg-red-600 focus:border-red-600 focus:ring-red-600 dark:checked:bg-red-600

                      checked:before:bg-red-200 dark:checked:before:bg-red-200" checked>
                      <label for="hs-invalid-toggle-switch" class="text-sm text-gray-500 ltr:ml-3 rtl:mr-3 dark:text-white/70">Invalid toggle switch</label>
                    </div>
                  </div>
                </div>
            </div>
        </div>
      </div>
      <!-- End::row-3-->