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