鐵人檔案
為什麼要做 module 組件？ 最近在進行一些專案或練習時，經常發現自己需要重複製作相同的元件，或者不得不從舊專案中複製貼上相應的元件。 然而，這些元件通常不...
因為接下來製作元件的過程，會需要使用到 icon 以及樣式上的設定，今天就先來安裝 Nuxt 、 icon 套件以及 tailwind 吧～ PS. 在專案需要...
按鈕狀態 製作按鈕前要先規劃按鈕會有哪些狀態，與其在不同狀態下的樣式 例如： hover: 當滑鼠移動到上面的狀態 active: 當使用者點下後的狀態 fo...
輸入框狀態 當我們搞定了昨天的基本按鈕後，今天來動手實作網頁中超級重要的文字輸入框吧！這些輸入框廣泛應用在註冊、登錄、搜尋、提交表單等等地方！一開始先想想輸入框...
昨天完成了表單常用的文字輸入框，感覺表單好像結束了呢!? 等等…還沒完呢! (我還有 25 天)想想一個表單有一個以上的欄位要填寫，且有些欄位內容是固定的，如果...
在填寫表單時也常會看到勾選框，使用者可以明確的看到每個選項，並透過一個點擊的簡單操作就能改變選取狀態，選取完後不會立即執行動作，需要搭配按鈕進行提交（可以讓使用...
radio 跟昨天的 checkbox 很相像，但使用情境結果大不同!複習一下，checkbox 在面對單選時回傳的是 true 或 false，一個以上的選項...
今天來說說 switch 這個開關～ 沒想到一個表單的勾選狀態可以有三種不同的情境 :P switch 的基底其實就是前兩天所說的 <input type...
Tab 常使用在有限的空間內要呈現的資料較多，且需要對資料類型進行歸類的情況。 資料的內容有可能是純文字，也有可能是表單或是圖片等等，也就是內容的部分要能靈活的...
有時讀文章時，遇到一些專有名詞不太理解，只要把滑鼠游標移動到字詞上面就會跳出一個框框告訴讀者字詞的意思，這個好用的小工具就是 tooltip ! 範例：boo...
