@ ferrlabs/ ui-ng (英语)
FerrLabs设计系统—— 角点 22 组件(独立、信号、无区域).
亲兄弟 @ferrlabs/ui-react:相同的设计语言,同符. 视觉
平等来自共享、框架不可知
@ferrlabs/ui-foundation (移动 CSS 变量 + 尾风)
)—— ui-ng 上面没有自己的设计价值
--color-accent, (中文(简体) ), --color-fg, (中文(简体) ), --font-mono等 (中文(简体) ).
现况:妇女方案. 脚手架 + 第一种原始(
Button) (中文(简体) ). 其余部分 ~40个原始人 + app 铬在水面上被移植 反应 – 角移. 在移民的尽头 这成了唯一的 组件库并更名为@ferrlabs/ui。 。 。 .
安装
pnpm add @ferrlabs/ui-ng @ferrlabs/ui-foundation
一次拉出符号( 如在您的全局样式表或 Tailwind 条目中):
@import '@ferrlabs/ui-foundation/styles/tokens.css';
使用量
import { ButtonComponent } from '@ferrlabs/ui-ng';
@Component({
imports: [ButtonComponent],
template: `
<flr-button variant="primary" size="md" (pressed)="save()">Save</flr-button>
<flr-button variant="ghost" [loading]="saving()">Saving…</flr-button>
<flr-button variant="danger" href="/delete">Delete</flr-button>
`,
})
export class Demo {}
已版本文件( A)@ferrlabs/ui-ng/docs(中文(简体) )
品牌-不可知的版本-文档布局,由产品站点共享.
DocsLayoutComponent 仅使 docs 网格(边栏+版本切换器,
可滚动主机,带有预览/下页传呼机,在这张TOC上)和提供的项目
标记为 a .ferr-prose 通过文章 <ng-content>。它是无外壳的——包接
在你自己的产品外壳里 导航、版本、语言和 URL 部分
输入,所以内容留在消费者身上;这里只有结构船.
import { DocsLayoutComponent, DocSection, DocVersion } from '@ferrlabs/ui-ng/docs';
const NAV: readonly DocSection[] = [
{ label: 'Getting started', items: [{ label: 'Introduction', slug: 'introduction' }] },
];
const VERSIONS: readonly DocVersion[] = [{ slug: 'current', label: 'v5' }];
@Component({
imports: [DocsLayoutComponent],
template: `
<flr-docs-layout [nav]="nav" [versions]="versions" slug="introduction" lang="en">
<!-- rendered markdown -->
</flr-docs-layout>
`,
})
export class DocsPage {
protected readonly nav = NAV;
protected readonly versions = VERSIONS;
}
一次导入下标内容样式表( 它的样式) .ferr-prose, (中文(简体) ),
.ferr-aside, (中文(简体) ), .ferr-card, (中文(简体) ), .ferr-tabs 所有CSS -var驱动:
@import '@ferrlabs/ui-ng/docs/styles.css';
标记下和代码( E)@ferrlabs/ui-ng/markdown(中文(简体) )
语法高亮的代码和静态的 GFM 渲染, 在一个次要的切入点 主要条目不受这些依赖关系的影响。 仅在以下情况下安装可选对等点: 您导入它 :
pnpm add marked marked-highlight prismjs
import { CodeComponent, MarkdownComponent } from '@ferrlabs/ui-ng/markdown';
<flr-code [code]="snippet" language="rust" /> <flr-markdown [source]="report" />
flr-code: 投入code(所需)和language。未知或缺失的语言 转换为隐藏的纯文本。 标题显示语言和副本按钮.flr-markdown: 输入sourceGFM(表格、任务清单、罢工), 突出显示有栅栏的代码,并将结果通过Angular的[innerHTML]消毒剂,所以剧本和源头上的事件处理器被剥去. 链接获得rel="noopener noreferrer"。 。 。 .- 语言:javascript,打字,json, bash, rust, python, yaml, toml, sql,
diff, markdown, css, markup (html/xml), go, docker (中文(简体) ). 常用别名( E)
ts, (中文(简体) ),sh, (中文(简体) ),yml, (中文(简体) ),rs, (中文(简体) ),html,.)决心. - 他们:
--color-code-*来自@ferrlabs/ui-foundation(bg、fg,评论, 关键字、字符串、数字、函数、操作符、点、属性、插入、, 删除),带有光和暗等值. 不需要样式表导入;样式船 包括各组成部分ViewEncapsulation.None范围.flr-code财务报告和审定财务报表.flr-markdown主机类,使所渲染的HTML可以被样式化.
公约
- 独立 组件,无 NgModules.
- 信号输入 (单位:千美元)
input()和 信号输出 (单位:千美元)output()) (中文(简体) ). ChangeDetectionStrategy.OnPush到处都是(应用程序运行) 无区) (中文(简体) ).- 选择器为前缀
flr-。 。 。 . - 构建 :
pnpm --filter @ferrlabs/ui-ng build(ng-packagr → Angular 包格式).