مثال های گوناگون
برای تغییر ظاهر آواتار، یکی از کلاس های اصلاح کننده نام برده زیر را اضافه کنید.
سبک پیش فرض
-
فت
-
-
سبک وضعیت
-
فت
-
-
سبک مربعی
-
فت
-
-
سبک وضعیت
-
فت
-
-
سبک گروهی
-
فتمج
-
فت
-
سبک گروهی نسخه 2
-
فم
-
ف
-
مثال کد
//کد برای آواتار پیش فرض/پایه
<div class="user-avatar">
<span>فت</span>
</div>
مثال کد
//کد برای آواتار وضعیت
<div class="user-avatar">
<span>فت</span>
<div class="status dot dot-lg dot-success"></div>
</div>
مثال کد
//کد برای آواتار مربعی
<div class="user-avatar sq">
<span>فت</span>
</div>
مثال کد
//کد برای آواتار گروهی
<div class="user-avatar-group">
<div class="user-avatar">
<span>فت</span>
</div>
<div class="user-avatar">
<span>مج</span>
</div>
</div>
مثال کد
//کد برای چند آواتار با سبک های مختلف
<div class="user-avatar user-avatar-multiple">
<div class="user-avatar">
<span>ف</span>
</div>
<div class="user-avatar">
<span>م</span>
</div>
</div>
مثال با تنوع رنگ
برای تغییر ظاهر آواتار، یکی از کلاس های اصلاح کننده نام برده زیر را اضافه کنید.
رنگ پر آواتار
-
فت
-
مج
-
یچ
-
سع
-
تک
-
خض
-
دم
-
من
-
مر
-
حر
-
مج
-
رم
-
اپ
-
مت
-
حم
-
هغ
رنگ تیره آواتار
-
فت
-
مج
-
یچ
-
سع
-
تک
-
خض
-
دم
-
من
-
مر
-
حر
-
مج
-
رم
-
اپ
-
مت
-
حم
-
هغ
| مرجع کلاس | جزئیات |
|---|---|
.bg-{color} |
از {color} به عنوان primary، secondary، warning، danger، success، info، azure، blue، pink، indigo، dark، gray، orange، teal، purple، lighter استفاده می شود |
.bg-{color}-dim |
از {color} به عنوان primary، secondary، warning، danger، success، info، azure، blue، pink، indigo، dark، gray، orange، teal، purple، light استفاده می شود از روشن بدون پسوند -dim استفاده کنید
|
مثال با اندازه ها
برای تغییر ظاهر آواتار، یکی از کلاس های اصلاح کننده نام برده زیر را اضافه کنید.
آواتارهای گرد
-
فت
-
-
-
فت
-
فت
-
ف
آواتارهای مربعی
-
فت
-
-
-
فت
-
فت
-
ف
| مرجع کلاس | جزئیات |
|---|---|
.{size} |
از {size} به عنوان xl، lg، md، sm، xs استفاده می شود |
مثال با موارد استفاده
بیایید نگاهی به چند موارد واقعا کاربردی برای آواتار بیندازیم.
کارت کاربر 1
کارت کاربر 2
کارت کاربر 3
فت
فرشید ترنیان
مثال کد
//کد برای کارت کاربر 1
<div class="user-toggle">
<div class="user-avatar">
<em class="icon ni ni-user-alt"></em>
</div>
<div class="user-info">
<div class="user-status text-primary">مدیر</div>
<div class="user-name dropdown-indicator">فرشید ترنیان</div>
</div>
</div>
مثال کد
//کد برای کارت کاربر 2
<div class="user-card">
<div class="user-avatar">
<img src="avatar/c-sm.jpg" alt="">
</div>
<div class="user-info">
<span class="lead-text">مینا نجفی</span>
<span class="sub-text">someone@email.com</span>
</div>
</div>
مثال کد
//کد برای کارت کاربر 3
<div class="user-card">
<div class="user-avatar sm bg-purple">
<span>فت</span>
</div>
<div class="user-name">
<span class="tb-lead">فرشید ترنیان</span>
</div>
</div>
