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