افزودنی ورودیها
افزودنی در انتها
اگر نیاز به نمایش اطلاعات متنی دارید، ورودیها میتوانند افزونههایی داشته باشند. می توانید یک افزونه را در انتهای گروه field
ضمیمه کنید. برای جزئیات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Gmail address">
</div>
<div class="control">
<a class="button is-static">
@gmail.com
</a>
</div>
</div>
افزودنی در ابتدا
در صورت نیاز به نمایش اطلاعات متنی، ورودیها میتوانند افزونههایی داشته باشند. می توانید یک افزونه را در ابتدای گروه field
ضمیمه کنید. برای اطلاعات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
<div class="field has-addons">
<div class="control">
<a class="button is-static">
+1
</a>
</div>
<div class="control is-expanded">
<input class="input" type="text" placeholder="Your phone number">
</div>
</div>
افزودنی های رنگی
از آنجایی که ورودی های اضافه عناصر دکمه هستند، کلاس های اصلاح کننده معمولی برای آنها اعمال می شود. می توانید از is-primary
، is-success
، is-info
، is-warning
، is-danger
استفاده کنید.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-primary">
Search
</a>
</div>
</div>
افزودنی های گرد
ورودی ها و افزونه های آنها می توانند لبه های گرد نیز داشته باشند. به سادگی کلاس is-rounded
را به input
و عنصر دکمه
را برای اعمال آن سبکها اضافه کنید. برای جزئیات بیشتر به نشانه گذاری مراجعه کنید.
<div class="field has-addons">
<div class="control is-expanded">
<input class="input is-rounded" type="text" placeholder="Find a repository">
</div>
<div class="control">
<a class="button is-primary is-rounded">
Search
</a>
</div>
</div>
افزودنی دوطرفه
ورودی ها می توانند در هر دو طرف دارای افزونه باشند. حتی می توانید یک عنصر select
را به گروه کنترل فرم خود متصل کنید. لطفاً برای جزئیات بیشتر در مورد استفاده به مثال کد مراجعه کنید.
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>€</option>
</select>
</span>
</p>
<p class="control is-expanded">
<input class="input" type="text" placeholder="Amount of money">
</p>
<p class="control">
<a class="button is-success">
Send Payment
</a>
</p>
</div>