做個 Todo App
開始學習還是找個練習專案來做,雖然 Todo App 當作各種工具練習專案到老掉牙了(大概只比 Hello World App 好一點),
不過還是拿來練一下手感,接下來這系列會來克隆一下 Microsoft To Do App
。
--
這周就先完成左邊的側邊欄
需要切成幾部分來實作,
- Account Header & Search
- Intelligent List
- Detail Todo List
- Create Todo Area
實作
Account Header & Search
<div class="ml-4 my-4 flex justify-between items-center">
<div class="flex items-center">
<img class="inline-block h-8 w-8 rounded-full ring-2"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="">
<div class="flex flex-col ml-2 justify-center">
<div class="text-sm">Bobson Lin</div>
<div class="text-xs text-gray-500">bobson.lin@email.com</div>
</div>
</div>
<button class="w-10 h-10 inline-flex justify-center items-center text-gray-500 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 " viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</button>
</div>
排版的 utility class 使用起來比較沒甚麼問題,基本都是用 flexbox 去排版,以及相關 class 去做對齊、置中...
不過比較不習慣的是,之前都是用 bootstrap 直接刻版,雖然 bootstrap4 以後也有文字的 utility class,
但文字上面通常都直接寫 HTML h
或 p
標籤。
Tailwind 需加上文字的 class,如 text-sm
、 text-gray-500
等,基本上都能直接使用 div 包住就行,不用太多考量要用哪個 HTML 的文字標籤。
也就是說使用 Tailwind 開發只需要專心想要用哪些 utility class 就好,這點開發習慣上需要轉換。
--
Q. SVG 在 Button 中如何置中? (參考 Reference #1)
A. 使用 inline-flex
,class 用 inline-flex justify-center items-center
。
Intelligent List
<ul class="w-56">
<li class="px-2 py-2 hover:bg-gray-100">
<div class="px-2 my-2 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<p class="mx-3">我的一天</p>
</div>
</li>
...
</ul>
智慧列表(Intelligent List)的部分,我還是用習慣的 ul > li
去包,li
裡再包 svg + p
使用到的 icon 都是從 HeroIcons 找相似的來用。
Detail Todo List
<ul>
<li class="px-2 py-2 hover:bg-gray-100">
<div class="px-2 my-2 flex items-center text-indigo-700 border-indigo-700 border-l-2">
👋
<p class="mx-3">使用者入門</p>
</div>
</li>
...
</ul>
HTML 與前一部份結構相同,在被選擇到 item 上加上 class text-indigo-700 border-indigo-700 border-l-2
。
svg
的部分也能使用表情符號取代。
Create Todo Area
<div class="px-4 py-4 flex items-center justify-between text-gray-400">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<p class="mx-3">新增清單</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
</div>
後面多加個 svg icon ,新增清單就完事囉~
小結
Demo
編譯結果
Transferred | Uncompressed | Load Time | |
---|---|---|---|
開發環境 | 14.3 kB | 14.1 kB | 3 ms |
生產環境 | 2.3 kB | 5.23 kB | 5 ms |
生產環境編譯出來的 css 檔大約 413 行
--
5 要求
19.2 kB 已轉移
26.6 kB 資源
完成:95 ms
DOMContentLoaded: 51 ms
載入:90 ms
如果完全沒用 JIT 和 purgeCSS,會變成
5 要求
336 kB 已轉移
3.3 MB 資源
完成:748 ms
DOMContentLoaded: 380 ms
載入:741 ms
所以記得把 tailwind.config.js 設定加進去~~