提姆寫程式

0%

TailwindCSS 筆記 - 價目表卡片實戰 - 進階卡片樣式

發表於 分類於 Disqus：
卡片互動效果、RWD 顯示、使用 JavaScript 迴圈產生列表內容

card

前篇已經將基本的卡片樣式完成，要繼續完成幾個互動效果，會有以下內容：

  1. 滑鼠經過卡片會有放大效果。
  2. RWD 效果，PC 版卡片為三欄。
  3. 透過 JS 迴圈方式產生新的卡片。

增加 hover 的互動效果

在卡片外層加上以下 class，卡片的程式碼可以參考上一篇內容。
因為我要在滑鼠過時卡片有放大效果，所以要使用 hover，並且使用 transition 屬性底下的 scale 縮放效果，這邊選擇 110，也就是 110%，並且加上效果時間，這樣就完成了。

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

原本樣式：可以看到左右有明顯間距。

before hover

滑鼠經過後：間距變小了。

hover card

RWD 三欄效果

TailwindCSS 是單一斷點的手機優先 CSS 框架，所以一開始建構就是手機版，而今天要在 PC 版本實呈現三欄的內容，這時就要在卡片的最外層加上 lg 的尺寸來定義各種 RWD 的效果樣式。

也就是這邊要往後加上 PC 版樣式的內容。

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

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

1
2
3
<div
  class="mt-8 lg:grid lg:grid-cols-3 lg:justify-evenly lg:gap-8 lg:w-[1280px] lg:mx-auto"
></div>
  • grid：值得一提的是這個 class，也就是使用網格系統，透過官網介紹可以透過網格系統的方式直接定義樣式，省去計算的時間。這邊是使用 Grid Template Columns 的樣式去定義三欄效果。

用法很簡單，官方文件示範如下：

grid

使用這個語法 grid-cols-{n}，放入想要分幾欄即可，非常簡單且易懂。

前面要先定義 grid 的樣式才能使用。

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

gap

最後限制寬度為 1280px，並且置中對齊。

透過 JS 迴圈來跑出複數卡片

這次透過一個簡單的迴圈方式來渲染可用內容的列表內容，因正式卡片的內容可能數量有多有少，如果少的話做苦工就算了，但如果資料量很大，就不是手工可以解決的事情。

引入 js 檔案

這應該不用在贅述。

1
2
3
4
<body>
  ...code...
  <script src="js/all.js"></script>
</body>

js

建立一個函式，並且先預設呼叫有三個參數，分別是列表一到三，

1
2
3
4
5
function renderList() {}

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

此時也在 template 的 ul 上各加上 id，分別為 list1， list2 和 list3。

html

1
2
3
<ul id="list1" class="...">
  ...
</ul>

再把要執行的內容寫在函式內

  1. 因執行函式已經有指定其參數，而這個參數為 id 的值，故透過 getElementById 的方式接收參數。
  2. 再用一個變數來存模板語法，就是把 li 的內容複製到這裡來。
  3. 最後再用迴圈組字串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
  mode: "jit",
  purge: ["./**/*.html", "./src/**/*.css", "./js/**/*.js"], //要加上 JS 的路徑
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

render

這樣就可以跑出列表了。

加入判斷微調畫面

但有發現背景為紫色的卡片中的列表文字是黑色的，這樣看不清楚，所以要加一個判斷讓其變成白色，可以加在模板語法上方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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