原生元素一次看懂（附代碼示例）)
GPUIX元素完全參考11個(gè)原生元素一次看懂附代碼示例【免費(fèi)下載鏈接】gpuixNode.js React bindings for Zed GPUI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpuixGPUIX是 Zed 編輯器 GPU 渲染框架 GPUI 的 React 綁定庫(kù)讓你用 React 和 TypeScript 構(gòu)建直接渲染到 GPU 的原生桌面應(yīng)用——沒(méi)有 Electron沒(méi)有 Web 視圖。本文帶你一次看懂 GPUIX 的全部11 個(gè)原生元素從最基礎(chǔ)的div和text到語(yǔ)法高亮代碼塊code、diff 查看器diff、Markdown 渲染markdown再到虛擬列表virtual-list和浮層anchored并附可直接上手的代碼示例。上面這個(gè) Waku 風(fēng)格的聊天應(yīng)用完全由 GPUIX 驅(qū)動(dòng)側(cè)邊欄、虛擬滾動(dòng)消息列表、輸入框、markdown渲染器全部是原生元素。GPUIX 原生元素速查表GPUIX 共提供 11 個(gè)已實(shí)現(xiàn)的宿主元素另有一個(gè)規(guī)劃中的canvas完整清單見(jiàn) README.md 的 Supported Elements 一節(jié)元素一句話(huà)說(shuō)明典型用途div彈性布局容器卡片、按鈕、布局骨架text可選中、可復(fù)制的文本標(biāo)簽、段落codeTree-sitter 語(yǔ)法高亮代碼塊代碼展示diff統(tǒng)一 diff 查看器支持詞級(jí)高亮代碼評(píng)審視圖markdownGitHub 風(fēng)格 Markdown文檔、聊天消息input原生單行文本編輯器搜索框textarea原生多行、自動(dòng)增高編輯器聊天輸入框virtual-list只構(gòu)建可視區(qū)域的長(zhǎng)列表消息流、大數(shù)據(jù)列表img位圖/SVG 彩色圖片頭像、插圖svg可著色的單色 SVG 圖標(biāo)工具欄圖標(biāo)anchored相對(duì)錨點(diǎn)定位的浮層菜單、Tooltip每個(gè)元素在 Rust 側(cè)都有獨(dú)立的實(shí)現(xiàn)文件核心自定義元素集中在 packages/native/src/custom_elements/ 目錄元素類(lèi)型定義可查 packages/react/src/types/host.ts。布局與文本div與text這兩個(gè)是最基礎(chǔ)的元素?fù)纹鹫麄€(gè)應(yīng)用的骨架。div支持完整的 flexbox 布局text支持所有文字樣式且所有文本天生可選中復(fù)制。div style{{ display: flex, gap: 8, padding: 16, backgroundColor: #313244 }} text style{{ color: #ffffff, fontSize: 18 }}Hello GPUIX!/text /div兩個(gè)新手必須知道的要點(diǎn)文本顏色默認(rèn)是黑色與 CSS 不同GPUI 不會(huì)從父元素繼承color務(wù)必顯式設(shè)置。hover / active 是原生樣式對(duì)象寫(xiě)在style里由 Rust 直接應(yīng)用零 JavaScript 往返。div style{{ backgroundColor: #313244, borderRadius: 8, padding: 12, hover: { backgroundColor: #45475a }, active: { backgroundColor: #585b70 }, }} 按鈕 /div文本三件套markdown、code、diff這是 GPUIX 的殺手級(jí)元素 三個(gè)文本組件在 Rust 中用 Tree-sitter 計(jì)算語(yǔ)法高亮顏色來(lái)自主題而非布局高亮延遲到達(dá)也不會(huì)重排且全部支持跨元素拖選復(fù)制。三者同框效果Markdown 渲染markdown支持 GitHub 風(fēng)格 Markdown標(biāo)題、列表、表格、引用、圍欄代碼、刪除線(xiàn)、任務(wù)列表裸 URL 自動(dòng)鏈接。markdown source{readme} onLinkClick{(e) open(e.value)} /代碼高亮code每行固定行高塊高度在語(yǔ)法高亮運(yùn)行前就已確定支持行號(hào)和語(yǔ)言頭部條。內(nèi)置 Rust、TypeScript、JavaScript、Python、Go、JSON 等 15 種語(yǔ)言。code code{source} languagetypescript showLineNumbers /差異查看diff接收標(biāo)準(zhǔn)git diff補(bǔ)丁默認(rèn)隨父容器流動(dòng)父列表可以成為唯一滾動(dòng)容器開(kāi)啟wordDiff只高亮真正變化的詞。maxLines可截?cái)嚅L(zhǎng)補(bǔ)丁并觸發(fā)onShowMore。diff patch{unifiedPatch} wordDiff maxLines{open ? undefined : 24} onShowMore{() setOpen(true)} onToggleFile{(e) toggle(e.value)} /三者都接受可選的theme屬性逐層覆蓋內(nèi)置暗色主題行高、gutter 寬度、標(biāo)題字號(hào)等布局?jǐn)?shù)字放在theme.metrics里調(diào)樣式只需一次 React 重渲染無(wú)需重編譯原生模塊。原生文本輸入input與textarea兩者都走 GPUI 的平臺(tái)級(jí)輸入處理器自帶原生光標(biāo)、文字選擇、IME 組合輸入、剪貼板、撤銷(xiāo)重做和字形安全刪除。textarea value{draft} placeholderAsk anything minRows{1} maxRows{8} onChange{(event) setDraft(event.value ?? )} onSubmit{send} /Enter觸發(fā)onSubmittextarea中ShiftEnter換行編輯器先在原生側(cè)更新再把完整值報(bào)告給 React光標(biāo)編輯時(shí)常亮、空閑后每 500ms 閃爍失焦停止重繪光標(biāo)顏色可通過(guò)input theme{{ caret: #22c55e }} /覆蓋input需要autoFocus或點(diǎn)擊才能獲得焦點(diǎn)否則收不到按鍵事件。長(zhǎng)列表性能利器virtual-list普通滾動(dòng)容器會(huì)構(gòu)建每一個(gè)子元素virtual-list則只構(gòu)建、布局、繪制視口附近的行是聊天消息流這類(lèi)長(zhǎng)列表的正確選擇。virtual-list alignmentbottom followTail estimatedItemHeight{180} style{{ flexGrow: 1, minHeight: 0 }} {messages.map((message) ( Message key{message.id} message{message} / ))} /virtual-list常用屬性速覽屬性默認(rèn)作用alignmenttop聊天式底部定位用bottomfollowTailfalse貼底時(shí)自動(dòng)跟隨新增行overdraw512視口外多構(gòu)建的像素estimatedItemHeight無(wú)未測(cè)量行的初始高度估算?? 注意GPUIX 不支持嵌套滾動(dòng)。一個(gè)父級(jí)可以滾動(dòng)內(nèi)部不能再放virtual-list或overflow: scroll。圖片與圖標(biāo)img與svg兩者都接收文件系統(tǒng)路徑而非 URL。img加載 PNG、JPEG、WebP、GIF、SVG全彩色objectFit與 CSS 一致contain默認(rèn) /cover/fill/scaleDown/none加載失敗顯示占位圖而不是崩潰。svg走 GPUI 的單色圖標(biāo)渲染器用style.color著色專(zhuān)為工具欄圖標(biāo)設(shè)計(jì)。style.color是必須的不設(shè)則不繪制。svg src{iconPath} style{{ width: 16, height: 16, color: #b4b4b4 }} /chat 示例的全部側(cè)邊欄和輸入框圖標(biāo)就是這么實(shí)現(xiàn)的圖標(biāo)素材見(jiàn) examples/assets/icons/。浮層定位anchoredanchored讓元素相對(duì)一個(gè)錨點(diǎn)定位配合deferred可渲染在稍后的繪制通道上——菜單、Tooltip、Select 下拉必須用它才能蓋住virtual-list和頁(yè)面其余部分。anchored sidetop alignend gap{6} deferred div style{{ backgroundColor: #232323, padding: 8 }} text style{{ color: #ffffff }}菜單項(xiàng)/text /div /anchored常用屬性sidetop/right/bottom/left、alignstart/center/end、anchor八向錨點(diǎn)、offset、fit: snap自動(dòng)收進(jìn)窗口內(nèi)?？缭匚谋具x擇零配置GPUIX 繪制的每一處文本——包括code、diff、markdown內(nèi)部——都可以選中和復(fù)制。從標(biāo)題拖到圍欄代碼塊中間內(nèi)容全部選中CmdC按文檔順序合并復(fù)制。想退出選擇工具欄、按鈕、行號(hào)槽只需userSelect: none它像 CSS 一樣向下繼承。上手示例與運(yùn)行方式項(xiàng)目?jī)?nèi)置四個(gè)示例全部使用硬編碼數(shù)據(jù)位于 examples/ 目錄示例運(yùn)行命令展示內(nèi)容chatcd examples bun --hot chat.tsx完整聊天應(yīng)用虛擬列表 markdown 動(dòng)畫(huà)側(cè)邊欄native-textcd examples bun --hot native-text.tsxmarkdown/code/diff三件套切換countercd examples bun --hot counter.tsx最小應(yīng)用狀態(tài)、事件、hoverdiffcd examples bun --hot diff.tsx用divtext手搓的 diff 對(duì)照最小入口只需三步import { render } from gpuix/react function App() { return div style{{ padding: 16 }}text style{{ color: #fff }}hello/text/div } render(App /, { title: My App, width: 800, height: 600 })依賴(lài) Rust 工具鏈和 Node.js 18macOS 需 Xcode Metal Toolchain。完整構(gòu)建步驟見(jiàn) README.md 的 Building 章節(jié)架構(gòu)細(xì)節(jié)可參考 AGENTS.md。小結(jié)11 個(gè) GPUIX 原生元素覆蓋了桌面應(yīng)用的全部核心場(chǎng)景布局divflexbox 原生 hover/active文本text/markdown/code/diff全可選中輸入input/textarea原生編輯器性能virtual-list只渲染可視行視覺(jué)img/svg圖片圖標(biāo)浮層anchored后置繪制通道配合bun --hot熱重載和 GPU 測(cè)試渲染器截圖一套 React 心智模型即可構(gòu)建流暢的原生桌面應(yīng)用 【免費(fèi)下載鏈接】gpuixNode.js React bindings for Zed GPUI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpuix創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 GPUIX元素完全參考：11個(gè)原生元素一次看懂（附代碼示例）
GPUIX元素完全參考11個(gè)原生元素一次看懂附代碼示例【免費(fèi)下載鏈接】gpuixNode.js React bindings for Zed GPUI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpuixGPUIX是 Zed 編輯器 GPU 渲染框架 GPUI 的 React 綁定庫(kù)讓你用 React 和 TypeScript 構(gòu)建直接渲染到 GPU 的原生桌面應(yīng)用——沒(méi)有 Electron沒(méi)有 Web 視圖。本文帶你一次看懂 GPUIX 的全部11 個(gè)原生元素從最基礎(chǔ)的div和text到語(yǔ)法高亮代碼塊code、diff 查看器diff、Markdown 渲染markdown再到虛擬列表virtual-list和浮層anchored并附可直接上手的代碼示例。上面這個(gè) Waku 風(fēng)格的聊天應(yīng)用完全由 GPUIX 驅(qū)動(dòng)側(cè)邊欄、虛擬滾動(dòng)消息列表、輸入框、markdown渲染器全部是原生元素。GPUIX 原生元素速查表GPUIX 共提供 11 個(gè)已實(shí)現(xiàn)的宿主元素另有一個(gè)規(guī)劃中的canvas完整清單見(jiàn) README.md 的 Supported Elements 一節(jié)元素一句話(huà)說(shuō)明典型用途div彈性布局容器卡片、按鈕、布局骨架text可選中、可復(fù)制的文本標(biāo)簽、段落codeTree-sitter 語(yǔ)法高亮代碼塊代碼展示diff統(tǒng)一 diff 查看器支持詞級(jí)高亮代碼評(píng)審視圖markdownGitHub 風(fēng)格 Markdown文檔、聊天消息input原生單行文本編輯器搜索框textarea原生多行、自動(dòng)增高編輯器聊天輸入框virtual-list只構(gòu)建可視區(qū)域的長(zhǎng)列表消息流、大數(shù)據(jù)列表img位圖/SVG 彩色圖片頭像、插圖svg可著色的單色 SVG 圖標(biāo)工具欄圖標(biāo)anchored相對(duì)錨點(diǎn)定位的浮層菜單、Tooltip每個(gè)元素在 Rust 側(cè)都有獨(dú)立的實(shí)現(xiàn)文件核心自定義元素集中在 packages/native/src/custom_elements/ 目錄元素類(lèi)型定義可查 packages/react/src/types/host.ts。布局與文本div與text這兩個(gè)是最基礎(chǔ)的元素?fù)纹鹫麄€(gè)應(yīng)用的骨架。div支持完整的 flexbox 布局text支持所有文字樣式且所有文本天生可選中復(fù)制。div style{{ display: flex, gap: 8, padding: 16, backgroundColor: #313244 }} text style{{ color: #ffffff, fontSize: 18 }}Hello GPUIX!/text /div兩個(gè)新手必須知道的要點(diǎn)文本顏色默認(rèn)是黑色與 CSS 不同GPUI 不會(huì)從父元素繼承color務(wù)必顯式設(shè)置。hover / active 是原生樣式對(duì)象寫(xiě)在style里由 Rust 直接應(yīng)用零 JavaScript 往返。div style{{ backgroundColor: #313244, borderRadius: 8, padding: 12, hover: { backgroundColor: #45475a }, active: { backgroundColor: #585b70 }, }} 按鈕 /div文本三件套markdown、code、diff這是 GPUIX 的殺手級(jí)元素 三個(gè)文本組件在 Rust 中用 Tree-sitter 計(jì)算語(yǔ)法高亮顏色來(lái)自主題而非布局高亮延遲到達(dá)也不會(huì)重排且全部支持跨元素拖選復(fù)制。三者同框效果Markdown 渲染markdown支持 GitHub 風(fēng)格 Markdown標(biāo)題、列表、表格、引用、圍欄代碼、刪除線(xiàn)、任務(wù)列表裸 URL 自動(dòng)鏈接。markdown source{readme} onLinkClick{(e) open(e.value)} /代碼高亮code每行固定行高塊高度在語(yǔ)法高亮運(yùn)行前就已確定支持行號(hào)和語(yǔ)言頭部條。內(nèi)置 Rust、TypeScript、JavaScript、Python、Go、JSON 等 15 種語(yǔ)言。code code{source} languagetypescript showLineNumbers /差異查看diff接收標(biāo)準(zhǔn)git diff補(bǔ)丁默認(rèn)隨父容器流動(dòng)父列表可以成為唯一滾動(dòng)容器開(kāi)啟wordDiff只高亮真正變化的詞。maxLines可截?cái)嚅L(zhǎng)補(bǔ)丁并觸發(fā)onShowMore。diff patch{unifiedPatch} wordDiff maxLines{open ? undefined : 24} onShowMore{() setOpen(true)} onToggleFile{(e) toggle(e.value)} /三者都接受可選的theme屬性逐層覆蓋內(nèi)置暗色主題行高、gutter 寬度、標(biāo)題字號(hào)等布局?jǐn)?shù)字放在theme.metrics里調(diào)樣式只需一次 React 重渲染無(wú)需重編譯原生模塊。原生文本輸入input與textarea兩者都走 GPUI 的平臺(tái)級(jí)輸入處理器自帶原生光標(biāo)、文字選擇、IME 組合輸入、剪貼板、撤銷(xiāo)重做和字形安全刪除。textarea value{draft} placeholderAsk anything minRows{1} maxRows{8} onChange{(event) setDraft(event.value ?? )} onSubmit{send} /Enter觸發(fā)onSubmittextarea中ShiftEnter換行編輯器先在原生側(cè)更新再把完整值報(bào)告給 React光標(biāo)編輯時(shí)常亮、空閑后每 500ms 閃爍失焦停止重繪光標(biāo)顏色可通過(guò)input theme{{ caret: #22c55e }} /覆蓋input需要autoFocus或點(diǎn)擊才能獲得焦點(diǎn)否則收不到按鍵事件。長(zhǎng)列表性能利器virtual-list普通滾動(dòng)容器會(huì)構(gòu)建每一個(gè)子元素virtual-list則只構(gòu)建、布局、繪制視口附近的行是聊天消息流這類(lèi)長(zhǎng)列表的正確選擇。virtual-list alignmentbottom followTail estimatedItemHeight{180} style{{ flexGrow: 1, minHeight: 0 }} {messages.map((message) ( Message key{message.id} message{message} / ))} /virtual-list常用屬性速覽屬性默認(rèn)作用alignmenttop聊天式底部定位用bottomfollowTailfalse貼底時(shí)自動(dòng)跟隨新增行overdraw512視口外多構(gòu)建的像素estimatedItemHeight無(wú)未測(cè)量行的初始高度估算?? 注意GPUIX 不支持嵌套滾動(dòng)。一個(gè)父級(jí)可以滾動(dòng)內(nèi)部不能再放virtual-list或overflow: scroll。圖片與圖標(biāo)img與svg兩者都接收文件系統(tǒng)路徑而非 URL。img加載 PNG、JPEG、WebP、GIF、SVG全彩色objectFit與 CSS 一致contain默認(rèn) /cover/fill/scaleDown/none加載失敗顯示占位圖而不是崩潰。svg走 GPUI 的單色圖標(biāo)渲染器用style.color著色專(zhuān)為工具欄圖標(biāo)設(shè)計(jì)。style.color是必須的不設(shè)則不繪制。svg src{iconPath} style{{ width: 16, height: 16, color: #b4b4b4 }} /chat 示例的全部側(cè)邊欄和輸入框圖標(biāo)就是這么實(shí)現(xiàn)的圖標(biāo)素材見(jiàn) examples/assets/icons/。浮層定位anchoredanchored讓元素相對(duì)一個(gè)錨點(diǎn)定位配合deferred可渲染在稍后的繪制通道上——菜單、Tooltip、Select 下拉必須用它才能蓋住virtual-list和頁(yè)面其余部分。anchored sidetop alignend gap{6} deferred div style{{ backgroundColor: #232323, padding: 8 }} text style{{ color: #ffffff }}菜單項(xiàng)/text /div /anchored常用屬性sidetop/right/bottom/left、alignstart/center/end、anchor八向錨點(diǎn)、offset、fit: snap自動(dòng)收進(jìn)窗口內(nèi)?？缭匚谋具x擇零配置GPUIX 繪制的每一處文本——包括code、diff、markdown內(nèi)部——都可以選中和復(fù)制。從標(biāo)題拖到圍欄代碼塊中間內(nèi)容全部選中CmdC按文檔順序合并復(fù)制。想退出選擇工具欄、按鈕、行號(hào)槽只需userSelect: none它像 CSS 一樣向下繼承。上手示例與運(yùn)行方式項(xiàng)目?jī)?nèi)置四個(gè)示例全部使用硬編碼數(shù)據(jù)位于 examples/ 目錄示例運(yùn)行命令展示內(nèi)容chatcd examples bun --hot chat.tsx完整聊天應(yīng)用虛擬列表 markdown 動(dòng)畫(huà)側(cè)邊欄native-textcd examples bun --hot native-text.tsxmarkdown/code/diff三件套切換countercd examples bun --hot counter.tsx最小應(yīng)用狀態(tài)、事件、hoverdiffcd examples bun --hot diff.tsx用divtext手搓的 diff 對(duì)照最小入口只需三步import { render } from gpuix/react function App() { return div style{{ padding: 16 }}text style{{ color: #fff }}hello/text/div } render(App /, { title: My App, width: 800, height: 600 })依賴(lài) Rust 工具鏈和 Node.js 18macOS 需 Xcode Metal Toolchain。完整構(gòu)建步驟見(jiàn) README.md 的 Building 章節(jié)架構(gòu)細(xì)節(jié)可參考 AGENTS.md。小結(jié)11 個(gè) GPUIX 原生元素覆蓋了桌面應(yīng)用的全部核心場(chǎng)景布局divflexbox 原生 hover/active文本text/markdown/code/diff全可選中輸入input/textarea原生編輯器性能virtual-list只渲染可視行視覺(jué)img/svg圖片圖標(biāo)浮層anchored后置繪制通道配合bun --hot熱重載和 GPU 測(cè)試渲染器截圖一套 React 心智模型即可構(gòu)建流暢的原生桌面應(yīng)用 【免費(fèi)下載鏈接】gpuixNode.js React bindings for Zed GPUI.項(xiàng)目地址: https://gitcode.com/gh_mirrors/gp/gpuix創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考