Skip to content

Commit

Permalink
Use Stimulus 2 target syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@excid3
excid3 committed Apr 23, 2021
1 parent cb2c920 commit dafb5bc
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@
data-slideover-active-target="#slideover-target">
<!-- begin sidebar/slideover -->
<div id="sidebar-mobile">
<div data-target="slideover.overlay" class="fixed inset-0 flex z-40 transition-opacity ease-linear duration-300 opacity-0 hidden">
<div data-slideover-target="overlay" class="fixed inset-0 flex z-40 transition-opacity ease-linear duration-300 opacity-0 hidden">
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<div id="slideover-target" data-target="slideover.menu" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800 transition ease-in-out duration-300 transform -translate-x-full hidden">
<div id="slideover-target" data-slideover-target="menu" class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800 transition ease-in-out duration-300 transform -translate-x-full hidden">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button data-action="slideover#toggle" class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
Expand Down Expand Up @@ -83,7 +83,7 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Dropdowns</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="text-white fill-current h-4 w-4"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path></svg>
</span>
</div>
<div data-target="dropdown.menu" class="absolute right-0 mt-2 transform transition hidden opacity-0 scale-95">
<div data-dropdown-target="menu" class="absolute right-0 mt-2 transform transition hidden opacity-0 scale-95">
<div class="bg-white shadow rounded border overflow-hidden w-32">
<a href="#" class='no-underline block pl-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-no-wrap'>Account</a>
<a href="#" class='no-underline block pl-8 py-3 text-gray-900 bg-white hover:bg-gray-300 whitespace-no-wrap'>Billing</a>
Expand Down Expand Up @@ -111,7 +111,7 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Modals</h2>
</a>

<!-- Modal Container -->
<div data-target="modal.container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<div data-modal-target="container" data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
<!-- Modal Inner Container -->
<div class="max-h-screen w-full max-w-lg relative">
<!-- Modal Card -->
Expand All @@ -135,29 +135,29 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs</h2>

<div data-controller="tabs" data-tabs-active-tab="-mb-px border-l border-t border-r rounded-t">
<ul class="list-reset flex border-b">
<li class="-mb-px mr-1" data-target="tabs.tab" data-action="click->tabs#change">
<li class="-mb-px mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Active</a>
</li>
<li class="mr-1" data-target="tabs.tab" data-action="click->tabs#change">
<li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1" data-target="tabs.tab" data-action="click->tabs#change">
<li class="mr-1" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1">
<a class="bg-white inline-block py-2 px-4 text-gray-500 font-semibold no-underline" href="#">Tab</a>
</li>
</ul>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
Tab panel 1
</div>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
Tab panel 2
</div>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
<iframe width="560" height="315" src="https://www.youtube.com/embed/0aTRN9CSCY0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Expand All @@ -172,29 +172,29 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Tabs with Anchors</h2>

<div data-controller="tabs" data-tabs-use-anchor="true" data-tabs-active-tab="-mb-px border-l border-t border-r rounded-t">
<ul class="list-reset flex border-b">
<li class="-mb-px mr-1" id="first" data-target="tabs.tab" data-action="click->tabs#change">
<li class="-mb-px mr-1" id="first" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Active</a>
</li>
<li class="mr-1" id="second" data-target="tabs.tab" data-action="click->tabs#change">
<li class="mr-1" id="second" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1" id="third" data-target="tabs.tab" data-action="click->tabs#change">
<li class="mr-1" id="third" data-tabs-target="tab" data-action="click->tabs#change">
<a class="bg-white inline-block py-2 px-4 text-blue-600 hover:text-blue-700 font-semibold no-underline" href="#">Tab</a>
</li>
<li class="mr-1" id="fourth">
<a class="bg-white inline-block py-2 px-4 text-gray-500 font-semibold no-underline" href="#">Tab</a>
</li>
</ul>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
Tab panel 1
</div>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
Tab panel 2
</div>

<div class="hidden py-4 px-4 border-l border-b border-r" data-target="tabs.panel">
<div class="hidden py-4 px-4 border-l border-b border-r" data-tabs-target="panel">
<iframe width="560" height="315" src="https://www.youtube.com/embed/0aTRN9CSCY0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Expand Down

0 comments on commit dafb5bc

Please sign in to comment.