# @ambasada/ui 中文文档

规范地址：https://npmcn.com/package/%40ambasada/ui/

版本：0\.8\.19
npm 元数据更新时间：2026-11-06T08:35:20.758Z
中文译文更新时间：2026-11-07T05:16:56.276Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ambasada/ui
原文对照：https://npmcn.com/package/%40ambasada/ui/?lang=original
项目主页：https://ambasada.id/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：293 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2026-11-02T12:05:17.135Z
- 最新版本发布：2026-11-06T08:35:20.542Z
- 近 30 天下载量：4461（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：27（近 12 个月 27 个）

## 中文简介

Ambasada公司寻找迷你应用:设计标志(彩色,Inter + JetBrains Mono,radi,间隔,安全区域)和平地CSS中一个小部件,带有可选的React包装. 一个样式表到 .

## 安装

```sh
npm install @ambasada/ui
```

也可以使用：`pnpm add @ambasada/ui`、`yarn add @ambasada/ui`、`bun add @ambasada/ui`

## README

# @ambasada/ ui (英语)

Ambasada公司寻找迷你应用:设计标志(Ambasada的颜色、Inter + JetBrains Mono、radi、间隔等), 单子标签,外壳的安全区和主机栏)和平面 CSS 中设置的小组件,可选 反应包装. 只亮, 没有框架, 没有运行时间: 一个样式表 一个简单的 HTML 页面可以 `<link>`。 。 。 .

## 安装

```sh
npm install @ambasada/ui
```

```ts
import "@ambasada/ui"; // fonts + tokens + components, once at the root of the app
```

或各个部分: `@ambasada/ui/tokens.css`, (中文(简体) ), `@ambasada/ui/components.css`, (中文(简体) ), `@ambasada/ui/fonts.css` (键入) `fonts.css` 如果你为Inter和JetBrains Mono服务的话.

没有构建步骤, 任何 npm CDN 文件的相同 3 个( 字体从旁边加载) :

```html
<link rel="stylesheet" href="https://unpkg.com/@ambasada/ui@0.8/dist/ambasada-ui.css" />
```

任择条款: `ambasada init` 模板启动时没有样式,只有迷你应用程序的应用页面(`ambasada miniapp enable`)装入. 如果您想要Ambasada app的外观, 请在自己的页面上使用 .

## 键

全部开始 `:root`,来自Ambasada中心(每个中心都有来源在 `tokens.css`: `--color-accent` (标志) 红色, `--color-accent-text` (红色为小文本), `--color-bg`, (中文(简体) ), `--color-surface`, (中文(简体) ), `--color-surface-2`, (中文(简体) ), `--color-ink` 编号 : `-2` 编号 : `-3`, (中文(简体) ), `--color-line`, (中文(简体) ), `--color-success` 编号 : `warn` 编号 : `danger` 编号 : `info` 联合国 `-soft` 烟花, `--card-*` (成员卡色板), `--font-sans`, (中文(简体) ), `--font-mono`, (中文(简体) ), `--text-*`, (中文(简体) ), `--weight-*`, (中文(简体) ), `--tracking-label`, (中文(简体) ), `--radius-*`, (中文(简体) ), `--shadow-*`, (中文(简体) ), `--space-1` 改为 `--space-10`, (中文(简体) ), `--page-max`, (中文(简体) ), `--tap`, (中文(简体) ), `--ease`, (中文(简体) ), `--duration`。 。 。 .

贝壳是嵌入的, 对于任何你定位自己:

| 变量 | 默认 | 在安巴萨达的应用中 |
| --- | --- | --- |
| `--ambasada-safe-area-top` 编号 : `bottom` 编号 : `left` 编号 : `right` | `env(safe-area-inset-*, 0px)` | 设置于 `<html>` 以 `@ambasada/miniapp`是因为 `ready()` |
| `--ambasada-host-bar` | `0px` | 贝壳上方栏的高度 |
| `--ambasada-inset-top` 编号 : `bottom` 编号 : `left` 编号 : `right` | `max(--ambasada-safe-area-*, env(safe-area-inset-*))` | 需要澄清的是什么:使用这些 |

使用 `--ambasada-inset-*` 任何你设置的标志。 他们拿走了更大的 贝壳报告 浏览器本身的内置,所以内置就在应用程序内部和开放的网络上,从不计算两次. 保留 其上方的边距为小 (8 px): 家用指示器上方的空带是错误 .

```css
.my-bar { position: fixed; bottom: 0; padding-bottom: calc(8px + var(--ambasada-inset-bottom)); }
```

## 构成部分

| 类 | 什麽 |
| --- | --- |
| `ui-page` | 480个px柱子,加亮出主栏和每个安全区域. |
| `ui-card`, (中文(简体) ), `ui-card-title` | 白卡,发线边界,16px半径. |
| `ui-button`, (中文(简体) ), `ui-button secondary`, (中文(简体) ), `block` | 初等(品牌为红色:每个屏幕一个)和二级按钮,为44 px. On `<button>` 或者说 `<a>`。 。 。 . |
| `ui-label` | 单子标签:11 px,大写为0.1em. 说明,永远不要句子. |
| `ui-group` (单位:千美元)`ui-group-head`, (中文(简体) ), `ui-group-body`(中文(简体) ) | 列表:一行为相邻块,有标题. |
| `ui-row` (单位:千美元)`row-icon`, (中文(简体) ), `row-text`, (中文(简体) ), `row-title`, (中文(简体) ), `row-sub`, (中文(简体) ), `row-right`, (中文(简体) ), `row-chev`(中文(简体) ) | 列表行; `tappable`, (中文(简体) ), `danger`, (中文(简体) ), `muted`· ; `row-icon accent` 编号 : `good` 编号 : `bad`。 。 。 . |
| `ui-pill` | 状态避孕药,有点: `good`, (中文(简体) ), `bad`, (中文(简体) ), `warn`, (中文(简体) ), `accent`, (中文(简体) ), `pulse`。 。 。 . |
| `ui-sheet-backdrop` > 翻译: `ui-sheet` (单位:千美元)`ui-sheet-handle` > 翻译: `ui-sheet-grip` + 键 `ui-sheet-head`, (中文(简体) ), `-body`, (中文(简体) ), `-foot`, (中文(简体) ), `ui-icon-btn` | 每个宽度的底板(没有中枢对话框):抓住,圆顶,平底页,一个滚动的正体,脚上的主要动作. 添加 `ui-sheet-open` 改为 `<body>` 并打开。 反应 `Sheet` 也为 `<body>`,然后将脚放在键盘上方. |
| `ui-field` (单位:千美元)`ui-field-label`, (中文(简体) ), `ui-field-hint`, (中文(简体) ), `.bad`编号 :`.good`, (中文(简体) ), `ui-input` | 窗体字段:标签,控制,其下一行提示或出错,相隔8 px;内紧凑 `ui-shell` 带着一只老鼠. `ui-input` 打开 `<input>`, (中文(简体) ), `<textarea>`, (中文(简体) ), `<select>` (单位:千美元)`mono`, (中文(简体) ), `code`) (中文(简体) ). |
| `ui-stepper-wrap` > 翻译: `ui-stepper` (单位:千美元)`ui-stepper-value`, (中文(简体) ), `ui-presets` | − 价值 + 金额,带有预设芯片(`on`) (中文(简体) ). |
| `ui-empty` (单位:千美元)`ui-empty-icon`(中文(简体) ) | 空状态:图标, `<strong>` 标题、提示、动作. |
| `ui-skeleton` | 灰条( A)`<span>`s) 装载时:骨架,不是自旋器. |

对于为安巴萨达应用(开发者应用)中仍然开放的笔记本电脑所构建的工具:

| 类 | 什麽 |
| --- | --- |
| `ui-shell` > 翻译: `ui-shell-side`, (中文(简体) ), `ui-shell-scrim`, (中文(简体) ), `ui-shell-main` > 翻译: `ui-shell-top` (单位:千美元)`ui-shell-menu`, (中文(简体) ), `ui-shell-content` | 240 px侧边栏,粘性上行栏,含量可达1088 px. 900 px下行栏为抽屉(出自"活字典"`ui-shell open`) (中文(简体) ). 一次清理主机酒吧和安全区域. |
| `ui-nav` (单位:千美元)`ui-nav-title`, (中文(简体) ), `ui-nav-item` (单位:千美元)`ui-nav-label`, (中文(简体) ), `ui-nav-right`, (中文(简体) ), `on`(中文(简体) ) | 侧边栏导航;当前项目获得红色标记. |
| `ui-tabs` | 标签作为标题下的链接( T)`a.on`);窄处会卷起侧道. |
| `ui-field`, (中文(简体) ), `ui-input` | 与上面相同的字段, 在此用鼠标压缩( 40 px, 14 px text) . `<Field label value onChange />` 使输入本身. |
| `ui-table` (单位:千美元)`.num`, (中文(简体) ), `tr.tappable`(中文(简体) ) | 数据表:发线行,表数字. |

```html
<main class="ui-page">
  <p class="ui-label">// My Company</p>
  <section class="ui-card">
    <h2 class="ui-card-title">Your name as a folk poem</h2>
    <button class="ui-button block">Pay 2 TON</button>
  </section>
  <section class="ui-group">
    <div class="ui-group-head"><h2>Orders</h2></div>
    <div class="ui-group-body">
      <a class="ui-row tappable" href="/orders/1">
        <span class="row-text"><span class="row-title">Poem for Ana</span><span class="row-sub">2 min ago</span></span>
        <span class="row-right"><span class="ui-pill good"><i></i>Ready</span></span>
      </a>
    </div>
  </section>
</main>
```

## 反应

```tsx
import { Button, Card, Empty, Field, Group, Nav, NavItem, Page, Pill, Row, Shell, Sheet, Skeleton, Stepper, Tabs } from "@ambasada/ui/react";

<Page>
  <Card title="Your name as a folk poem">
    <Button block onClick={() => setOpen(true)}>Pay 2 TON</Button>
  </Card>
  <Group title="Orders">
    <Row title="Poem for Ana" sub="2 min ago" right={<Pill tone="good">Ready</Pill>} href="/orders/1" />
  </Group>
  <Sheet open={open} onClose={() => setOpen(false)} title="Pay" footer={<Button>Pay 2 TON</Button>}>
    <Stepper value={amount} onChange={setAmount} min={1} unit="TON" presets={[1, 2, 5]} />
  </Sheet>
</Page>

<Shell sidebar={<Nav title="Apps"><NavItem label="Acme" href="/p/acme" current /></Nav>} top="Acme" open={menu} onMenu={setMenu}>
  <Tabs tabs={[{ id: "overview", label: "Overview", href: "/p/acme" }]} current="overview" />
  <Field label="Slug" value={slug} onChange={(e) => setSlug(e.target.value)} hint="acme.ambasada.dev" />
</Shell>
```

包装器只渲染标记并导入任何 CSS( 自己装入样式表) 。 模块标记 `"use client"` (单位:千美元)`Sheet` 使用效果),所以Next.js的服务器组件也可以将它们制成;它们服务器-交付 与 `react-dom/server`。反应 QQ 18 是一种可选的同伴依赖.

外观规则(每个屏幕一红色东西,光线,表单):Docs/DESIGN-SYSTEM.md和 ambasada repo中的docs/MINI-APPS.md 第9节.

(原始内容存档于2018-10-21). MIT, Centyso. Inter和JetBrains Mono: SIL Open Font许可证 1.1 (中文(简体) )`fonts/OFL-*.txt`) (中文(简体) ).

## 常见问题

### @ambasada/ui 是什么？

Ambasada公司寻找迷你应用:设计标志\(彩色,Inter \+ JetBrains Mono,radi,间隔,安全区域\)和平地CSS中一个小部件,带有可选的React包装\. 一个样式表到 \.

### 如何安装 @ambasada/ui？

在项目目录运行 npm install @ambasada/ui，或使用 pnpm add / yarn add / bun add。

### @ambasada/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ambasada/ui 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ambasada/ui 可以商用吗？

@ambasada/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ambasada/ui 的下载量有多少？

根据 npm 官方下载统计，@ambasada/ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 4,461 次，日均约 149 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ambasada/ui 还在维护吗？

最新版本 0\.8\.19 发布于 2026/11/06（1 天前）；至今共发布 27 个版本，其中过去 12 个月发布了 27 个；首次发布于 2026/11/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。