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