773 lines
60 KiB
PHP
773 lines
60 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Dropdown';
|
|
$subTitle = 'Components / Dropdown';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Basic Dropdown Primary</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPill" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPill" data-dropdown-placement="bottom" class="text-primary-600 focus:bg-primary-600 hover:bg-primary-700 border border-primary-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-primary-800" type="button">
|
|
Outline Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPill" data-dropdown-placement="bottom" class="bg-primary-50 hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600/25 dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPill" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillTwo" data-dropdown-placement="bottom" class="hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillTwo" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Dropup Primary</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillDroppop" data-dropdown-placement="top" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDroppop" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPillDroppop" data-dropdown-placement="top" class="text-primary-600 focus:bg-primary-600 hover:bg-primary-700 border border-primary-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-primary-800" type="button">
|
|
Outline Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDroppop" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillDroppop" data-dropdown-placement="top" class="bg-primary-50 hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600/25 dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillDroppop" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillTwoDroppop" data-dropdown-placement="top" class="hover:bg-primary-600 focus:ring-4 focus:outline-none hover:text-white text-primary-600 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-primary-400 dark:hover:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5 5 1 1 5" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillTwoDroppop" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Dropright Warning</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillDropRight" data-dropdown-placement="right" class="text-white bg-warning-600 hover:bg-warning-700 focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600 dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDropRight" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPillDropRight" data-dropdown-placement="right" class="text-warning-600 focus:bg-warning-600 hover:bg-warning-700 border border-warning-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-warning-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-warning-800" type="button">
|
|
Outline Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDropRight" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillDropRight" data-dropdown-placement="right" class="bg-warning-100 hover:bg-warning-600 focus:ring-4 focus:outline-none hover:text-white text-warning-600 focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600/25 dark:text-warning-400 dark:hover:text-white dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillDropRight" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillTwoDropRight" data-dropdown-placement="right" class="hover:bg-warning-600 focus:ring-4 focus:outline-none hover:text-white text-warning-600 focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-warning-400 dark:hover:text-white dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
Focus Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillTwoDropRight" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Dropright Warning</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillDropLeft" data-dropdown-placement="left" class="text-white bg-warning-600 hover:bg-warning-700 focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600 dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
<svg class="w-2.5 h-2.5 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
</svg>
|
|
Default Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDropLeft" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPillDropLeft" data-dropdown-placement="left" class="text-warning-600 focus:bg-warning-600 hover:bg-warning-700 border border-warning-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-warning-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-warning-800" type="button">
|
|
<svg class="w-2.5 h-2.5 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
</svg>
|
|
Outline Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDropLeft" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillDropLeft" data-dropdown-placement="left" class="bg-warning-100 hover:bg-warning-600 focus:ring-4 focus:outline-none hover:text-white text-warning-600 focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600/25 dark:text-warning-400 dark:hover:text-white dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
<svg class="w-2.5 h-2.5 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
</svg>
|
|
Focus Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillDropLeft" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillTwoDropLeft" data-dropdown-placement="left" class="hover:bg-warning-600 focus:ring-4 focus:outline-none hover:text-white text-warning-600 focus:ring-warning-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-warning-400 dark:hover:text-white dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
<svg class="w-2.5 h-2.5 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
|
|
</svg>
|
|
Focus Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillTwoDropLeft" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">warning Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Placement</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillDropPlacement" data-dropdown-placement="bottom" class="text-white bg-success-600 hover:bg-success-700 focus:ring-4 focus:outline-none focus:ring-success-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-success-600 dark:hover:bg-success-700 dark:focus:ring-success-800" type="button">
|
|
Default Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDropPlacement" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPillDropPlacement" data-dropdown-placement="bottom" class="text-success-600 focus:bg-success-600 hover:bg-success-700 border border-success-600 hover:text-white focus:text-white focus:ring-4 focus:outline-none focus:ring-success-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:text-success-400 dark:hover:text-white dark:focus:text-white dark:focus:ring-success-800" type="button">
|
|
Outline Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDropPlacement" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillDropPlacement" data-dropdown-placement="bottom" class="bg-success-100 hover:bg-success-600 focus:ring-4 focus:outline-none hover:text-white text-success-600 focus:ring-success-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-success-600/25 dark:text-success-400 dark:hover:text-white dark:hover:bg-success-700 dark:focus:ring-success-800" type="button">
|
|
Focus Action
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillDropPlacement" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Grouped Dropdown Buttons</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<div class="flex">
|
|
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-s-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
1
|
|
</button>
|
|
<button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
2
|
|
</button>
|
|
<button data-dropdown-toggle="defaultActionPillDropGroup" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-e-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDropGroup" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<div class="flex">
|
|
<button class="hover:bg-warning-600 border hover:text-white border-warning-600 text-warning-600 focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-s-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600 dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
1
|
|
</button>
|
|
<button class="hover:bg-warning-600 border border-x-0 hover:text-white border-warning-600 text-warning-600 focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600 dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
2
|
|
</button>
|
|
<button data-dropdown-toggle="outlineActionPillDropGroup" data-dropdown-placement="bottom" class="hover:bg-warning-600 border hover:text-white border-warning-600 text-warning-600 focus:ring-4 focus:outline-none focus:ring-warning-300 font-medium rounded-e-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-warning-600 dark:hover:bg-warning-700 dark:focus:ring-warning-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDropGroup" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Custom Dropdown</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillDropCustom" data-dropdown-placement="right" class="text-neutral-600 text-xl d-flex items-center justify-center w-10 h-10 ring-4 ring-transparent focus:ring-primary-300 rounded-lg" type="button">
|
|
<iconify-icon icon="entypo:dots-three-vertical" class="menu-icon"></iconify-icon>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillDropCustom" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="outlineActionPillDropCustom" data-dropdown-placement="bottom" class="text-neutral-600 text-xl d-flex items-center justify-center w-10 h-10 ring-4 ring-transparent focus:ring-primary-300 rounded-lg" type="button">
|
|
<iconify-icon icon="ph:dots-three-outline-fill" class="menu-icon"></iconify-icon>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="outlineActionPillDropCustom" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="focusActionPillDropCustom" data-dropdown-placement="bottom" class="text-neutral-600 text-xl d-flex items-center justify-center w-10 h-10 ring-4 ring-transparent focus:ring-primary-300 rounded-lg" type="button">
|
|
<iconify-icon icon="entypo:dots-three-vertical" class="menu-icon"></iconify-icon>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="focusActionPillDropCustom" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="lastActionPillDropCustom" data-dropdown-placement="bottom" class="text-neutral-600 text-xl d-flex items-center justify-center w-10 h-10 ring-4 ring-transparent focus:ring-primary-300 rounded-lg" type="button">
|
|
<iconify-icon icon="ph:dots-three-outline-fill" class="menu-icon"></iconify-icon>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="lastActionPillDropCustom" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">success Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card h-full p-0 border-0 overflow-hidden">
|
|
<div class="card-header border-b border-neutral-200 dark:border-neutral-600 bg-white dark:bg-neutral-700 py-4 px-6">
|
|
<h6 class="text-lg font-semibold mb-0">Dropdown Sizes</h6>
|
|
</div>
|
|
<div class="card-body p-6">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillOneee" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-4 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillOneee" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPilltwoo" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-3 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPilltwoo" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
<!-- Dropdown Start -->
|
|
<div class="">
|
|
<button data-dropdown-toggle="defaultActionPillThreee" data-dropdown-placement="bottom" class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-2 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800" type="button">
|
|
Default Action
|
|
<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
|
</svg>
|
|
</button>
|
|
<!-- Dropdown menu -->
|
|
<div id="defaultActionPillThreee" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-2xl w-44 dark:bg-gray-700">
|
|
<ul class="py-2 text-base text-gray-700 dark:text-gray-200">
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Primary Action</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0)" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Something Else</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Dropdown End -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@endsection
|