前言 進入職場已超過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）是一種常見的導航元件，其名稱源自格林童話《糖果屋》，故事中兩兄妹用麵包屑標記回家的路徑。在網站中，麵包屑導覽列起到了類似的...
按鈕在網頁中是最常見的元件之一，這個元件通常在使用者點擊後會觸發程式上的操作，可能是關閉或打開 Modal，也可能是送出表單，又或是刪除某些重要資料等等。 在...
連結（Link）在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA（Single Page Application）網站，我們通常會使用 Vue Ro...
身為前端工程師，元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件，很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更...
緣起 源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。 簡單來說就是設計奇奇怪怪的元件。 別看這些元件好像很沒用，實作起來...
#node_modules\klinecharts/dist/klinecharts.js 2450行 定義多語結構 tooltip: { show...
v-for 寫在 html tag 裡面跑回圈，可設定 key <div v-for="item in items" :key=&qu...
ivytien
鱈魚
++
jerrythepotato
Alex Liu
iThome鐵人賽
看影片追技術