---
url: https://nsh.dev/zh-TW/elements
description: "每個 NSH 應用程式所使用的基礎元件與原始元件，涵蓋 Rust 與 TSX，以及它們共用的屬性（props）、事件與 ref 方法。"
---
# Elements
Native Shell 以一小組元素建構每個畫面：基本元素，例如 `View`、`Text` 與 `Image`，以及基礎元件，例如 `Button`、`Dialog` 與 `NavStack`。每個基本元素都是一個原生 view（在 iOS 與 Mac Catalyst 上是 UIView 子類別，在 Android 上是 `View`，在桌面平台上是 AppKit、GTK 或 Win32 view），由 NSH runtime 建立並排版。App 顯示的一切都由它們組成：App 的按鈕、卡片、列與畫面都是 App 自己的元件，以這些元素繪製並由 App 設定樣式，因此 App 的外觀完全由自己決定。
這些頁面上的每個範例都同時提供 Rust 與 TSX 版本：選擇一個分頁，整頁的所有範例都會跟著切換。
```rust
use nsh_core::prelude::*;
fn app() -> impl IntoElement {
let count = signal(0_u32);
view()
.flex_1()
.items_center()
.justify_center()
.gap_3()
.child(text(move || format!("Tapped {} times", count.get())).text_2xl())
.child(
view()
.rounded_lg()
.bg(rgb(0x2563eb))
.px_4()
.py_2()
.active(|s| s.opacity(0.6))
.on_press(move || count.update(|n| *n += 1))
.child(text("Tap").text_color(white())),
)
}
```
```tsx
import { mount, signal, Text, View } from "nsh";
function App() {
const count = signal(0);
return (
Tapped {count()} times
count.update((n) => n + 1)} class="rounded-lg bg-blue-600 px-4 py-2 active:opacity-60">
Tap
);
}
mount(App);
```
在 Rust 中，基本元素是 `nsh_core::prelude` 的函式（`view()`、`text(..)`、`image(..)`），基礎元件來自 `nsh_base` crate。樣式是具型別的方法（`.flex_1()`、`.gap_3()`、`.px(px(20.0))`、`.bg(..)`），狀態樣式接受一個 closure（`.active(|s| s.opacity(0.6))`），監聽器是以其事件為參數的 closure（`.on_press(move || ..)`、`.on_change(move |text: &str| ..)`），而 `.child(..)` 用來加入子元素。一段 UI 就是一個回傳 `impl IntoElement` 的普通函式；它只會執行一次，在 closure 中讀取的 signal（`text(move || ..)`、`.bg(move || ..)`）會更新與其綁定的內容。請參閱 [使用 Rust 建構](https://nsh.dev/translations/zh-TW/docs/rust.md)。
在 TSX 中，每個標籤都使用 PascalCase，並對應作用域內的一個綁定：基本元素來自 `nsh`，基礎元件來自 `nsh/base`。只有 `` 與 `` 是不需匯入的全域變數。小寫標籤（例如 ``）會造成建置錯誤，因為 TypeScript 會依每個名稱對應的單一全域型別來檢查它，而 `List` 與 `Each` 這類泛型元件將無法推論其項目型別。編譯器透過匯入來辨識這些元素，並就地建立原生 view，因此匯入它們在執行時不會有任何成本。請參閱 [JSX 與元件](https://nsh.dev/translations/zh-TW/docs/jsx-and-components.md)。
```tsx
import { Canvas, Image, List, Overlay, Scroll, Shader, Text, Video, View, WebView } from "nsh";
import { Button, Dialog, Menu, NavPage, NavStack, Popover, Sheet, Tooltip, Input } from "nsh/base";
```
## 基本元素
在 TSX 中從 `nsh` 匯入，在 Rust 中從 `nsh_core::prelude` 匯入。
| 元素 | Rust | 原生 view（iOS / Android） | 頁面 |
|---|---|---|---|
| `` | `view()` | UIView / ViewGroup；搭配 `selectable` 時，其內的文字會一起被選取 | [View](https://nsh.dev/translations/zh-TW/elements/view.md)、[文字選取](https://nsh.dev/translations/zh-TW/elements/text-selection.md) |
| `` | `text(content)` | CoreText view / StaticLayout view | [Text](https://nsh.dev/translations/zh-TW/elements/text.md) |
| `` | `image(src)` | 帶有影像圖層的 view / image view | [Image](https://nsh.dev/translations/zh-TW/elements/image.md) |
| `` | `scroll()` | UIScrollView / ScrollView | [Scroll](https://nsh.dev/translations/zh-TW/elements/scroll.md) |
| `` | `virtual_list(count, \|at\| row)` | 使用回收 cell 的 UIScrollView / ScrollView | [List](https://nsh.dev/translations/zh-TW/elements/list.md) |
| `