H انتخابگر
Huro همچنین به جای select بومی، کنترل‌های فرم مانند H Select را از ابتدا ارائه می‌کند. با ترکیبی از CSS و جاوا اسکریپت کنترل می شود و با طراحی های مدرن کاملاً زیبا بازی می کند. لطفاً برای جزئیات بیشتر در مورد استفاده به نمونه کدها مراجعه کنید.
یک قهرمان انتخاب کنید
<div class="field">
<div class="control">
<div class="h-select">
<div class="select-box">
<span>یک قهرمان انتخاب کنید</span>
</div>
<div class="select-icon">
<i data-feather="chevron-down"></i>
</div>
<div class="select-drop has-slimscroll-sm">
<div class="drop-inner">
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>سوپرمن</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>بتمن</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>ددپول</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>Spawn</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>مردآهنی</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
انتخابگر گرد
انتخابگر می تواند مانند سایر کنترل های فرم دارای لبه های گرد باشد. به سادگی کلاس is-rounded را به عنصر h-select اضافه کنید. لطفاً برای جزئیات بیشتر در مورد استفاده به مثال کد مراجعه کنید.
یک قهرمان انتخاب کنید
<div class="field">
<div class="control">
<div class="h-select is-rounded">
<div class="select-box">
<span>یک قهرمان انتخاب کنید</span>
</div>
<div class="select-icon">
<i data-feather="chevron-down"></i>
</div>
<div class="select-drop has-slimscroll-sm">
<div class="drop-inner">
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>سوپرمن</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>بتمن</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>ددپول</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>Spawn</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<span>مردآهنی</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
با تصویر
H Select می تواند گزینه هایی از جمله تصاویر گرد را نمایش دهد و برای کاربران یا هر تصویری با نسبت 1:1 ایده آل است. کلاس has-media را به h-select هدف اضافه کنید. لطفاً برای جزئیات بیشتر در مورد استفاده به مثال کد مراجعه کنید.
یک دوست انتخاب کنید
اریک
جاشو
مانلی
آلیس
استفان
<div class="field">
<div class="control">
<div class="h-select has-media">
<div class="select-box">
<span>Select a friend</span>
</div>
<div class="select-icon">
<i data-feather="chevron-down"></i>
</div>
<div class="select-drop has-slimscroll-sm">
<div class="drop-inner">
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>John Smith</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Alan Kricks</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Stan Mayfield</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Mike Templeton</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Jimmy Cusack</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
به سمت بالا
در عوض، منوی کرکره‌ای H Select می‌تواند کشویی باشد. اگر نیاز به استفاده از dropup دارید، به سادگی کلاس is-dropup را به عنصر هدف h-select اضافه کنید. لطفاً برای جزئیات بیشتر در مورد استفاده به مثال کد مراجعه کنید.
یک دوست انتخاب کنید
اریک
جاشو
مانلی
آلیس
استفان
<div class="field">
<div class="control">
<div class="h-select is-rounded is-dropup has-media">
<div class="select-box">
<span>Select a friend</span>
</div>
<div class="select-icon">
<i data-feather="chevron-down"></i>
</div>
<div class="select-drop has-slimscroll-sm">
<div class="drop-inner">
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>John Smith</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Alan Kricks</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Stan Mayfield</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Mike Templeton</span>
</div>
</div>
<div class="option-row">
<input type="radio" name="hero_select">
<div class="option-meta">
<img src="https://via.placeholder.com/150x150" alt="">
<span>Jimmy Cusack</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
انتخابگر پایه ای
Huro به جای html5 بومی select، جعبه‌های ترکیبی آیکون و تصویر داخلی را فراهم می‌کند. این عنصر برای درست کار کردن به جاوا اسکریپت نیاز دارد. لطفاً برای جزئیات بیشتر در مورد استفاده به مثال کد مراجعه کنید.
نوع سرویس
پزشکی
- آمبولانس
- کمک های اولیه
- پزشکی
- بیمارستان
<div class="field">
<div class="control is-combo">
<div class="combo-label">Service Type</div>
<div class="combo-box">
<div class="box-inner">
<div class="combo-item">
<i class="lnil lnil-medical-briefcase"></i>
<span class="selected-item">پزشکی</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li>
<span class="item-icon">
<i class="lnil lnil-آمبولانس-alt-1"></i>
</span>
<span class="item-name">آمبولانس</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<i class="lnil lnil-first-aid"></i>
</span>
<span class="item-name">کمک های اولیه</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li class="is-active">
<span class="item-icon">
<i class="lnil lnil-medical-briefcase"></i>
</span>
<span class="item-name">پزشکی</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<i class="lnil lnil-بیمارستان-alt-3"></i>
</span>
<span class="item-name">بیمارستان</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
انتخابگر گرد
مانند سایر کنترل‌های فرم، جعبه ترکیبی Huro می‌تواند لبه‌های گرد داشته باشد. برای اعمال این سبک، به سادگی کلاس is-rounded را به عنصر combo-box هدف اضافه کنید. برای جزئیات بیشتر در مورد استفاده، به مثال کد مراجعه کنید.
نوع سرویس
پزشکی
- آمبولانس
- کمک های اولیه
- پزشکی
- بیمارستان
<div class="field">
<div class="control is-combo">
<div class="combo-label">Service Type</div>
<div class="combo-box is-rounded">
<div class="box-inner">
<div class="combo-item">
<i class="lnil lnil-medical-briefcase"></i>
<span class="selected-item">پزشکی</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li>
<span class="item-icon">
<i class="lnil lnil-آمبولانس-alt-1"></i>
</span>
<span class="item-name">آمبولانس</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<i class="lnil lnil-first-aid"></i>
</span>
<span class="item-name">کمک های اولیه</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li class="is-active">
<span class="item-icon">
<i class="lnil lnil-medical-briefcase"></i>
</span>
<span class="item-name">پزشکی</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<i class="lnil lnil-بیمارستان-alt-3"></i>
</span>
<span class="item-name">بیمارستان</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
انتخابگر مربعی با تصویر
به جای نمادهای معمولی، جعبه های ترکیبی Huro می توانند تصاویر داشته باشند. نشانه گذاری کمی با جعبه ترکیبی معمولی متفاوت است. لطفاً برای جزئیات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
Git type
یک زبان را مشخص کنید
-
Javascript
-
-
-
<div class="field">
<div class="control is-combo">
<div class="combo-label">Git type</div>
<div class="image-combo-box">
<div class="box-inner">
<div class="combo-item">
<img src="https://via.placeholder.com/150x150" alt="">
<span class="selected-item">یک زبان را مشخص کنید</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Javascript</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Angular</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Html5</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Android</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
انتخابگر گرد با تصویر
جعبه های ترکیبی تصویر می توانند به جای تصاویر مربع، تصاویر گرد داشته باشند. برای اعمال آن سبک، به سادگی کلاس has-rounded-images را به عنصر image-combo-box هدف اضافه کنید. برای جزئیات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
Language
یک زبان را مشخص کنید
-
-
-
-
<div class="field">
<div class="control is-combo">
<div class="combo-label">Language</div>
<div class="image-combo-box has-rounded-images">
<div class="box-inner">
<div class="combo-item">
<img src="https://via.placeholder.com/150x150" data-demo-src="assets/img/photo/demo/misc/code.png" alt="">
<span class="selected-item">یک زبان را مشخص کنید</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Javascript</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Angular</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Html5</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img src="https://via.placeholder.com/150x150" alt="">
</span>
<span class="item-name">Android</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
انتخابگر چندتایی با تصویر
جعبه های ترکیبی تصویر معمولی را می توان تقویت کرد تا به جعبه های ترکیبی تصویر انباشته تبدیل شوند. بیش از یک گزینه را می توان انتخاب کرد و باعث می شود تصاویر در جعبه ترکیبی اصلی پشته شوند. لطفاً برای جزئیات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
Languages
یک یا چند زبان را انتخاب کنید
-
-
-
-
-
-
-
-
-
<div class="field">
<div class="control is-combo">
<div class="combo-label">Languages</div>
<div class="stacked-combo-box has-rounded-images">
<div class="box-inner">
<div class="combo-item">
<img id="skill-placeholder" src="https://via.placeholder.com/150x150" alt="">
<span class="selected-item">Select one or more languages</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li data-skill="javascript-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Javascript</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="angular-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Angular</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="reactjs-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Reactjs</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="vuejs-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Vuejs</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="nodejs-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Nodejs</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="android-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Android</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="swift-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Swift</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="wordpress-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">WordPress</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li data-skill="laravel-skill">
<span class="item-icon">
<img src="https://via.placeholder.com/150x15" alt="">
</span>
<span class="item-name">Laravel</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
انتخابگر کاربر
نوع دیگری از جعبه ترکیبی به شما امکان می دهد از تصاویر آواتار در داخل جعبه های ترکیبی خود از جمله تصویر نشان استفاده کنید. این به ویژه برای لیست کاربران مفید است. لطفاً برای جزئیات بیشتر در مورد استفاده به نشانه گذاری مراجعه کنید.
کاربر
-
-
-
-
-
<div class="field">
<div class="control is-combo">
<div class="combo-label">User</div>
<div class="user-combo-box">
<div class="box-inner">
<div class="combo-item">
<div class="avatar-container">
<img class="avatar" src="https://via.placeholder.com/150x150" data-demo-src="assets/img/avatars/placeholder.jpg" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</div>
<span class="selected-item is-pushed">Select a user</span>
</div>
</div>
<div class="box-chevron">
<i data-feather="chevron-down"></i>
</div>
<div class="box-dropdown">
<div class="dropdown-inner has-slimscroll">
<ul>
<li>
<span class="item-icon">
<img class="avatar" src="https://via.placeholder.com/150x150" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</span>
<span class="item-name">Jimmy S.</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img class="avatar" src="https://via.placeholder.com/150x150" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</span>
<span class="item-name">Alan W..</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img class="avatar" src="https://via.placeholder.com/150x150" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</span>
<span class="item-name">دنی D.</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img class="avatar" src="https://via.placeholder.com/150x150" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</span>
<span class="item-name">ماری</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
<li>
<span class="item-icon">
<img class="avatar" src="https://via.placeholder.com/150x150" alt>
<img class="badge" src="assets/img/icons/flags/united-states-of-america.svg" alt>
</span>
<span class="item-name">Alex S.</span>
<span class="checkmark">
<i data-feather="check"></i>
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>