tailwind-css - 如何使用 Alpine toggle 切换内容?
问题描述
我正在使用顺风和 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 文档,您可以使用内置指令来显示/隐藏元素并传递输入值。
所以基本上,x-bind
指令(更多here)允许您将输入值绑定到变量。您可以将其添加到您的复选框并作为变量集切换。还有一个x-show
指令(更多here ),当给定指令表达式为真时,它只是将显示属性设置为无。
问题是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>
推荐阅读
- php - 如何在 Blade 视图中实现 Laravel 搜索系统
- python - Python pandas 保存多个不同名称的 CSV
- css - 如何在div顶部的中间插入一个浮动圆圈?
- vb.net - 使用字符串查找变量
- python - Pythonic 多维矩阵乘法
- java - 如何更改 ListView 中每个项目的背景颜色?
- azure-cosmosdb - Cosmos DB 中的 Dynamics 365 虚拟实体
- powershell - 在 Powershell 中从字符串中剥离数据
- sql-server - SQL Server 2016 中的外键约束是否可以涉及确定性加密列
- python-3.x - Openpyxl:如何使用可变行合并单元格