قالب HTML داشبورد مدیریتی Admiro

انگلیسی
2
سبد خرید
- ساعت چند رنگ
  
  500
- ایرپاد
  
  500.00
- مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
4
اطلاعیه‌ها مشاهده همه
- ۱۰ اردیبهشت ۱۴۰۳امروز
  
  محسن
  
  مد و فشن باید جذاب و سرگرم‌کننده باشد و نباید صرفاً به عنوان موضوعی علمی یا فکری برچسب‌گذاری شود.
- ۶ تیر ۱۴۰۳۱ ساعت پیش
  
  مارال
  
  اطمینان دارم که در سادگی نیز می‌توان شکوه و لوکس بودن را مشاهده کرد.
- ۱۳ مرداد ۱۴۰۳امروز
  
  لیلا
  
  احساس می‌کنم رویدادها برای ایجاد فرصت‌های جدید اتفاق می‌افتند.
- ۲۱ آبان ۱۴۰۳دیروز
  
  فریبا
  
  گاهی ساده‌ترین امور، عمیق‌ترین معنا را دارند.
علاقه مندی
15
آوا

مدیر

منوی کشویی

منوی کشویی پایه

وقتی کلاس .show فعال شود، منوی کشویی ظاهر می‌شود. و با .btn-* می‌توان رنگ پس‌زمینه تیره دکمه را تغییر داد.

<div class="card-body">
<div class="common-flex">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">داشبورد</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">پروژه</a></li>
<li><a class="dropdown-item" href="#">فروشگاه اینترنتی</a></li>
<li><a class="dropdown-item" href="#">رمزارز</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">فروشگاه اینترنتی</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">محصول</a></li>
<li><a class="dropdown-item" href="#">جزئیات محصول</a></li>
<li><a class="dropdown-item" href="#">سبد خرید</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning text-white dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">کیت‌های رابط کاربری</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">تایپوگرافی</a></li>
<li><a class="dropdown-item" href="#">آواتارها</a></li>
<li><a class="dropdown-item" href="#">گرید</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">صفحه خطا</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">خطای 400</a></li>
<li><a class="dropdown-item" href="#">خطای 403</a></li>
<li><a class="dropdown-item" href="#">خطای 500</a></li>
</ul>
</div>
</div>
</div>

منوی کشویی گرد

وقتی کلاس .show فعال شود، منوی کشویی ظاهر می‌شود. و با .rounded-pill می‌توان منوی کشویی گرد ایجاد کرد.

<div class="card-body">
<div class="common-flex">
<div class="btn-group">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu dropdown-block">
<li> <a class="dropdown-item" href="#">تیره</a></li>
<li><a class="dropdown-item" href="#">روشن</a></li>
<li><a class="dropdown-item" href="#">روشن تر</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Success </button>
<ul class="dropdown-menu dropdown-block">
<li> <a class="dropdown-item" href="#">تیره</a></li>
<li><a class="dropdown-item" href="#">روشن</a></li>
<li> <a class="dropdown-item" href="#">روشن تر </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info text-white rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">تیره</a></li>
<li><a class="dropdown-item" href="#">روشن </a></li>
<li><a class="dropdown-item" href="#">روشن تر </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning text-white rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">تیره</a></li>
<li><a class="dropdown-item" href="#">روشن</a></li>
<li><a class="dropdown-item" href="#">روشن تر </a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-danger rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Danger </button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">تیره</a></li>
<li><a class="dropdown-item" href="#">روشن </a></li>
<li><a class="dropdown-item" href="#">روشن تر </a></li>
</ul>
</div>
</div>
</div>

منوی کشویی جدا

وقتی کلاس .show فعال شود، منوی کشویی ظاهر می‌شود. و برای جدا کردن منوی کشویی از .dropdown-toggle-split استفاده کنید.

<div class="common-flex">
                    <div class="btn-group">
                    <button class="btn btn-outline-primary" type="button">ویجت‌ها</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-primary" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"><a href="#">عمومی</a><a href="#">نمودار</a></div>
                    </div>
                    </div>
                    <div class="btn-group">
                    <button class="btn btn-outline-secondary" type="button">انیمیشن‌ها</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-secondary" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"><a href="#">انیمیت</a><a href="#">انیمیشن‌های AOS</a></div>
                    </div>
                    </div>
                    <div class="btn-group">
                    <button class="btn btn-outline-success" type="button">نمودارها</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-success" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"><a href="#">انیمیت</a><a href="#">انیمیشن‌های AOS</a></div>
                    </div>
                    </div>
                    <div class="btn-group">
                    <button class="btn btn-outline-info" type="button">ایمیل</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-info text-white" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"><a href="#">اپلیکیشن ایمیل</a><a href="#">نوشتن ایمیل</a></div>
                    </div>
                    </div>
                    <div class="btn-group">
                    <button class="btn btn-outline-warning" type="button">آیکون‌ها</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-warning text-white" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"><a href="#">آیکون‌های پرچم</a><a href="#">آیکون‌های Fontawesome</a><a href="#">آیکون‌های Ico</a><a href="#">آیکون‌های Feather</a></div>
                    </div>
                    </div>
                    <div class="btn-group">
                    <button class="btn btn-outline-danger" type="button">یادگیری</button>
                    <div class="dropdown separated-btn">
                    <button class="btn btn-danger" type="button"><i class="iconly-Arrow-Down icli"></i></button>
                    <div class="dropdown-content"> <a href="#">فهرست یادگیری</a><a href="#">دورهٔ جزئیات</a></div>
                    </div>
                    </div>
                    </div>

منوی کشویی همراه با عنوان

عنوان اصلی و هر محتوای فرعی در منوی کشویی.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">مهمانی</button>
<ul class="dropdown-menu dropdown-block">
<li class="border-bottom"><a class="dropdown-item fw-bold fs-6 bg-light" href="#">فهرست مهمانی</a></li>
<ul>
<li><a class="dropdown-item" href="#">بادکنک‌ها</a></li>
<li><a class="dropdown-item" href="#">کیک</a></li>
</ul>
</ul>
</div>
</div>

با ورودی انتخابی

از چک‌باکس در منوی کشویی استفاده کنید. (type='checkbox'/'radio')

<div class="common-flex">
<btn-group>
<button class="btn btn-warning text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">ورودی‌ها</button>
<ul class="dropdown-menu dropdown-block dropdown-wrapper dark-input-type">
<li>
<div class="input-group rounded-0 border-0 shadow-none">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="چک‌باکس برای ورودی متن زیر">
</div><span>چک‌باکس پیش‌فرض</span>
</div>
<div class="input-group rounded-0 border-0 shadow-none">
<div class="input-group-text">
<input class="form-check-input mt-0" type="radio" value="" aria-label="دکمه رادیویی برای ورودی متن زیر">
</div><span>رادیو پیش‌فرض</span>
</div>
</li>
</ul>
</btn-group>
</div>

منوی کشویی تیره

با استفاده از کلاس .dropdown-menu-dark می‌توانید حالت تیره ایجاد کنید.

<div class="common-flex dark-dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">شب تاریک</button>
<ul class="dropdown-menu dropdown-menu-dark dropdown-block">
<li><a class="dropdown-item active" href="#">ماه شب</a></li>
<li><a class="dropdown-item" href="#">جغد شب</a></li>
<li><a class="dropdown-item" href="#">سایه‌ شب</a></li>
</ul>
</div>

منوی کشویی متفاوت

روشی خاص برای نمایش منوی کشویی فرم و متن.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">فرم کشویی</button>
<form class="dropdown-menu p-3 form-wrapper dark-form">
<div class="mb-2">
<label class="form-label" for="exampleDropdownFormEmail2">آدرس ایمیل</label>
<input class="form-control" id="exampleDropdownFormEmail2" type="email" placeholder="email@example.com">
</div>
<div class="mb-2">
<label class="form-label" for="exampleDropdownFormPassword2">رمز عبور</label>
<input class="form-control" id="exampleDropdownFormPassword2" type="password" placeholder="رمز عبور">
</div>
<div class="mb-2">
<div class="form-check">
<input class="form-check-input" id="dropdownCheck2" type="checkbox">
<label class="form-check-label" for="dropdownCheck2">مرا به خاطر بسپار</label>
</div>
</div>
<button class="btn btn-dark" type="submit">ورود</button>
</form>
</div>
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">متن</button>
<div class="dropdown-menu p-3 text-muted form-wrapper">
<p class="mb-2">نمونه‌ای از یک متن که آزادانه در منوی کشویی قرار می‌گیرد.</p>
<p class="mb-0">و این هم یک متن نمونه دیگر است.</p>
</div>
</div>
</div>

تراز متن‌ها

از (text-start / text-center / text-end) برای تغییر تراز متن‌های منوی کشویی استفاده کنید.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">متن چپ</button>
<ul class="dropdown-menu dropdown-block text-start">
<li><a class="dropdown-item" href="#">سلام..</a></li>
<li><a class="dropdown-item" href="#">حالت چطوره؟</a></li>
<li><a class="dropdown-item" href="#">داری چه کار می‌کنی؟</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">متن وسط</button>
<ul class="dropdown-menu dropdown-block text-center">
<li><a class="dropdown-item" href="#">شکلات</a></li>
<li><a class="dropdown-item" href="#">بستنی</a></li>
<li><a class="dropdown-item" href="#">جام</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">متن راست</button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">خوبم.</a></li>
<li><a class="dropdown-item" href="#">واو! عالیه!!</a></li>
<li><a class="dropdown-item" href="#">چه خبر خوبی!</a></li>
</ul>
</div>
</div>

ترازها

از کلاس (dropstart / dropup / drOpened) برای تغییر جهت منوهای کشویی استفاده کنید.

<div class="common-flex">
<div class="btn-group dropup">
<button class="btn btn-warning dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">هشدار بالا</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">مراقب باشید</a></li>
<li><a class="dropdown-item" href="#">اطلاعیه‌ها</a></li>
<li><a class="dropdown-item" href="#">هشیار باشید</a></li>
</ul>
</div>
<div class="btn-group drOpened">
<button class="btn btn-success dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">موفقیت راست</button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">موفق باشید</a></li>
<li><a class="dropdown-item" href="#">کار خوب</a></li>
<li><a class="dropdown-item" href="#">انجام شد!</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">اصلی پایین</button>
<ul class="dropdown-menu dropdown-block text-end">
<li><a class="dropdown-item" href="#">مهم است</a></li>
<li><a class="dropdown-item" href="#">زندگی شاد</a></li>
<li><a class="dropdown-item" href="#">کار دیگر</a></li>
</ul>
</div>
<div class="btn-group dropstart">
<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">خطر چپ</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">تهدید</a></li>
<li><a class="dropdown-item" href="#">خطرناک</a></li>
<li><a class="dropdown-item" href="#">هشدار</a></li>
</ul>
</div>
</div>

کارت راهنما

زمانی که کلاس .show فعال می‌شود، منوی کشویی نمایش داده می‌شود.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">کارت راهنما</button>
<ul class="dropdown-menu dropdown-block p-3 dark-form">
<li>
<h6 class="fs-6 fw-bold pb-2">اطلاعات بیشتر!</h6>
<p class="dropdown-item p-0 helper-truncate">اینجا اطلاعات زیادی موجود است</p>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">کارت هشدار</button>
<ul class="dropdown-menu dropdown-block p-3 dark-form">
<li>
<h6 class="fs-6 fw-bold pb-2">هشدار!</h6>
<p class="dropdown-item p-0 helper-truncate">لطفاً! اعلان‌های خود را بررسی کنید.</p>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">کارت اعلان</button>
<ul class="dropdown-menu dropdown-block p-3 dark-form">
<li>
<h6 class="fs-6 fw-bold pb-2">خطر</h6>
<p class="dropdown-item p-0 helper-truncate">این مسیر خطرناک است.</p>
</li>
</ul>
</div>
</div>

منوی کشویی با جداکننده

زمانی که کلاس .show فعال می‌شود، منوی کشویی نمایش داده می‌شود. و از .dropdown-divider برای جدا کردن بخش‌های منو استفاده کنید.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-success rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">لیست علاقه‌مندی‌ها</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">کفش</a></li>
<li><a class="dropdown-item" href="#">کیف</a></li>
<li><a class="dropdown-item" href="#">لباس</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">ورزش‌ها</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">بادمینتون</a></li>
<li><a class="dropdown-item" href="#">تنیس</a></li>
<li><a class="dropdown-item" href="#">خو-خو</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-secondary rounded-pill dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">رنگ‌ها</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">نارنجی</a></li>
<li><a class="dropdown-item" href="#">زرد</a></li>
<li><a class="dropdown-item" href="#">قرمز</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">لینک جداشده</a></li>
</ul>
</div>
</div>

اندازه منوی کشویی

زمانی که کلاس .show فعال می‌شود، منوی کشویی نمایش داده می‌شود. و با استفاده از کلاس [.btn-lg / .btn-sm] می‌توان اندازه دکمه را تغییر داد.

<div class="common-flex">
<div class="btn-group">
<button class="btn btn-info light btn-lg dropdown-toggle text-white" type="button" data-bs-toggle="dropdown" aria-expanded="false">دکمه بزرگ</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">دکمه کوچک</a></li>
<li><a class="dropdown-item" href="#">دکمه متوسط</a></li>
<li><a class="dropdown-item" href="#">دکمه بزرگ</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">دکمه بسیار بزرگ</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-dark light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">دکمه کوچک</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">دکمه کوچک</a></li>
<li><a class="dropdown-item" href="#">دکمه بسیار کوچک</a></li>
<li><a class="dropdown-item" href="#">دکمه خیلی کوچک</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">خیلی خیلی کوچک</a></li>
</ul>
</div>
</div>

500

500.00

۱۰ اردیبهشت ۱۴۰۳امروز

محسن

۶ تیر ۱۴۰۳۱ ساعت پیش

مارال

۱۳ مرداد ۱۴۰۳امروز

لیلا

۲۱ آبان ۱۴۰۳دیروز

فریبا