هشدار ها

نحوه نمایش هشدار

پیغام های هشدار خود را در محتویات سایت قرار دهید، برای اینکار فقط کافیست شما از عنصر <div> با کلاس .alert همراه با یک فرزند با کلاس .alert__body استفاده کنید.
این المان فرزند، محتوایات پیغام هشدار شما را در خود جای داده است. برای نمایش دکمه بستن شما میتوانید در کلاس .alert با یک فرزند جدید که کلاس ان فرزند جدید .alert__close میباشد، استفاده کنید تا به شما دکمه بستن را نمایش بدهد.
لطفا به موضوع هم توجه کنید که در درون این فرزند هرچیزی که قرار بگیرد به عنوان دکمه بستن نمایش داده میشود، شما میتوان هم متن قرار دهید و هم ایکون

<div class="alert">
    <div class="alert__body">
        <span>این پیغام هشدار شما است</span>
    </div>
    <div class="alert__close">
        ×
    </div>
</div>
					            

نحوه تغییر رنگ هشدار ها

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

• .bg--error برای ارور ها و نمایش قرمز
• .bg--successبرای نمایش با رنگ سبز
• .bg--primary برای نمایش با رنگ آبی

<div class="alert bg--error">
    <div class="alert__body">
        <span>این هشدار به رنگ قرمز است.</span>
    </div>
    <div class="alert__close">
        ×
    </div>
</div>
<div class="alert bg--success">
    <div class="alert__body">
        <span>این هشدار به رنگ سبز است.</span>
    </div>
    <div class="alert__close">
        ×
    </div>
</div>
<div class="alert bg--primary">
    <div class="alert__body">
        <span>این هشدار به رنگ آبی است.</span>
    </div>
    <div class="alert__close">
        ×
    </div>
</div>