چک باکس ها
چک باکس توخالی
Huro چک باکسهای سبک پیشفرض را در 2 سبک اصلی، outlined
و solid
ارائه میکند. آن چک باکس ها همچنین از تمام رنگ های اصلی پشتیبانی می کنند. اصلاح کننده های موجود عبارتند از: is-primary
، is-success
، is-info
is-warning
، is-danger
.
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" checked>
<span></span>
گزینه 1
</label>
<label class="checkbox is-outlined is-primary">
<input type="checkbox">
<span></span>
گزینه 2
</label>
<label class="checkbox is-outlined is-info">
<input type="checkbox">
<span></span>
گزینه 3
</label>
<label class="checkbox is-outlined is-success">
<input type="checkbox">
<span></span>
گزینه 4
</label>
<label class="checkbox is-outlined is-warning">
<input type="checkbox">
<span></span>
گزینه 5
</label>
<label class="checkbox is-outlined is-danger">
<input type="checkbox">
<span></span>
گزینه 6
</label>
</div>
</div>
توخالی گرد
چک باکس های Huro می توانند به جای مربع، دایره باشند. به سادگی کلاس اصلاح کننده is-circle
را به عنصر checkbox
خود اضافه کنید. برای جزئیات بیشتر در مورد استفاده، به مثال کد مراجعه کنید.
<div class="field">
<div class="control">
<label class="checkbox is-circle">
<input type="checkbox">
<span></span>
گزینه 1
</label>
<label class="checkbox is-outlined is-circle is-primary">
<input type="checkbox">
<span></span>
گزینه 2
</label>
<label class="checkbox is-outlined is-circle is-info">
<input type="checkbox">
<span></span>
گزینه 3
</label>
<label class="checkbox is-outlined is-circle is-success">
<input type="checkbox">
<span></span>
گزینه 4
</label>
<label class="checkbox is-outlined is-circle is-warning">
<input type="checkbox">
<span></span>
گزینه 5
</label>
<label class="checkbox is-outlined is-circle is-danger">
<input type="checkbox">
<span></span>
گزینه 6
</label>
</div>
</div>
چک باکس پررنگ
Huro چک باکسهای سبک پیشفرض را در 2 سبک اصلی، طراحی شده
و solid
ارائه میکند. آن چک باکس ها همچنین از تمام رنگ های اصلی پشتیبانی می کنند. اصلاح کننده های موجود عبارتند از: is-primary
، is-success
، is-info
is-warning
، is-danger
.
<div class="field">
<div class="control">
<label class="checkbox is-solid">
<input type="checkbox">
<span></span>
گزینه 1
</label>
<label class="checkbox is-solid is-primary">
<input type="checkbox">
<span></span>
گزینه 2
</label>
<label class="checkbox is-solid is-info">
<input type="checkbox">
<span></span>
گزینه 3
</label>
<label class="checkbox is-solid is-success">
<input type="checkbox">
<span></span>
گزینه 4
</label>
<label class="checkbox is-solid is-warning">
<input type="checkbox">
<span></span>
گزینه 5
</label>
<label class="checkbox is-solid is-danger">
<input type="checkbox">
<span></span>
گزینه 6
</label>
</div>
</div>
گرد پررنگ
چک باکس های Huro می توانند به جای مربع، دایره باشند. به سادگی کلاس اصلاح کننده is-circle
را به عنصر checkbox
خود اضافه کنید. برای جزئیات بیشتر در مورد استفاده، به مثال کد مراجعه کنید.
<div class="field demo-select">
<div class="control">
<label class="checkbox is-circle">
<input type="checkbox">
<span></span>
گزینه 1
</label>
<label class="checkbox is-solid is-circle is-primary">
<input type="checkbox">
<span></span>
گزینه 2
</label>
<label class="checkbox is-solid is-circle is-info">
<input type="checkbox">
<span></span>
گزینه 3
</label>
<label class="checkbox is-solid is-circle is-success">
<input type="checkbox">
<span></span>
گزینه 4
</label>
<label class="checkbox is-solid is-circle is-warning">
<input type="checkbox">
<span></span>
گزینه 5
</label>
<label class="checkbox is-solid is-circle is-danger">
<input type="checkbox">
<span></span>
گزینه 6
</label>
</div>
</div>