舰队基地Ember UI
舰队基地控制台后面的组件库——布局、数据、表格、日历和模式 用于Ember应用程序和Fleetbase扩展.
文档 • 妇女 游戏场 • 妇女 游戏场指南 • 妇女 捐款
文档
参考文献 页:1 ——每个 和关于何时到达哪个部分的指导意见.
这个 游乐场 它的交互伴奏: 文档组件有一个页面,用于修改参数并监视真实组件的反应.
安装
pnpm add @fleetbase/ember-ui
需要节点 18 或更新。 附加符会带出自己的样式;不需要额外的CSS导入.
使用量
安装后组件会像其他 Ember 组件一样解决:
<Layout::Container>
<Layout::Header />
<Layout::Sidebar />
<Layout::Main>
<ContentPanel @title="Orders" @open={{true}}>
<Table @columns={{this.columns}} @rows={{this.orders}} @selectable={{true}} />
</ContentPanel>
<Button @type="primary" @text="New order" @icon="plus" @onClick={{this.createOrder}} />
</Layout::Main>
</Layout::Container>
服务以通常的方式注入:
import { inject as service } from '@ember/service';
export default class OrdersController extends Controller {
@service modalsManager;
@action confirmDelete(order) {
return this.modalsManager.confirm({
title: 'Delete this order?',
body: `${order.reference} will be removed permanently.`,
confirm: () => order.destroyRecord(),
});
}
}
构成部分
记录的表面是 63个构成部分. 每一个链接到其参考页面和一个活的, 可编辑示例.
布局结构( S) - 17个组成部分
| 构成部分 | 文档 | 游戏场 |
|---|---|---|
<Layout::Container /> | 文档 | 试试看 |
<Layout::Header /> | 文档 | 试试看 |
<Layout::Sidebar /> | 文档 | 试试看 |
<Layout::Main /> | 文档 | 试试看 |
<Layout::Section /> | 文档 | 试试看 |
<Layout::MobileNavbar /> | 文档 | 试试看 |
<ContentPanel /> | 文档 | 试试看 |
<Overlay /> | 文档 | 试试看 |
<Drawer /> | 文档 | 试试看 |
<Layout::Resource::Tabular /> | 文档 | 试试看 |
<Layout::Resource::Card /> | 文档 | 试试看 |
<Layout::Resource::CardsGrid /> | 文档 | 试试看 |
<Layout::Resource::Panel /> | 文档 | 试试看 |
<Floating /> | 文档 | 试试看 |
<Attach::Tooltip /> | 文档 | 试试看 |
<Attach::Popover /> | 文档 | 试试看 |
<Spacer /> | 文档 | 试试看 |
窗体输入( I) - 15个构成部分
| 构成部分 | 文档 | 游戏场 |
|---|---|---|
<InputGroup /> | 文档 | 试试看 |
<Checkbox /> | 文档 | 试试看 |
<Toggle /> | 文档 | 试试看 |
<Select /> | 文档 | 试试看 |
<MultiSelect /> | 文档 | 试试看 |
<ComboBox /> | 文档 | 试试看 |
<ModelSelect /> | 文档 | 试试看 |
<DatePicker /> | 文档 | 试试看 |
<DateTimeInput /> | 文档 | 试试看 |
<PhoneInput /> | 文档 | 试试看 |
<CoordinatesInput /> | 文档 | 试试看 |
<ModelCoordinatesInput /> | 文档 | 试试看 |
<UnitInput /> | 文档 | 试试看 |
<MoneyInput /> | 文档 | 试试看 |
<FileUpload /> | 文档 | 试试看 |
数据显示 - 9个构成部分
| 构成部分 | 文档 | 游戏场 |
|---|---|---|
<Table /> | 文档 | 试试看 |
<Badge /> | 文档 | 试试看 |
<Pill /> | 文档 | 试试看 |
<ProgressBar /> | 文档 | 试试看 |
<Spinner /> | 文档 | 试试看 |
<Timeline /> | 文档 | 试试看 |
<ActivityLog /> | 文档 | 试试看 |
<File /> | 文档 | 试试看 |
<CommentThread /> | 文档 | 试试看 |
模块 - 9个构成部分
| 构成部分 | 文档 | 游戏场 |
|---|---|---|
<Modal::Default /> | 文档 | 试试看 |
<Modal::Layouts::Confirm /> | 文档 | 试试看 |
<Modal::Layouts::Alert /> | 文档 | 试试看 |
<Modal::Layouts::Prompt /> | 文档 | 试试看 |
<Modal::Layouts::BulkAction /> | 文档 | 试试看 |
<Modal::Layouts::Progress /> | 文档 | 试试看 |
<Modal::Layouts::Process /> | 文档 | 试试看 |
<Modal::Layouts::Loading /> | 文档 | 试试看 |
<Modal::Layouts::OptionPrompt /> | 文档 | 试试看 |
附加输出的组件比这个多 —— 表格单元格、聊天内部组件、构建子组件 以及其他执行细节。 这些是蓄意无证的:它们是内部的 以上组件,且不包含在文档、游乐场或任何兼容性中 答应.
游戏场
由这个加登自己的假程序所建 所以它让真正的组件通过正常 具有真实外加样式的 Ember 分辨率 .
pnpm start # http://localhost:4200
pnpm run build:playground # static GitHub Pages artifact into playground-dist/
| 路线 | 目的 |
|---|---|
/components | 可搜索的分类目录 |
/components/:slug | 完整页面: 控制、 预设、 事件日志、 使用片断 |
/embed/:slug | 最小 Iframe 视图, 嵌入在文档站点 |
参数状态在一个编码的查询参数中进行,因此配置的示例是可共享的 链接和嵌入式显示整个页面显示的内容.
见 佩克鲁德·姆德 如何添加 例如, iframe 集成和调整消息大小, 以及如何在 舰队基地.io/docs/ui更改.
发展
pnpm install --frozen-lockfile
pnpm start # serve the playground / dummy app
pnpm test # lint + the full suite
pnpm run test:ember # the suite on its own
pnpm run lint # eslint, ember-template-lint, stylelint
pnpm run build # production build
在一个组件上运行子集 :
pnpm exec ember test --filter="Integration | Component | button"
测试和覆盖范围
套房以无头Chrome通过Testem运行. 覆盖范围设于 100%的第一党
addon/ 来源 - 声明、分支、职能和线条,并在CI中执行:
pnpm run test:coverage # run the suite with coverage
pnpm run coverage:check # enforce the gate
捐款
见 捐款 向导.
许可证
凭 GNU 阿费罗通用公共许可证 v3.0 或以后。 。 。 .