构建Web应用程序时,切换元素是您可能遇到的关键功能之一,并且可能需要在项目中实现。
有多种方式可以切换元素。在本节中,我们将在多遇到的组件上工作。那就是我们将能够切换结构中多个元素的设计。
不会浪费太多时间,让我们开始
了解任务
我们将构建一个多障碍组件,我们可以切换或选择多个元素。对于此练习,我们将使用parwindcss和一小部分JavaScript。这个会话将非常简单明了。
代码结构
我们的代码根代码仍然与我们所有教程中的代码相同。
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!--
Here Goes the content
-->
</div>
</div>
</body>
我们将构建此组件,将所有不同的类别都放在一个大容器中,并且将从父容器中添加一般的样式,如下所示
<div>
<!-- Header -->
<div class="text-center mb-5">
<h2 class="text-2xl mb-3">Browse by Interest</h2>
<p class="w-[80%] sm:w-[50%] text-sm mx-auto">Select some interest to help us personalize your experience on Edmondo</p>
</div>
<!-- Categories -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 mb-10 [&>*]:px-4 [&>*]:h-14 [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:bg-[#16181f] [&>*]:border-2 [&>*]:border-[#171920] [&>*]:text-xs [&>*]:sm:text-sm [&>*]:text-slate-400 [&>*]:rounded-sm [&>*]:cursor-pointer [&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100">
<div class="element">
<h2>Math</h2>
</div>
<div class="element">
<h2>Science</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>English</h2>
</div>
<div class="element">
<h2>World Languages</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>Health & PE</h2>
</div>
<div class="element">
<h2>Special Education</h2>
</div>
<div class="element">
<h2>Development</h2>
</div>
<div class="element">
<h2>Technology</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>Social Studies</h2>
</div>
</div>
在此设计的标题上,我们将一些基本风格的字体大小应用于text-2xl
的最高标题,而text-sm
的下标
大多数样式都应用于不同类别。要将一般样式应用于父容器的不同类别,我们使用了 [&>*] tailwindcss的属性。
属性 [&>*] 仅表示每个孩子,这允许我们将相同的样式特性应用于所有直系亲属。
对于每个不同的类别,我们给了它一个px-4
的填充线和H-14的高度。我们给他们每个人都展示了Flex,并使用flex items-center justify-center
将其内容集中。我们还给了他们BG的背景色 - [#16181F],分别是border-2 border-[#171920] rounded-sm
的边界宽度,边界 - 划线和颜色。这些类别中的每一个都有[&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100
相信我,这几乎就是样式,以及我们组件的UI。
整个代码看起来像这样
<body class="bg-[#22242c] flex justify-center items-center min-h-screen">
<!-- First layer -->
<div class="bg-[#1b1d25] w-full sm:max-w-3xl py-9 px-9 text-slate-200 relative">
<!-- Close icon -->
<div class="absolute top-2 right-2 w-10 h-10 rounded-full text-2xl bg-[#16181f] text-slate-400 flex items-center justify-center cursor-pointer hover:text-slate-100 ">
×
</div>
<div>
<!-- Header -->
<div class="text-center mb-5">
<h2 class="text-2xl mb-3">Browse by Interest</h2>
<p class="w-[80%] sm:w-[50%] text-sm mx-auto">Select some interest to help us personalize your experience on Edmondo</p>
</div>
<!-- Categories container -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 mb-10 [&>*]:px-4 [&>*]:h-14 [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:bg-[#16181f] [&>*]:border-2 [&>*]:border-[#171920] [&>*]:text-xs [&>*]:sm:text-sm [&>*]:text-slate-400 [&>*]:rounded-sm [&>*]:cursor-pointer [&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100">
<div class="element">
<h2>Math</h2>
</div>
<div class="element">
<h2>Science</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>English</h2>
</div>
<div class="element">
<h2>World Languages</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>Health & PE</h2>
</div>
<div class="element">
<h2>Special Education</h2>
</div>
<div class="element">
<h2>Development</h2>
</div>
<div class="element">
<h2>Technology</h2>
</div>
<div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
<h2>Social Studies</h2>
</div>
</div>
<!-- Navigation Buttons -->
<div class="flex gap-5 justify-center [&>*]:px-6 [&>*]:py-2 [&>*]:border [&>*]:rounded-lg [&>*]:cursor-pointer">
<div class="border-slate-900 hover:bg-slate-800 hover:text-white">
<h2>Skip</h2>
</div>
<div class="border-rose-500 bg-rose-500 text-white hover:text-rose-500 hover:bg-transparent">
<h2>Save</h2>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
值得一提的是,我们给了每个类别一个自定义 class =“ element”,这是我们将用来将切换效果添加到不同类别的类。
JavaScript
单击时,此处的JavaScript主要是为不同类别添加切换效果。
const elem = document.querySelectorAll(".element");
console.log(elem);
elem.forEach(item => {
item.addEventListener("click", ()=> {
item.classList.toggle("shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)]");
})
})
我们首先使用 document.queryselectorall(“。element”)方法选择所有具有class =“ element”的节点元素,然后将它们存储在常数 elem中。强>
elem现在是所有不同类别的nodearray。
使用此数组中的每个类别中的每个类别中的foreach方法,我们对此进行了单击事件,因此单击时,将shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)]
切换。
,这是在这个教程会话中。
结论
我们刚刚建立了一个帮助中心组件ðÖ。我敢打赌,您意识到这比我们一开始就想象的很容易ð。
上找到代码如果您能够完成本教程,请不要与我分享,我很高兴看到您在工作中添加的任何其他组件和样式
如果您有任何担忧或建议,请不要犹豫! ð
见ya! ð