Add supporting themes required for Lotusdocs
This commit is contained in:
Abner Coimbre
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://headlessui.dev/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://headlessui.dev/favicon-16x16.png" />
|
||||
<script src="//cdn.tailwindcss.com"></script>
|
||||
|
||||
<title>Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700">
|
||||
<header class="relative z-10 flex items-center justify-between flex-shrink-0 px-4 py-4 bg-gray-700 border-b border-gray-200 sm:px-6 lg:px-8">
|
||||
<a href="/"><svg class="h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 243 42">
|
||||
<path fill="#fff" d="M65.74 13.663c-2.62 0-4.702.958-5.974 2.95V6.499h-4.163V33.32h4.163V23.051c0-3.908 2.159-5.518 4.896-5.518 2.62 0 4.317 1.533 4.317 4.445V33.32h4.162V21.557c0-4.982-3.083-7.894-7.4-7.894zM79.936 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.674-10.116-6.052 0-10.176 4.407-10.176 10.078 0 5.748 4.124 10.078 10.484 10.078 3.778 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.925 1.341-2.66 2.376-4.972 2.376-3.084 0-5.512-1.533-6.168-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.506 0 4.934 1.418 5.512 4.713H79.898zM113.282 14.161v2.72c-1.465-1.992-3.739-3.218-6.746-3.218-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.162V14.16h-4.162zm-6.09 15.71c-3.469 0-6.091-2.567-6.091-6.13 0-3.564 2.622-6.131 6.091-6.131 3.469 0 6.09 2.567 6.09 6.13 0 3.564-2.621 6.132-6.09 6.132zM136.597 6.498v10.384c-1.465-1.993-3.739-3.219-6.746-3.219-5.242 0-9.597 4.368-9.597 10.078 0 5.67 4.355 10.078 9.597 10.078 3.007 0 5.281-1.227 6.746-3.258v2.76h4.163V6.497h-4.163zm-6.09 23.374c-3.469 0-6.09-2.568-6.09-6.131 0-3.564 2.621-6.131 6.09-6.131s6.09 2.567 6.09 6.13c0 3.564-2.621 6.132-6.09 6.132zM144.648 33.32h4.163V5.348h-4.163V33.32zM155.957 25.503h15.341c.077-.536.154-1.15.154-1.724 0-5.518-3.931-10.116-9.675-10.116-6.051 0-10.176 4.407-10.176 10.078 0 5.748 4.125 10.078 10.485 10.078 3.777 0 6.668-1.572 8.441-4.177l-3.43-1.993c-.926 1.341-2.66 2.376-4.973 2.376-3.083 0-5.512-1.533-6.167-4.521zm-.038-3.372c.578-2.873 2.698-4.713 5.82-4.713 2.505 0 4.934 1.418 5.512 4.713h-11.332zM177.137 19.45c0-1.38 1.311-2.032 2.814-2.032 1.581 0 2.93.69 3.623 2.184l3.508-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.279-2.759l-3.584 2.07c1.233 2.758 4.008 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.369-4.98-10.369-8.468zM192.774 19.45c0-1.38 1.31-2.032 2.813-2.032 1.581 0 2.93.69 3.624 2.184l3.507-1.954c-1.349-2.529-3.97-3.985-7.131-3.985-3.931 0-7.053 2.26-7.053 5.863 0 6.859 10.368 4.943 10.368 8.353 0 1.533-1.426 2.146-3.276 2.146-2.12 0-3.662-1.035-4.278-2.759l-3.585 2.07c1.233 2.758 4.009 4.483 7.863 4.483 4.163 0 7.516-2.07 7.516-5.902 0-7.088-10.368-4.98-10.368-8.468zM224.523 28.9c2.889 0 5.027-1.715 5.027-4.53v-8.782h-2.588v8.577c0 1.268-.676 2.219-2.439 2.219s-2.438-.951-2.438-2.22v-8.576h-2.569v8.782c0 2.815 2.138 4.53 5.007 4.53zM232.257 15.588V28.64h2.588V15.588h-2.588z"> </path>
|
||||
<path fill="#fff" fill-rule="evenodd" d="M233.817 9.328H220.42c-2.96 0-5.359 2.385-5.359 5.327v13.318c0 2.942 2.399 5.327 5.359 5.327h13.397c2.959 0 5.358-2.385 5.358-5.327V14.655c0-2.942-2.399-5.327-5.358-5.327zM220.42 6.664c-4.439 0-8.038 3.578-8.038 7.99v13.319c0 4.413 3.599 7.99 8.038 7.99h13.397c4.439 0 8.038-3.577 8.038-7.99V14.655c0-4.413-3.599-7.99-8.038-7.99H220.42z" clip-rule="evenodd"></path>
|
||||
<path fill="#fff" fill-rule="evenodd" d="M220.42 9.328h13.397c2.959 0 5.358 2.385 5.358 5.327v13.318c0 2.942-2.399 5.327-5.358 5.327H220.42c-2.96 0-5.359-2.385-5.359-5.327V14.655c0-2.942 2.399-5.327 5.359-5.327zm-8.038 5.327c0-4.413 3.599-7.99 8.038-7.99h13.397c4.439 0 8.038 3.577 8.038 7.99v13.318c0 4.413-3.599 7.99-8.038 7.99H220.42c-4.439 0-8.038-3.577-8.038-7.99V14.655z" clip-rule="evenodd"></path>
|
||||
<path fill="url(#prefix__paint0_linear)" d="M8.577 26.097l25.779-8.556c-.514-3.201-.88-5.342-1.307-6.974-.457-1.756-.821-2.226-.965-2.39a5.026 5.026 0 00-1.81-1.306c-.2-.086-.762-.284-2.583-.175-1.924.116-4.453.507-8.455 1.137-4.003.63-6.529 1.035-8.395 1.516-1.766.456-2.239.817-2.403.96a4.999 4.999 0 00-1.315 1.8c-.085.198-.285.757-.175 2.568.116 1.913.51 4.426 1.143 8.405.178 1.114.337 2.113.486 3.015z"> </path>
|
||||
<path fill="url(#prefix__paint1_linear)" fill-rule="evenodd" d="M1.47 24.124C.244 16.427-.37 12.58.96 9.49A11.665 11.665 0 014.027 5.29c2.545-2.21 6.416-2.82 14.16-4.039C25.93.031 29.8-.578 32.907.743a11.729 11.729 0 014.225 3.05c2.223 2.53 2.836 6.38 4.063 14.076 1.226 7.698 1.84 11.546.511 14.636a11.666 11.666 0 01-3.069 4.199c-2.545 2.21-6.416 2.82-14.159 4.039-7.743 1.219-11.614 1.828-14.722.508a11.728 11.728 0 01-4.224-3.05C3.31 35.67 2.697 31.82 1.47 24.123zm13.657 13.668c2.074-.125 4.743-.54 8.697-1.163 3.953-.622 6.62-1.047 8.632-1.566 1.949-.502 2.846-.992 3.426-1.496a7.5 7.5 0 001.973-2.7c.302-.703.494-1.703.372-3.7-.125-2.063-.543-4.716-1.17-8.646-.625-3.93-1.053-6.582-1.574-8.582-.506-1.937-.999-2.83-1.505-3.405a7.54 7.54 0 00-2.716-1.961c-.707-.301-1.713-.492-3.723-.371-2.074.125-4.743.54-8.697 1.163-3.953.622-6.62 1.047-8.632 1.565-1.949.503-2.846.993-3.426 1.497a7.5 7.5 0 00-1.972 2.699c-.303.704-.495 1.704-.373 3.701.125 2.062.543 4.716 1.17 8.646.625 3.93 1.053 6.582 1.574 8.581.506 1.938 1 2.83 1.505 3.406a7.54 7.54 0 002.716 1.961c.707.3 1.713.492 3.723.37z" clip-rule="evenodd"></path>
|
||||
<defs>
|
||||
<linearGradient id="prefix__paint0_linear" x1="16.759" x2="23.386" y1="0" y2="41.662"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#66E3FF"></stop>
|
||||
<stop offset="1" stop-color="#7064F9"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="prefix__paint1_linear" x1="16.759" x2="23.386" y1="0" y2="41.662"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#66E3FF"></stop>
|
||||
<stop offset="1" stop-color="#7064F9"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg></a></header>
|
||||
<main class="flex-1 overflow-auto bg-gray-50">
|
||||
<div class="container my-24">
|
||||
<div class="prose">
|
||||
<h2>Examples</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">dialog</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/dialog/dialog.html">dialog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">disclosure</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/disclosure/disclosure.html">disclosure</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">listbox</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="demo/listbox">listbox with
|
||||
pure tailwind</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">menu</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/menu/menu.html">menu</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">popover</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/popover/popover.html">popover</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">radio group</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/radio-group/radio-group.html">radio group</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">switch</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/switch/switch.html">switch with pure
|
||||
tailwind</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="text-xl capitalize">tabs</h3>
|
||||
<ul>
|
||||
<li><a class="capitalize" href="/tabs/tabs.html">tabs with pure
|
||||
tailwind</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://headlessui.dev/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://headlessui.dev/favicon-16x16.png" />
|
||||
|
||||
<script src="/packages/intersect/dist/cdn.js" defer></script>
|
||||
<script src="/packages/morph/dist/cdn.js" defer></script>
|
||||
<script src="/packages/persist/dist/cdn.js"></script>
|
||||
<script src="/packages/focus/dist/cdn.js"></script>
|
||||
<script src="/packages/mask/dist/cdn.js"></script>
|
||||
<script src="/packages/ui/dist/cdn.js" defer></script>
|
||||
<script src="/packages/alpinejs/dist/cdn.js" defer></script>
|
||||
<script src="//cdn.tailwindcss.com"></script>
|
||||
|
||||
<title>Listbox</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700">
|
||||
<div
|
||||
x-data="{ selected: undefined, people: [
|
||||
{ id: 1, name: 'Wade Cooper' },
|
||||
{ id: 2, name: 'Arlene Mccoy' },
|
||||
{ id: 3, name: 'Devon Webb' },
|
||||
{ id: 4, name: 'Tom Cook' },
|
||||
{ id: 5, name: 'Tanya Fox', disabled: true },
|
||||
{ id: 6, name: 'Hellen Schmidt' },
|
||||
{ id: 7, name: 'Caroline Schultz' },
|
||||
{ id: 8, name: 'Mason Heaney' },
|
||||
{ id: 9, name: 'Claudie Smitham' },
|
||||
{ id: 10, name: 'Emil Schaefer' },
|
||||
]}"
|
||||
class="flex justify-center w-screen h-full p-12 bg-gray-50"
|
||||
>
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<div class="flex justify-between mb-8">
|
||||
<button class="underline" @click="selected = people[1]">Change value</button>
|
||||
|
||||
<button class="underline" @click="
|
||||
people.sort((a, b) => a.name > b.name ? 1 : -1)
|
||||
">Reorder</button>
|
||||
|
||||
<button class="underline" @click="
|
||||
people = people.filter(i => i.name !== 'Arlene Mccoy')
|
||||
">Destroy item</button>
|
||||
</div>
|
||||
|
||||
<div x-listbox name="something" x-model="selected" class="space-y-1">
|
||||
<label x-listbox:label class="block text-sm font-medium leading-5 text-gray-700 mb-1">
|
||||
Assigned to
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<button x-listbox:button class="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<span class="block truncate" x-text="selected ? selected.name : 'Select Person'"></span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="absolute w-full mt-1 bg-white rounded-md shadow-lg">
|
||||
<ul x-listbox:options class="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<template x-for="person in people" :key="person.id">
|
||||
<li
|
||||
x-listbox:option :value="person"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:disabled="person.disabled"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900', person.disabled && 'bg-gray-50 text-gray-300'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'" x-text="person.name"></span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://headlessui.dev/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://headlessui.dev/favicon-16x16.png" />
|
||||
|
||||
<script src="/packages/intersect/dist/cdn.js" defer></script>
|
||||
<script src="/packages/morph/dist/cdn.js" defer></script>
|
||||
<script src="/packages/persist/dist/cdn.js"></script>
|
||||
<script src="/packages/focus/dist/cdn.js"></script>
|
||||
<script src="/packages/mask/dist/cdn.js"></script>
|
||||
<script src="/packages/ui/dist/cdn.js" defer></script>
|
||||
<script src="/packages/alpinejs/dist/cdn.js" defer></script>
|
||||
<script src="//cdn.tailwindcss.com"></script>
|
||||
|
||||
<title>Listbox</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700">
|
||||
<div x-data="{ selected: 'Wade Cooper' }" class="flex justify-center w-screen h-full p-12 bg-gray-50">
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<div class="flex justify-between mb-8">
|
||||
<button class="underline" @click="selected = Arlene Mccoy">Change value</button>
|
||||
</div>
|
||||
|
||||
<div x-listbox name="something" x-model="selected" class="space-y-1">
|
||||
<label x-listbox:label class="block text-sm font-medium leading-5 text-gray-700 mb-1">
|
||||
Assigned to
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<button x-listbox:button class="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<span class="block truncate" x-text="selected"></span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="absolute w-full mt-1 bg-white rounded-md shadow-lg">
|
||||
<ul x-listbox:options class="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<li
|
||||
x-listbox:option value="Wade Cooper"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Wade Cooper</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Arlene Mccoy"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Arlene Mccoy</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Devon Webb"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Devon Webb</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Tom Cook"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Tom Cook</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Tanya Fox"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Tanya Fox</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Hellen Schmidt"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Hellen Schmidt</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Caroline Schultz"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Caroline Schultz</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Mason Heaney"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Mason Heaney</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Claudie Smitham"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Claudie Smitham</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
x-listbox:option value="Emil Schaefer"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'">Emil Schaefer</span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://headlessui.dev/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://headlessui.dev/favicon-16x16.png" />
|
||||
|
||||
<script src="/packages/intersect/dist/cdn.js" defer></script>
|
||||
<script src="/packages/morph/dist/cdn.js" defer></script>
|
||||
<script src="/packages/persist/dist/cdn.js"></script>
|
||||
<script src="/packages/focus/dist/cdn.js"></script>
|
||||
<script src="/packages/mask/dist/cdn.js"></script>
|
||||
<script src="/packages/ui/dist/cdn.js" defer></script>
|
||||
<script src="/packages/alpinejs/dist/cdn.js" defer></script>
|
||||
<script src="//cdn.tailwindcss.com"></script>
|
||||
|
||||
<title>Listbox</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex flex-col h-screen overflow-hidden font-sans antialiased text-gray-900 bg-gray-700">
|
||||
<div
|
||||
x-data="{ selected: [], people: [
|
||||
{ id: 1, name: 'Wade Cooper' },
|
||||
{ id: 2, name: 'Arlene Mccoy' },
|
||||
{ id: 3, name: 'Devon Webb' },
|
||||
{ id: 4, name: 'Tom Cook' },
|
||||
{ id: 5, name: 'Tanya Fox', disabled: true },
|
||||
{ id: 6, name: 'Hellen Schmidt' },
|
||||
{ id: 7, name: 'Caroline Schultz' },
|
||||
{ id: 8, name: 'Mason Heaney' },
|
||||
{ id: 9, name: 'Claudie Smitham' },
|
||||
{ id: 10, name: 'Emil Schaefer' },
|
||||
]}"
|
||||
class="flex justify-center w-screen h-full p-12 bg-gray-50"
|
||||
>
|
||||
<div class="w-full max-w-xs mx-auto">
|
||||
<div class="flex justify-between mb-8">
|
||||
<button class="underline" @click="selected.push(people[1])">Change value</button>
|
||||
|
||||
<button class="underline" @click="
|
||||
people.sort((a, b) => a.name > b.name ? 1 : -1)
|
||||
">Reorder</button>
|
||||
|
||||
<button class="underline" @click="
|
||||
people = people.filter(i => i.name !== 'Arlene Mccoy')
|
||||
">Destroy item</button>
|
||||
</div>
|
||||
|
||||
<div x-listbox name="people" x-model="selected" multiple class="space-y-1">
|
||||
<label x-listbox:label class="block text-sm font-medium leading-5 text-gray-700 mb-1">
|
||||
Assigned to
|
||||
</label>
|
||||
|
||||
<div class="relative">
|
||||
<span class="inline-block w-full rounded-md shadow-sm">
|
||||
<button x-listbox:button class="relative w-full py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md cursor-default focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
|
||||
<span class="block truncate" x-text="selected.length > 0 ? selected.map(i => i.name).join(', ') : 'Select Person'"></span>
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<svg class="w-5 h-5 text-gray-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
|
||||
<path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="absolute w-full mt-1 bg-white rounded-md shadow-lg">
|
||||
<ul x-listbox:options class="py-1 overflow-auto text-base leading-6 rounded-md shadow-xs max-h-60 focus:outline-none sm:text-sm sm:leading-5">
|
||||
<template x-for="person in people" :key="person.id">
|
||||
<li
|
||||
x-listbox:option :value="person"
|
||||
class="relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none"
|
||||
:disabled="person.disabled"
|
||||
:class="[$listboxOption.isActive ? 'text-white bg-indigo-600' : 'text-gray-900', person.disabled && 'bg-gray-50 text-gray-300'].filter(Boolean)"
|
||||
>
|
||||
<span class="block truncate" :class="$listboxOption.isSelected ? 'font-semibold' : 'font-normal'" x-text="person.name"></span>
|
||||
|
||||
<span
|
||||
x-show="$listboxOption.isSelected"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-4"
|
||||
:class="$listboxOption.isActive ? 'text-white' : 'text-indigo-600'"
|
||||
>
|
||||
<svg class="w-5 h-5" viewbox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user