Textarea

textarea چند خطی و تغییرات آن

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

کلاس CSS textarea ورژن چند خطی از المان input می باشد:


<textarea class="textarea" placeholder="سلام دنیا"></textarea>

برای تنظیم ارتفاع textarea می توانید از ویژگی HTML rows استفاده کنید


<textarea class="textarea" placeholder="10 خط از textarea" rows="10"></textarea>
                    

رنگ ها #

المان های textarea در چندین رنگ موجود است:


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

اندازه #

المان textarea در 4 اندازه مختلف وجود دارد:


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

حالت ها #

Bulma حالت های مختلف المان textarea را استایل می دهد. هر حالت به عنوان یک شبه کلاس و یک کلاس CSS در دسترس است:

  • :hover و is-hovered
  • :focus و is-focused
  • :active و is-active

این به شما امکان می دهد استایل یک حالت خاص را بدون نیاز به چیزی بدست آورید.

Normal


<div class="control">
                                <textarea class="textarea" placeholder="Normal textarea"></textarea>
</div>
        

Hover


<div class="control">
                                <textarea class="textarea is-hovered" placeholder="Hovered textarea"></textarea>
</div>
        

Focus


<div class="control">
                                <textarea class="textarea is-focused" placeholder="Focused textarea"></textarea>
</div>
        

Loading


<div class="control is-loading">
                                <textarea class="textarea" placeholder="Loading textarea"></textarea>
</div>
        

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


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

غیرفعال


<div class="control">
                                <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
</div>
        

Readonly

Since 0.5.3

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


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

اندازه ثابت

با افزودن کلاس اصلاح کننده has-fixed-size، می توانید تغییر اندازهtextarea را غیرفعال کنید:


<div class="control">
                                <textarea class="textarea has-fixed-size" placeholder="اندازه ثابت"></textarea>
</div>