@ambasada/ ui (英语)
Ambasada公司寻找迷你应用:设计标志(Ambasada的颜色、Inter + JetBrains Mono、radi、间隔等),
单子标签,外壳的安全区和主机栏)和平面 CSS 中设置的小组件,可选
反应包装. 只亮, 没有框架, 没有运行时间: 一个样式表 一个简单的 HTML 页面可以 <link>。 。 。 .
安装
npm install @ambasada/ui
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 个( 字体从旁边加载) :
<link rel="stylesheet" href="https://unpkg.com/@ambasada/[email protected]/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): 家用指示器上方的空带是错误 .
.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(中文(简体) ) | 数据表:发线行,表数字. |
<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>
反应
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) (中文(简体) ).