現在有需求和規格了，讓我們開始開發吧。 基本結構 第一步先來建立基本樣式，需求提到「除了按鈕本體，在按鈕離開後，會有『拓印』留在原地」。 所以應該要有個容器，裡...
今天我們邀請到 Vue 來幫自己自我介紹 定義 官方文件：Vue (發音為 /vjuː/，類似 view) 是一款用於構建用戶界面的 JavaScript 框...
昨天我們談到了為什麼要學習React,今天我們就開始動手學習，作為一個有Vue開發經驗的開發者，我們會特別注意React和Vue的異同。 開發環境設置 首先,讓...
所有的開發第一步一定是通靈，喔不對，是分析需求。(≖‿ゝ≖)✧ 你一定在想這個元件又沒什麼功能，是要寫個雞毛需求。( ・ิω・ิ) 其實你說得很對，不過這就和練...
前幾天，我們從Playground的佈局下手，已經保證一個自適應的窗口來容納canvas，並獲得游標的位置，現在，讓我們延續昨天的基礎，設計更靈活的菜單收納方法...
回來做元件！ 今天接著介紹如何利用模板動態生成DOM，並比較 React 和 Vue 的不同實作方式。 Functional component vs Com...
前言 進入職場已超過5年，論資歷卻處在一個好像不太像Junior卻也不算Senior的尷尬階段。從新聞媒體業轉跳軟體開發工作，靠自己胡亂探索和Google大神後...
所以我說那個畫面呢？ 畢竟是網頁，還是應該先來個網頁才能夠有畫面嘛。( ´ ▽ ` )ﾉ 鱈魚：「讓我們從頭開始建立網頁吧！ˋ( ° ▽、° ) 」 路人：（轉...
今天是正式進 Vue 框架的第一天，要學習一樣新東西前先來稍微知道一下為什麼吧！讓學習意義先建立起來，保持好奇的感覺也會變得更容易持續。 定義 先來看看維基百科...
以最簡為原則 本文將介紹如何以簡單的設計實現響應式布局（RWD），兼顧桌面與移動端需求，並比較 React 和 Vue 的不同實作方式。 "左圖展...
自我介紹一下 Hihi 大家好我是 ++（發音為 /jiā jiā/），在好想工作室 Web Camp 學習來到半年，是一個正學到 JS30 的小菜菜，小腦袋的...
Hello，版上大大我是Twjoin哲煜科技的團隊成員～～跟大家分享近期我們團隊除了正業“開發專案“以外也小玩了一下Podcast，讓我們可以口無遮攔的大聊特聊...
在一個專案當中，標單數入元件通常會有統一的外觀風格，讓整個系統看起來更一致、整齊。<AtomicFormField> 是用來渲染表單欄位的元件。它...
Toast 是一個提供使用者操作回饋的元件，通常會在幾秒鐘後自動消失。這類元件可以用來通知使用者新增或修改資料的成功或失敗，或者刪除訊息的成功或失敗。有時候還...
對話框（Dialog）是一種常見的網頁元件，通常用來顯示重要的資訊或要求使用者進行某些操作。Dialog 在顯示時會暫停其他頁面內容的操作，強制使用者集中注意...
如果要希望在不換頁的前提上塞入更多畫面無法容納的資訊，Modal 經常會是網頁設計師的首選之一。如果要從 UI 樣式上細分，又可以延伸出像是對話框（Dialo...
Tooltip 是一個用來顯示、說明目標元件相關訊息的元件，通常用於滑鼠停留於元件或透過鍵盤聚焦時顯示。像是在 LINE Design System 中提到，...
表格（Table）是一種專門用來展示結構化資料的元件，它可以幫助使用者以易於掃描的方式瀏覽資料，使他們能夠快速辨別資料中的模式並進行分析。 除了展示資料，表...
進度條（Progress）是一個用於展示任務完成進度的元件。它廣泛應用於需要顯示工作、任務或操作完成度的地方，例如大型檔案上傳時，我們可以將上傳的進度回饋給使...
分隔線（Divider）元件在 UI/UX 設計中扮是個重要的輔助角色，用於在視覺上區分不同的內容區域，增強版面結構的清晰度和可讀性。 在實際網頁開發中，大多...
Chip 是一種小巧且功能多樣的元件，經常應用於描述內容的關鍵字來標記、分類或組織資訊。除了顯示資料的功能外，也偶爾會被應用於選擇、過濾的 UI 功能上。 元...
Badge 元件是一種簡單但功能強大的資料展示元件，通常以小圓形的形式出現，依附於其他 UI 元件上。Badge 元件主要用於通知提醒，顯示未讀訊息、通知數量...
Avatar 元件是一個很常見且簡單的元件，像是在電商平台、論壇、個人部落格或是 ERP 系統中經常會看到。它很簡單，所以初期在規劃網站時經常漏掉將它編入元件...
看這個元件的名稱不難發現，它的靈感來自手風琴（Accordion）這個樂器。在網頁裡面，Accordion 算是一個常見的設計。它是一個垂直堆疊的標題列表，當...
在專案中，你會如何設定 Scrollbar 的樣式呢？ 當我們想要自定義網頁的 Scrollbar 時，最常見的方式之一就是用 CSS 改寫原生的 Scrol...
Dropdown 是一個用於顯示和選擇選項的 UI 元件，通常由一個觸發按鈕或文字組成，當使用者點擊該按鈕或文字時，會展開一個選單列表，列出多個選項供使用者選...
彈出視窗（Popover，浮動視窗）通常隨著使用者的互動而顯示，它浮動於互動元素的周圍，主要用來提供附加資訊或操作，而不會改變頁面佈局。 <Atomic...
頁籤（Tabs）是一個很常見的 UI 元件，它可以讓使用者在內容上有關聯但屬於不同類別的資料或畫面之間切換。例如，我們可以用它來切換「娛樂」、「科技」、「股市...
在 ERP 系統的列表頁面或部落格文章的總覽頁面，如果我們想要一次顯示大量資料，不僅會耗費大量的網路傳輸流量，也會使瀏覽器渲染畫面變得緩慢費時。為了解決這個問...
麵包屑導覽列（Breadcrumb）是一種常見的導航元件，其名稱源自格林童話《糖果屋》，故事中兩兄妹用麵包屑標記回家的路徑。在網站中，麵包屑導覽列起到了類似的...
鱈魚
++
Moscle.dev
jerrythepotato
ivytien
Alex Liu
iThome鐵人賽
看影片追技術