آواتار
کامپوننت <Avatar /> به منظور نمایش تصاویر و آواتار مناسب می‌باشد. سایز آواتار می‌تواند با ویژگی ‘size’ مشخص شود. ویژگی‌های قابل لاستفاده small, medium, large, big و xl هستند. برای مشاهده جزئیات و نحوه استفاده نمونه کد را بررسی کنید.
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-large">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-big">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-xl">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
آواتار مربعی
آواتارها می‌توانند به شکل مربعی تغییر کنند کافی است ویژگی squared به کامپوننت آواتار اضافه شود. برای مشاهده جزئیات و نحوه استفاده نمونه کد را بررسی کنید.
<div class="h-avatar is-small">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-large">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-big">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-xl">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
آواتار با نقطه
اگر می خواهید برای مثال وضعیت کاربر را نشان دهید، آواتارها می توانند یک نقطه کوچک وصل‌شونده داشته باشند. ویژگی dot را به جزء نماد هدف اضافه کنید. برای جزئیات بیشتر در مورد استفاده کد را ببینید.
<div class="h-avatar is-small has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-large has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-big has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-xl has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
آواتار مربعی با نقطه
اگر می خواهید برای مثال وضعیت کاربر را نشان دهید، آواتارها می توانند یک نقطه کوچک وصل‌شونده داشته باشند. ویژگی dot را به جزء نماد هدف اضافه کنید. برای جزئیات بیشتر در مورد استفاده کد را ببینید.
<div class="h-avatar is-small has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-large has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-big has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-xl has-dot has-dot-squared">
<img class="avatar is-squared" src="https://via.placeholder.com/150x150" alt="">
</div>
آواتار با نقطه‌های رنگی
نقطه‌های آواتار می‌توانند رنگ‌های مختلف داشته باشند. ویژگی dotColor به مقداری دلخواه تغییر دهید. مقدارهای قابل استفاده اولیه, اطلاعات, هشدار, اخطار یا grey هستند. برای مشاهده جزئیات و نحوه استفاده نمونه کد را بررسی کنید.
<div class="h-avatar is-medium has-dot">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot dot-primary">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot dot-info">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot dot-warning">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot dot-danger">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="h-avatar is-medium has-dot dot-grey">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
آواتار با برچسب
آواتارهای ویوئِرو می توانند تصاویر نشان داشته باشند. کافی است آدرس تصویر با نسبت 1:1 را به کامپوننت avatar با استفاده از ویژگی badge اضافه کنید.
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-large">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-big">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-xl">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
آواتار جعلی
هنگامی که آدرس تصویر ارائه شده خالی باشد، کامپوننت آواتار به یک آواتار جعلی تبدیل می گردد. همان ویژگی‌های قبلی برای سایز قابل استفاده است. برای انتقال حروف اول به کامپوننت، از ویژگی initials استفاده کنید. برای جزئیات بیشتر در مورد استفاده ، نمونه های کد را مشاهده کنید.
<div class="h-avatar is-small">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-large">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-big">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-xl">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
آواتار جعلی مربعی
هنگامی که آدرس تصویر ارائه شده خالی باشد، کامپوننت آواتار به یک آواتار جعلی تبدیل می گردد. همان ویژگی‌های قبلی برای سایز قابل استفاده است. برای انتقال حروف اول به کامپوننت، از ویژگی initials استفاده کنید. برای جزئیات بیشتر در مورد استفاده ، نمونه های کد را مشاهده کنید.
<div class="h-avatar is-small">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-large">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-big">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-xl">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
آواتار جعلی با برچسب
هنگامی که هیچ تصویر پیش فرض ارائه نمی شود، می توانید از یک آواتار جعلی استفاده کنید. اصلاح کننده های هم اندازه موجود هستند. آواتارهای جعلی نیز می توانند نشان داشته باشند. برای جزئیات بیشتر در مورد استفاده، نمونه کد را ببینید.
<div class="h-avatar is-small">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-large">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-big">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
<div class="h-avatar is-xl">
<span class="avatar is-fake">
<span>JD</span>
</span>
<img class="badge" src="https://via.placeholder.com/150x150">
</div>
جعلی و رنگی
آواتارهای تقلبی می توانند رنگ های متفاوتی داشته باشند تا یکنواختی را از بین ببرند. می توانید رنگ آواتار را با تنظیم کردن ویژگی color با یکی از مواردی که در ادامه می‌آیند تغییر دهید: اولیه, موفق, اطلاعات, هشدار, اخطار, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. از حالت تاریک پشتیبانی می‌کند.
<div class="h-avatar is-medium">
<span class="avatar is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-primary">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-success">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-warning">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-danger">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-purple">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-orange">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-blue">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-green">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-red">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-yellow">
<span>JD</span>
</span>
</div>
جعلی و رنگی مربعی
آواتارهای تقلبی می توانند رنگ های متفاوتی داشته باشند تا یکنواختی را از بین ببرند. می توانید رنگ آواتار را با تنظیم کردن ویژگی color با یکی از مواردی که در ادامه می‌آیند تغییر دهید: اولیه, موفق, اطلاعات, هشدار, اخطار, h-purple, h-orange, h-blue, h-green, h-red, h-yellow. از حالت تاریک پشتیبانی می‌کند.
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-primary">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-success">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-warning">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-danger">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-purple">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-orange">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-blue">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-squared is-fake is-green">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-red">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-yellow">
<span>JD</span>
</span>
</div>
آواتار پشت سر هم کوچک
آواتارهای Huro را می توان در یک خط کمی روی هم قرار داد. به سادگی آواتارهای خود را در یک عنصر avatar-stack قرار دهید. شما فقط می توانید از آواتارهای کوچک، استاندارد و متوسط استفاده کنید
<div class="avatar-stack">
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-small">
<span class="avatar is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-small">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-small">
<span class="avatar is-fake is-success">
<span>CF</span>
</span>
</div>
<div class="h-avatar is-small">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>
آواتار پشت سر هم استاندارد
آواتارهای Huro را می توان در یک خط کمی روی هم قرار داد. به سادگی آواتارهای خود را در یک عنصر avatar-stack قرار دهید. شما فقط می توانید از آواتارهای کوچک، استاندارد و متوسط استفاده کنید
<div class="avatar-stack">
<div class="h-avatar">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar">
<span class="avatar is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar">
<span class="avatar is-fake is-success">
<span>CF</span>
</span>
</div>
<div class="h-avatar">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>
آواتار پشت سر هم متوسط
آواتارهای Huro را می توان در یک خط کمی روی هم قرار داد. به سادگی آواتارهای خود را در یک عنصر avatar-stack قرار دهید. شما فقط می توانید از آواتارهای کوچک، استاندارد و متوسط استفاده کنید
<div class="avatar-stack">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-info">
<span>JD</span>
</span>
</div>
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150"
alt="">
</div>
<div class="h-avatar is-medium">
<span class="avatar is-fake is-success">
<span>CF</span>
</span>
</div>
<div class="h-avatar is-medium">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>