مدیا فلکس
Huro یک عنصر رسانه انعطاف پذیر همه کاره و بسیار انعطاف پذیر را ارائه می دهد. به سادگی با نشانه گذاری زیر ایجاد و عنصر کنید. لطفا توجه داشته باشید که این نسخه دارای تراز افقی نیست. برای جزئیات بیشتر نشانه گذاری را بررسی کنید
<div class="media-flex">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>آنا</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
با آیکون
Huro یک عنصر رسانه انعطاف پذیر همه کاره و بسیار انعطاف پذیر را ارائه می دهد. آواتار را می توان با یک نماد یا هر نوع عنصر جایگزین کرد. لطفا توجه داشته باشید که این نسخه دارای تراز افقی نیست. برای جزئیات بیشتر نشانه گذاری را بررسی کنید
<div class="media-flex">
<div class="h-icon is-success is-rounded">
<i data-feather="clock"></i>
</div>
<div class="flex-meta">
<span>Team Tasks</span>
<span>View all tasks</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
مدیا فلکس وسط چین
Huro یک عنصر رسانه انعطاف پذیر همه کاره و بسیار انعطاف پذیر را ارائه می دهد. آواتار را می توان با یک نماد یا هر نوع عنصر جایگزین کرد. لطفا توجه داشته باشید که این نسخه دارای تراز افقی نیست. برای جزئیات بیشتر نشانه گذاری را بررسی کنید
<div class="media-flex-center">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>آنا</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
با آیکون
Huro یک عنصر رسانه انعطاف پذیر همه کاره و بسیار انعطاف پذیر را ارائه می دهد. آواتار را می توان با یک نماد یا هر نوع عنصر جایگزین کرد. لطفا توجه داشته باشید که این نسخه دارای تراز افقی نیست. برای جزئیات بیشتر نشانه گذاری را بررسی کنید
<div class="media-flex-center">
<div class="h-icon is-info is-rounded">
<i data-feather="chrome"></i>
</div>
<div class="flex-meta">
<span>Browser Support</span>
<span>View browser support</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
واکنش گرا نسبت به موبایل
بلوک‌های انعطاف‌پذیر رسانه را می‌توان با افزودن برخی کلاس‌ها برای یک viewport خاص پاسخگو ساخت. هنگامی که روی حالت پاسخگو تنظیم می شود، عناصر بلوک انعطاف پذیر روی هم قرار می گیرند تا در فضای موجود قرار بگیرند. برای اینکه یک بلوک انعطاف پذیر فقط در تلفن همراه پاسخگو باشد، کلاس is-responsive-mobile را به media-flex یا media-flex-center هدف اضافه کنید. اندازه صفحه نمایش خود را تغییر دهید تا آن را در عمل ببینید.
<div class="media-flex-center is-responsive-mobile">
<div class="h-avatar is-medium">
<img class="avatar" src="https://via.placeholder.com/150x150" alt="">
</div>
<div class="flex-meta">
<span>آنا</span>
<span>UX Designer</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>
واکنش گرا نسبت به تبلت
بلوک‌های انعطاف‌پذیر رسانه را می‌توان با افزودن برخی کلاس‌ها برای یک viewport خاص پاسخگو ساخت. هنگامی که روی حالت پاسخگو تنظیم می شود، عناصر بلوک انعطاف پذیر روی هم قرار می گیرند تا در فضای موجود قرار بگیرند. برای اینکه یک بلوک انعطاف پذیر فقط در تلفن همراه پاسخگو باشد، کلاس is-responsive-mobile را به media-flex یا media-flex-center هدف اضافه کنید. اندازه صفحه نمایش خود را تغییر دهید تا آن را در عمل ببینید.
<div class="media-flex-center is-responsive-mobile is-responsive-tablet-p">
<div class="h-icon is-info is-rounded">
<i data-feather="chrome"></i>
</div>
<div class="flex-meta">
<span>Browser Support</span>
<span>View browser support</span>
</div>
<div class="flex-end">
<!--Your action here (dropdown, button etc...)-->
</div>
</div>