React

必備知識：CSS、HTML、JS、React 前言 Tailwind 提供了深色模式（Dark Mode），可以自行設定深色模式時的樣式，只要在 CSS class 前面加上 dark: 關鍵...

某天，我們從設計師那裡拿到了設計圖 於是我們開始切版，跟往常一樣，主要注重在畫面的樣式與互動上，此時並不會考慮到 E2E 測試 若開發期間，很幸運地拿到...

前言 最近遇到一個手機瀏覽器上，在某個特定排版會發生高度有誤的問題 進而發現手機瀏覽器的特殊行爲 查了一下資料，發現這個問題已經存在許久，也有不少...

前言 在 CSS 中，我們可以用 Media Queries 的方式，分別定義橫向與直向的樣式： .box { width: 300px; height: 300px; display: none; } @media (orientation: landscape) { .landscapeBox { display: block; background: lightblue; } } @media (orientation: portrait) { .portraitBox { display: block; background: lightcoral; } } 但是，雖然可以...

簡介 React portal 是一個神奇的魔法。 官網的描述是這樣： Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 簡單來說，它可以跨越 JSX 結構層級，依附在指定的地方。 以...

React-Beautiful-DnD是一個很有人氣的 DnD 套件，除了基本的 Drag & Drop 功能之外，還有優雅的拖曳動畫、鍵盤拖曳支援等，使用起來也很容易...

基本概念 Image Reference HTML5 提供原生的HTML5 Drag & Drop API（以下簡稱 HTML5 DnD）實現 DOM 元素拖曳的功能。但是由於在 React 的生態底下，並不適合操作實體 DOM，因此...