TailwindCSS 从零开始 - 价目表卡片实战 - 进阶卡片样式

card

前篇已经将基本的卡片样式完成，要继续完成几个互动效果，会有以下内容：

  1. 滑鼠经过卡片会有放大效果。
  2. RWD 效果，PC 版卡片为三栏。
  3. 透过 JS 回圈方式产生新的卡片。

增加 hover 的互动效果

在卡片外层加上以下 class，卡片的程序码可以参考上一篇内容。
因为我要在滑鼠过时卡片有放大效果，所以要使用 hover，并且使用 transition 属性底下的 scale 缩放效果，这边选择 110，也就是 110%，并且加上效果时间，这样就完成了。

 <div class="hover:scale-110 duration-300 ">
 ...card code...
 </div>

原本样式：可以看到左右有明显间距。

before hover

滑鼠经过後：间距变小了。

hover card

RWD 三栏效果

TailwindCSS 是单一断点的手机优先 CSS 框架，所以一开始建构就是手机版，而今天要在 PC 版本实呈现三栏的内容，这时就要在卡片的最外层加上 lg 的尺寸来定义各种 RWD 的效果样式。

也就是这边要往後加上 PC 版样式的内容。

<div class="mt-8">
... card code...
</div>

加上以下 class，前面都要加上 lg 的尺寸样式喔！

   <div class="mt-8 lg:grid lg:grid-cols-3 lg:justify-evenly lg:gap-8 lg:w-[1280px] lg:mx-auto">
  • grid：值得一提的是这个 class，也就是使用网格系统，透过官网介绍可以透过网格系统的方式直接定义样式，省去计算的时间。这边是使用 Grid Template Columns 的样式去定义三栏效果。

用法很简单，官方文件示范如下：

grid

使用这个语法 grid-cols-{n}，放入想要分几栏即可，非常简单且易懂。

前面要先定义 grid 的样式才能使用。

  • justify-evenly：让卡片等距。
  • gap-8：间隔有 2rem。

gap

最後限制宽度为 1280px，并且置中对齐。

透过 JS 回圈来跑出复数卡片

这次透过一个简单的回圈方式来渲染可用内容的列表内容，因正式卡片的内容可能数量有多有少，如果少的话做苦工就算了，但如果资料量很大，就不是手工可以解决的事情。

引入 js 档案

这应该不用在赘述。

<body>
   ...code...
   <script src="js/all.js"></script>
</body>

js

建立一个函式，并且先预设呼叫有三个参数，分别是列表一到三，

function renderList() {
 
}

renderList("list1");
renderList("list2");
renderList("list3");

此时也在 template 的 ul 上各加上 id，分别为 list1， list2 和 list3。

html

<ul id='list1' class="...">
...
</ul>

再把要执行的内容写在函式内

  1. 因执行函式已经有指定其参数，而这个参数为 id 的值，故透过 getElementById 的方式接收参数。
  2. 再用一个变数来存模板语法，就是把 li 的内容复制到这里来。
  3. 最後再用回圈组字串。
function renderList(id) {
  const listUl = document.getElementById(id);
  const templateLi = `
      <li class="flex items-center mt-4">
        <i class="far fa-check-circle text-green-400"></i>
         <span
             class=" pl-3 text-gray-800 tracking-wide">免费使用</span>
      </li>
  `;

  let str = "";
  for (let i = 0; i < 5; i++) {
    str = str + templateLi;
  }
  listUl.innerHTML = str;
}

renderList("list1");
renderList("list2");
renderList("list3");

在配置档加上 js 路径

因为有写模板语法在 js 档案里，所以要记得加上 js 档案在配置档。

tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./**/*.html", "./src/**/*.css", "./js/**/*.js"], //要加上 JS 的路径
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

render

这样就可以跑出列表了。

加入判断微调画面

但有发现背景为紫色的卡片中的列表文字是黑色的，这样看不清楚，所以要加一个判断让其变成白色，可以加在模板语法上方。

function renderList(id) {
  const listUl = document.getElementById(id);
  let originColor = "text-green-400";
  if (id === "list2") {
    originColor = "text-white";
  }
  const templateLi = `
      <li class="flex items-center mt-4">
        <i class="far fa-check-circle ${originColor}"></i>
         <span
             class=" pl-3 ${originColor} tracking-wide">免费使用</span>
      </li>
  `;

  let str = "";
  for (let i = 0; i < 5; i++) {
    str = str + templateLi;
  }
  listUl.innerHTML = str;
}
  • 设定一个变数存取原本的颜色。
  • 在写入判断当 id 等於 list2 的时候，颜色就改变为白色。
  • 透过模板语法中带变数的方式 ${param} 的方式带入原本颜色的位置。

这样就完成透过判断来改变列表内容的文字罗！

js


<<:  [Day22] Vue 3 单元测试 (Unit Testing) - Testing Vuex

>>:  中阶魔法 - 提升 Hoisting

Angular 深入浅出三十天：表单与测试 Day30 - 表单原理

经过前面二十九天的的练习与学习，相信大家应该在表单的实作上都熟悉了不少，只要不是太复杂、太特别的表...

Day 29 | Keep Going 13 - Github page

嘿不知不觉的就来到倒数第二篇了呢！网页也写完了呢！是不是要发布了哇！ 今天就来说说 Github p...

JS 02 - 资料型别

大家好！ 昨天的小测验，有没有全部答对呢？ 我们进入今天的主题吧！ 建立资料 昨天我们提到的 字面建...

Day 25 [Python ML、资料清理] 处理遗失值

一开始要先看资料 # modules we'll use import pandas as pd i...

DAY16-Style Components

前言： 今天我们要来介绍React里很强大的一个工具！没错就是Style Components！废...