如何使用Alpine toggle切换内容?
How to use Alpine toggle to switch content?
我正在使用顺风和 AlpineJS。我设计了波纹管切换开关,但我似乎无法弄清楚如何在不同内容之间切换。
任何帮助将不胜感激。
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-center items-center mt-8" x-data="{toggle: '0'}">
<span class=" block mr-3 text-xs">Residential</span>
<div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
:class="[toggle === '1' ? 'bg-black' : 'bg-black']">
<label for="toggle"
class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
:class="[toggle === '1' ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']"></label>
<input type="checkbox" id="toggle" name="toggle"
class="appearance-none w-full h-full active:outline-none focus:outline-none"
@click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
</div>
<span class=" block ml-3 text-xs">Business</span>
</div>
<div id="toggleOff">This content shows on page load and toggle is off, otherwise it is hidden</div>
<div id="toggleOn">This content shows when the toggle is clicked, otherwise it is hidden</div>
根据 alpine.js 文档,您可以对 show/hide 元素使用内置指令并传递输入值。
所以基本上,x-bind
指令 (more here) 允许您将输入值绑定到变量。您可以将其添加到您的复选框并作为变量集 toggle。
还有 x-show
指令 (more here),它只是将 display 属性 设置为 none 当给定的指令表达式为真时。
问题是 x-data
范围。如果要使用此指令中声明的变量,则元素必须嵌套在带有 x-data
指令的元素中。
总的来说,您的代码可能如下所示:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet" />
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{toggle: false}">
<div class="flex justify-center items-center mt-8">
<span class=" block mr-3 text-xs">Residential</span>
<div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
:class="[toggle ? 'bg-black' : 'bg-black']">
<label for="toggle"
class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
:class="[toggle ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']">
</label>
<input type="checkbox"
id="toggle"
name="toggle"
x-model="toggle"
class="appearance-none w-full h-full active:outline-none focus:outline-none" />
</div>
<span class=" block ml-3 text-xs">Business</span>
</div>
<div id="toggleOff"
x-show="!toggle">
This content shows on page load and toggle is off, otherwise it is hidden
</div>
<div id="toggleOn"
x-show="toggle">
This content shows when the toggle is clicked, otherwise it is hidden
</div>
</div>
我正在使用顺风和 AlpineJS。我设计了波纹管切换开关,但我似乎无法弄清楚如何在不同内容之间切换。
任何帮助将不胜感激。
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex justify-center items-center mt-8" x-data="{toggle: '0'}">
<span class=" block mr-3 text-xs">Residential</span>
<div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
:class="[toggle === '1' ? 'bg-black' : 'bg-black']">
<label for="toggle"
class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
:class="[toggle === '1' ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']"></label>
<input type="checkbox" id="toggle" name="toggle"
class="appearance-none w-full h-full active:outline-none focus:outline-none"
@click="toggle === '0' ? toggle = '1' : toggle = '0'"/>
</div>
<span class=" block ml-3 text-xs">Business</span>
</div>
<div id="toggleOff">This content shows on page load and toggle is off, otherwise it is hidden</div>
<div id="toggleOn">This content shows when the toggle is clicked, otherwise it is hidden</div>
根据 alpine.js 文档,您可以对 show/hide 元素使用内置指令并传递输入值。
所以基本上,x-bind
指令 (more here) 允许您将输入值绑定到变量。您可以将其添加到您的复选框并作为变量集 toggle。
还有 x-show
指令 (more here),它只是将 display 属性 设置为 none 当给定的指令表达式为真时。
问题是 x-data
范围。如果要使用此指令中声明的变量,则元素必须嵌套在带有 x-data
指令的元素中。
总的来说,您的代码可能如下所示:
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet" />
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{toggle: false}">
<div class="flex justify-center items-center mt-8">
<span class=" block mr-3 text-xs">Residential</span>
<div class="relative rounded-full w-12 h-6 transition duration-200 ease-linear"
:class="[toggle ? 'bg-black' : 'bg-black']">
<label for="toggle"
class="absolute drop-shadow-lg left-1 bg-white mt-[2px] w-5 h-5 rounded-full transition transform duration-100 ease-linear cursor-pointer"
:class="[toggle ? 'translate-x-full border-black' : 'translate-x-0 border-gray-400']">
</label>
<input type="checkbox"
id="toggle"
name="toggle"
x-model="toggle"
class="appearance-none w-full h-full active:outline-none focus:outline-none" />
</div>
<span class=" block ml-3 text-xs">Business</span>
</div>
<div id="toggleOff"
x-show="!toggle">
This content shows on page load and toggle is off, otherwise it is hidden
</div>
<div id="toggleOn"
x-show="toggle">
This content shows when the toggle is clicked, otherwise it is hidden
</div>
</div>