Skip to content

Commit

Permalink
Update docs example
Browse files Browse the repository at this point in the history
  • Loading branch information
@excid3
excid3 committed Jan 15, 2022
1 parent ca60216 commit e606add
Showing 1 changed file with 102 additions and 57 deletions.
159 changes: 102 additions & 57 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,36 @@
window.esmsInitOptions = { enable: ['css-modules', 'json-modules'] }
</script>
<script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>

<script type="importmap">
{
"imports": {
"@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
}
}
</script>
<!--
Use the following importmap for local package with "npx serve"
"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
-->

<script type="module">
import { Application } from "@hotwired/stimulus";
import { Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components";

(() => {
const application = Application.start();
application.register('alert', Alert);
application.register('color-preview', ColorPreview);
application.register('dropdown', Dropdown);
application.register('modal', Modal);
application.register('popover', Popover);
application.register('slideover', Slideover);
application.register('tabs', Tabs);
application.register('toggle', Toggle);
})()
</script>
</head>
<body>
<div class="container mx-auto p-8"
Expand Down Expand Up @@ -262,77 +292,92 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</
</div>

<!-- Alert -->
<div class="fixed inset-x-0 top-0 flex items-end justify-right px-4 py-6 sm:p-6 justify-end z-30 pointer-events-none">
<div data-controller="alert" class="max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
We have alerts too!
</p>
<div class="fixed top-0 inset-x-0 m-4">
<div class="flex flex-col items-end space-y-4">
<div data-controller="alert" data-alert-show-class="translate-x-0 opacity-100" data-alert-hide-class="translate-x-full opacity-0" class="ease-in-out duration-500 opacity-0 max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
We have alerts too!
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>

<!-- Alert that auto-dismisses-->
<div data-controller="alert" data-alert-dismiss-after-value="3000" data-alert-show-class="translate-x-0 opacity-100" data-alert-hide-class="translate-x-full opacity-0" class="ease-in-out duration-500 opacity-0 max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
Auto dismisses after 3 seconds.
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Alert that auto-dismisses-->
<div class="fixed inset-x-0 top-20 flex items-end justify-right px-4 py-6 sm:p-6 justify-end z-30 pointer-events-none">
<div data-controller="alert" data-alert-dismiss-after-value="5000" class="max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-gray-800 text-white pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
Auto dismisses after 5 seconds.
</p>
<!-- Alert on bottom of screen
<div class="fixed inset-x-0 bottom-0 m-4">
<div class="flex flex-col space-y-4 ">
<div data-controller="alert" data-alert-show-class="translate-x-0 opacity-100" data-alert-hide-class="-translate-x-full opacity-0" class="ease-in-out duration-500 opacity-0 max-w-sm w-full shadow-lg rounded px-3 py-2 rounded relative bg-white text-gray-800 border border-gray-100 shadow-lg pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
Draft saved successfully
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
<div data-controller="alert" data-alert-show-class="translate-x-0 opacity-100" data-alert-hide-class="-translate-x-full opacity-0" class="ease-in-out duration-500 opacity-0 max-w-sm w-full shadow-lg rounded px-3 py-2 rounded relative bg-white text-gray-800 border border-gray-100 shadow-lg pointer-events-auto">
<div class="p-2">
<div class="flex items-start">
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm leading-5 font-medium">
Second alert
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button data-action="alert#close" class="inline-flex text-gray-400 focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

<script type="importmap">
{
"imports": {
"@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
"tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js"
}
}
</script>
<!--
Use the following importmap for local package with "npx serve"
"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
-->

<script type="module">
import { Application } from "@hotwired/stimulus";
import { Alert, ColorPreview, Dropdown, Modal, Popover, Slideover, Tabs, Toggle } from "tailwindcss-stimulus-components";

(() => {
const application = Application.start();
application.register('alert', Alert);
application.register('color-preview', ColorPreview);
application.register('dropdown', Dropdown);
application.register('modal', Modal);
application.register('popover', Popover);
application.register('slideover', Slideover);
application.register('tabs', Tabs);
application.register('toggle', Toggle);
})()
</script>
</body>
</html>

0 comments on commit e606add

Please sign in to comment.