لیست چت

مشاهده همه

  • A
  • B
  • D
  • J
  • O
چت با خیلش

آنلاین

  • مشاهده نمایه
  • به دوستان btn-close اضافه کنید
  • به گروه اضافه کنید
  • مسدود کردن
سلام سامیم چطوری؟ 8:40 قبل از ظهر, امروز
سلام خالد من خوبم ممنون شما چطور؟ 8:55 قبل از ظهر, امروز
من هم خوبم ممنون از قالب چتتون 9:00 قبل از ظهر, امروز
شما خوش آمدید 9:05 قبل از ظهر, امروز
من به دنبال الگوهای بعدی شما هستم 9:07 قبل از ظهر, امروز
باشه ممنون روز خوبی داشته باشی 9:10 قبل از ظهر, امروز
خداحافظ، می بینمت 9:12 قبل از ظهر, امروز
سلام سامیم چطوری؟ 8:40 قبل از ظهر, امروز
سلام خالد من خوبم ممنون شما چطور؟ 8:55 قبل از ظهر, امروز
من هم خوبم ممنون از قالب چتتون 9:00 قبل از ظهر, امروز
شما خوش آمدید 9:05 قبل از ظهر, امروز
من به دنبال الگوهای بعدی شما هستم 9:07 قبل از ظهر, امروز
باشه ممنون روز خوبی داشته باشی 9:10 قبل از ظهر, امروز
خداحافظ، می بینمت 9:12 قبل از ظهر, امروز
اطلاعیه ها

مشاهده همه

  • وضعیت سرور
  • KK
  • اجتماعی
  • RU
  • وضعیت سرور
  • AU
  • MO
یادداشت ها

یادداشت های جدید اضافه کنید

یاش ادمین سیستم مدیریت فروش © 2024 تمامی حقوق محفوظ است

ساخته شده با DexignZone

کشویی پایه

منوی کشویی یک منوی قابل تغییر است که به کاربر اجازه می دهد یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند

پیوند 1 پیوند 2 پیوند 3 
<div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			دکمه کشویی
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>
</div>

موارد غیرفعال و فعال

کلاس .dropdown-header برای افزودن سرصفحه در منوی کشویی استفاده می شود. 

<div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			دکمه کشویی
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">عادی</a>
			<a class="dropdown-item active" href="javascript:void(0);">فعال</a>
			<a class="dropdown-item disabled" href="javascript:void(0);">از کار افتاده است</a>
		</div>
	</div>
</div>

تراز کردن به راست

برای تراز کردن منوی کشویی، کلاس .dropdown-menu-end را به عنصر دارای .dropdown-menu اضافه کنید.

پیوند 1 پیوند 2 پیوند 3 
 <div class="basic-dropdown">
	<div class="dropdown">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			دکمه کشویی
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>
</div>

رها کردن

کلاس .dropup باعث می شود که منوی کشویی به جای پایین به سمت بالا گسترش یابد.

پیوند 1 پیوند 2 پیوند 3
پیوند 1 پیوند 2 پیوند 3 
<div class="basic-dropdown">
	<!-- Default dropup button -->
	<div class="btn-group dropup mb-1">
		<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
			رها کردن
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>javascript:void(0);
	<!-- Split dropup button -->
	<div class="btn-group dropup mb-1">
		<button type="button" class="btn btn-primary">
		تقسیم رها کردن
		</button>
		<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			<span class="sr-only">کشویی را تغییر دهید</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>
</div>

قطره چکان

با افزودن .dropend به عنصر والد، منوهای کشویی را در سمت راست عناصر فعال کنید.

پیوند 1 پیوند 2 پیوند 3
پیوند 1 پیوند 2 پیوند 3 
 <div class="basic-dropdown">
	<!-- Default dropright button -->
	<div class="btn-group dropend mb-1">
		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
			Dropright
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>

	<!-- Split dropright button -->
	<div class="btn-group dropend mb-1">
		<button type="button" class="btn btn-primary">
			تقسیم قطره
		</button>
		<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			<span class="sr-only">Dropright را تغییر دهید</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>
</div>

شروع رها کردن

با افزودن .dropstart به عنصر والد

، منوهای کشویی را در سمت راست عناصر فعال کنید.
پیوند 1 پیوند 2 پیوند 3
پیوند 1 پیوند 2 پیوند 3 
 <div class="basic-dropdown">
	<!-- Default dropstart button -->
	<div class="btn-group dropstart mb-1">
		<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
			شروع رها کردن
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
			<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
		</div>
	</div>

	<!-- Split dropstart button -->
	<div class="btn-group mb-1">
		<div class="btn-group dropstart " role="group">
			<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
				<span class="sr-only">شروع رها کردن را تغییر دهید</span>
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">پیوند 1</a>
				<a class="dropdown-item" href="javascript:void(0);">پیوند 2</a>
				<a class="dropdown-item" href="javascript:void(0);">پیوند 3</a>
			</div>
		</div>
		<button type="button" class="btn btn-primary">
		شروع دراپ تقسیم
		</button>
	</div>
</div>

کشویی دکمه

 <div class="button-dropdown">
<div class="btn-group mb-1">
	<button type="button" class="btn btn-primary">اولیه</button>
	<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>javascript:void(0);
<div class="btn-group mb-1">
	<button type="button" class="btn btn-secondary">ثانویه</button>
	<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-success">موفقیت</button>
	<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-info">اطلاعات</button>
	<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-warning">هشدار</button>
	<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>

<div class="btn-group mb-1">
	<button type="button" class="btn btn-danger">خطر</button>
	<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
	</button>
	<div class="dropdown-menu">
		<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
		<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
		<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
	</div>
</div>
</div>

سایز بندی

کشویی دکمه‌ها با دکمه‌های همه اندازه‌ها، از جمله کشویی دکمه‌های پیش‌فرض و تقسیم‌بندی کار می‌کنند.

 <div class="dropdown-size">
	<!-- Large button groups (default and split) -->
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
			Large button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
			<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
			<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
		</div>
	</div>
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-lg" type="button">
			دکمه تقسیم بزرگ
		</button>
		<button type="button" class="btn btn-lg btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
			<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
			<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
		</div>
	</div>

	<!-- Small button groups (default and split) -->
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
			Small button
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
			<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
			<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
		</div>
	</div>
	<div class="btn-group mb-1">
		<button class="btn btn-primary btn-sm" type="button">
			Small split button
		</button>
		<button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<span class="sr-only">Toggle Dropdown</span>
		</button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="javascript:void(0);">اقدام</a>
			<a class="dropdown-item" href="javascript:void(0);">اقدام دیگر</a>
			<a class="dropdown-item" href="javascript:void(0);">یه چیز دیگه اینجا</a>
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" href="javascript:void(0);">لینک جدا شده</a>
		</div>
	</div>
</div>

سبک سفارشی

از .custom-dropdown این کلاس برای این سبک

استفاده کنید 
 <div class="row">
<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div data-bs-toggle="dropdown">7 روز گذشته
			<i class="fa fa-angle-down ms-3"></i>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">1 ماه گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">6 ماه گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">10 ماه گذشته</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">7 روز گذشته
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">1 ماه گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">6 ماه گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">10 ماه گذشته</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">1 ساعت گذشته
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item" href="javascript:void(0);">1 ساعت گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">2 ساعت گذشته</a>
			<a class="dropdown-item" href="javascript:void(0);">3 ساعت گذشته</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">7 روز گذشته
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">1 ماه گذشته</a>
			<a class="dropdown-item"  href="javascript:void(0);">6 ماه گذشته</a>
			<a class="dropdown-item"  href="javascript:void(0);">10 ماه گذشته</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
			<i class="ti-search mr-3"></i> 3 قبل از ظهر
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">6 قبل از ظهر</a>
			<a class="dropdown-item"  href="javascript:void(0);">9 قبل از ظهر</a>
			<a class="dropdown-item"  href="javascript:void(0);">12 قبل از ظهر</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="dropdown">
			<i class="ti-calendar m-r-5"></i> March 20, 2018   To  April
			20, 2018
			<i class="fa fa-angle-down ms-3"></i>
		</button>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">می 20, 2018   به   ژوئن 20,
				2018</a>
			<a class="dropdown-item"  href="javascript:void(0);">جولای 20, 2018   به   آگوست
				20, 2018</a>
		</div>
	</div>
</div>
<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 1</a>
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 2</a>
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 3</a>
		</div>
	</div>
</div>

<div class="col-xl-3">
	<div class="dropdown custom-dropdown">
		<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
		</div>
		<div class="dropdown-menu dropdown-menu-end">
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 1</a>
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 2</a>
			<a class="dropdown-item"  href="javascript:void(0);">گزینه 3</a>
		</div>
	</div>
</div>
</div>

کشویی

کپی رایت © توسعه یافته توسط DexignZone 2024