Input

text input و تغییرات آن

رنگ دارد
سایز دارد
متغیر دارد

کلاس CSS input برای ویژگی HTML <input> در نظر گرفته شده است. ویژگی های زیر پشتیبانی می شوند:

  • type="text"
  • type="password"
  • type="email"
  • type="tel"

چندین کلاس اصلاح کننده پشتیبانی می شوند:


<input class="input" type="text" placeholder="ورودی متن">

رنگ ها #


<div class="field">
                                <div class="control">
                                <input class="input is-primary" type="text" placeholder="Primary input">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-info" type="text" placeholder="Info input">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-success" type="text" placeholder="Success input">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-warning" type="text" placeholder="Warning input">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-danger" type="text" placeholder="Danger input">
                                </div>
</div>
          

اندازه #


<div class="field">
                                <div class="control">
                                <input class="input is-small" type="text" placeholder="ورودی کوچک">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input" type="text" placeholder="ورودی نرمال">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-medium" type="text" placeholder="ورودی متوسط">
                                </div>
</div>
<div class="field">
                                <div class="control">
                                <input class="input is-large" type="text" placeholder="ورودی بزرگ">
                                </div>
</div>
          

استایل #

Since 0.6.2

<input class="input is-rounded" type="text" placeholder="Rounded input">
                

حالت ها #

Normal


<div class="control">
                                <input class="input" type="text" placeholder="Normal input">
</div>
          

Hover


<div class="control">
                                <input class="input is-hovered" type="text" placeholder="Hovered input">
</div>
          

Focus


                  
<div class="control">
                                <input class="input is-focused" type="text" placeholder="Focused input">
</div>
          

Loading


<div class="control is-loading">
                                <input class="input" type="text" placeholder="Loading input">
</div>
          

با افزون کلاس is-small، is-medium یا is-large به بخش control اندازه loading را تغییر دهید.


<div class="field">
                                <div class="control is-small is-loading">
                                <input class="input is-small" type="text" placeholder="Small loading input">
                                </div>
</div>
<div class="field">
                                <div class="control is-loading">
                                <input class="input" type="text" placeholder="Normal loading input">
                                </div>
</div>
<div class="field">
                                <div class="control is-medium is-loading">
                                <input class="input is-medium" type="text" placeholder="Medium loading input">
                                </div>
</div>
<div class="field">
                                <div class="control is-large is-loading">
                                <input class="input is-large" type="text" placeholder="Large loading input">
                                </div>
</div>
          

غیر فعال


<div class="control">
                                <input class="input" type="text" placeholder="Disabled input" disabled>
</div>
          

ورودی های فقط خوتندنی و ثابت

Since 0.5.3

اگر ویژگی HTML readonly استفاده کنید، ورودی شبیه نمونه معمولی است اما قابل ویرایش نیست و سایه ای ندارد.

<div class="control">
                                <input class="input" type="text" value="این یک متن فقط خواندی است" readonly>
                                </div>

همچنین اگر کلاس اصلاح کننده is-static را اضافه کنید،اگر اصلاح کننده is-static را نیز ضمیمه کنید ، با حفظ فاصله عمودی ، پس زمینه ، حاشیه ، سایه و padding افقی را از بین می برد تا بتوانید به راحتی ورودی ها را در هر زمینه ای مانند فرم افقی تراز کنید.


<div class="field is-horizontal">
                        <div class="field-label is-normal">
                        <label class="label">From</label>
                        </div>
                        <div class="field-body">
                        <div class="field">
                        <p class="control">
                        <input class="input is-static" type="email" value="[email protected]" readonly>
                        </p>
                        </div>
                        </div>
</div>

<div class="field is-horizontal">
                        <div class="field-label is-normal">
                        <label class="label">To</label>
                        </div>
                        <div class="field-body">
                        <div class="field">
                        <p class="control">
                        <input class="input" type="email" placeholder="ایمیل گیرنده">
                        </p>
                        </div>
                        </div>
</div>
          

با آیکون های Font Awesome #

شما می توانید 2 کلاس اصلاح کننده را به control اضافه کنید:

  • has-icons-left
  • و/یا has-icons-right

شما همچنین می توانید به icon نیز کلاس اصلاح کننده اضافه کنید:

  • icon is-left اگر has-icons-left استفاده شده است
  • icon is-right اگر has-icons-right استفاده شده است

اندازه input اندازه آیکون را مشخص می کند.


<div class="field">
                                <p class="control has-icons-left has-icons-right">
                                <input class="input" type="email" placeholder="ایمیل">
                                <span class="icon is-small is-right">
                                <i class="fas fa-envelope"></i>
                                </span>
                                <span class="icon is-small is-left">
                                <i class="fas fa-check"></i>
                                </span>
                                </p>
</div>
<div class="field">
                                <p class="control has-icons-right">
                                <input class="input" type="password" placeholder="رمز عبور">
                                <span class="icon is-small is-right">
                                <i class="fas fa-lock"></i>
                                </span>
                                </p>
</div>
          

اگر کنترل حاوی یک آبکون باشد ، Bulma مطمئن می شود که آیکون در مرکز خود باقی بماند ، صرف نظر از اندازه ورودی یا آیکون.


<div class="control has-icons-left has-icons-right">
                                <input class="input is-small" type="email" placeholder="ایمیل">
                                <span class="icon is-small is-right">
                                <i class="fas fa-envelope"></i>
                                </span>
                                <span class="icon is-small is-left">
                                <i class="fas fa-check"></i>
                                </span>
</div>
          

<div class="control has-icons-left has-icons-right">
                                <input class="input" type="email" placeholder="ایمیل">
                                <span class="icon is-small is-right">
                                <i class="fas fa-envelope"></i>
                                </span>
                                <span class="icon is-small is-left">
                                <i class="fas fa-check"></i>
                                </span>
</div>
          

<div class="control has-icons-left has-icons-right">
                                <input class="input is-medium" type="email" placeholder="ایمیل">
                                <span class="icon is-right">
                                <i class="fas fa-envelope"></i>
                                </span>
                                <span class="icon is-left">
                                <i class="fas fa-check"></i>
                                </span>
</div>
          

<div class="control has-icons-left has-icons-right">
                                <input class="input is-large" type="email" placeholder="ایمیل">
                                <span class="icon is-medium is-right">
                                <i class="fas fa-envelope"></i>
                                </span>
                                <span class="icon is-medium is-left">
                                <i class="fas fa-check"></i>
                                </span>
</div>
          

متغیر ها #

برای سفارشی سازی این المان می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma ، به سادگی یک یا چند متغیر را تنظیم کنید. بیاموزید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$input-color color $grey-darker hsl(0, 0%, 21%)
$input-background-color color $white hsl(0, 0%, 100%)
$input-border-color color $grey-lighter hsl(0, 0%, 86%)
$input-shadow size inset 0 1px 2px rgba($black, 0.1)
$input-hover-color color $grey-darker hsl(0, 0%, 21%)
$input-hover-border-color color $grey-light hsl(0, 0%, 71%)
$input-focus-color color $grey-darker hsl(0, 0%, 21%)
$input-focus-border-color color $link hsl(217, 71%, 53%)
$input-focus-box-shadow-size size 0 0 0 0.125em
$input-focus-box-shadow-color color rgba($link, 0.25)
$input-disabled-color color $text-light hsl(0, 0%, 48%)
$input-disabled-background-color color $background hsl(0, 0%, 96%)
$input-disabled-border-color color $background hsl(0, 0%, 96%)
$input-arrow color $link hsl(217, 71%, 53%)
$input-icon-color color $grey-lighter hsl(0, 0%, 86%)
$input-icon-active-color color $grey hsl(0, 0%, 48%)
$input-radius size $radius 4px