@akcelik/ strct
一个独立的角构件库,围绕一个 标记的多盘 主题系统。每件事物都由 CSS 定制属性驱动,所以一个 属性互换重新显示整个库的外观.
- 3个调色板 - 北极、安伯、塞奇
- 2个模式 - 黑暗,光线
- 独立的组件,信号输入,
OnPush到处都是 ControlValueAccessor每个窗体控件上的支持- 没有运行时间 CSS 框架依赖性
- WCAG-AA文本对比 · OS- 了解它们 ·
prefers-contrast编号 :prefers-reduced-motion荣誉
安装
npm install @akcelik/strct
@angular/core, (中文(简体) ), @angular/common, (中文(简体) ), @angular/forms, (中文(简体) ),
@angular/platform-browser 财务报告和审定财务报表 @angular/router 是同伴的依赖关系
(Angular 22+) (英语). 保持自己的副本补丁—— npm audit 在你的应用程序是什么
看他们.
搞一个本地建筑? 安装已包装的柏油球 (单位:千美元)
ng build strct && npm pack dist/strct,则npm i ../akcelik-strct-x.y.z.tgz(中文(简体) ) 而不是一个file:symlink — 一个 symlined 依赖解决自己的副本@angular/core,可以绊倒InputSignal品牌不匹配(TS2551) 角补丁版本.
主题设置
在您的全局样式表中导入主题( 船名 + 基准重设 +) 窗体控制样式 :
// styles.scss
@use '@akcelik/strct/styles/theme';
主题 自控其字体 (DM Sans + JetBrains Mono, OFL)——他们作为
woff2 下级 styles/fonts/ 并参考 @font-face,所以没有
外部请求和没有其他要加载的内容.
在文档根上设置方案( 或让) StrctThemeService 管理它:
<html data-palette="arctic" data-theme="dark"></html>
import { StrctThemeService } from '@akcelik/strct';
const theme = inject(StrctThemeService);
theme.setPalette('ember'); // 'arctic' | 'ember' | 'sage'
theme.setMode('light'); // 'dark' | 'light' (persisted to localStorage)
theme.toggleMode();
默认 StrctThemeService 遵循操作系统的光/暗
偏好 (prefers-color-scheme)——并追踪其活性——直到用户作出
明确的选择,然后坚持下去,获胜.
把现成的切换器扔到任何地方:
<strct-theme-switcher />
构成部分
仅导入您使用的东西—— 每个组件都是独立的 .
| 区域 | 构成部分 |
|---|---|
| 版式 | strct-shell, (中文(简体) ), strct-header, (中文(简体) ), strct-footer, (中文(简体) ), strct-vertical-nav, (中文(简体) ), strct-nav 编号 : strct-nav-item, (中文(简体) ), strct-rail (可拼接图标导航), strct-login |
| 控件 | button[strct-button], (中文(简体) ), strct-button-group, (中文(简体) ), strct-speed-dial, (中文(简体) ), strct-badge, (中文(简体) ), strct-tag, (中文(简体) ), strct-avatar, (中文(简体) ), strct-progress, (中文(简体) ), strct-spinner, (中文(简体) ), strct-skeleton |
| 表面 | strct-card (+标题/块/脚), strct-accordion, (中文(简体) ), strct-tabs, (中文(简体) ), strct-tree, (中文(简体) ), strct-modal, (中文(简体) ), strct-drawer (对接板), strct-dropdown (+ 数) strct-submenu, (中文(简体) ), [strctContextMenu] (数据驱动), strct-wizard, (中文(简体) ), strct-divider |
| 导航 | strct-breadcrumb 编号 : strct-breadcrumb-item, (中文(简体) ), strct-pagination |
| 表单 | strctInput, (中文(简体) ), strct-checkbox, (中文(简体) ), strct-toggle, (中文(简体) ), strct-radio-group 编号 : strct-radio, (中文(简体) ), strct-range, (中文(简体) ), strct-combobox, (中文(简体) ), strct-cascade-select, (中文(简体) ), strct-datepicker, (中文(简体) ), strct-password, (中文(简体) ), strct-file, (中文(简体) ), strct-color-picker, (中文(简体) ), strct-rating, (中文(简体) ), strct-chips, (中文(简体) ), strct-input-otp, (中文(简体) ), strct-knob, (中文(简体) ), strct-input-mask |
| 数据 | strct-table, (中文(简体) ), strct-datagrid (类型 / 选择可扩展行 / 细节 / 批次 栏 / 每行 kebab 菜单 / 可调整 / 列选择 ), strct-timeline 编号 : strct-timeline-item, (中文(简体) ), strct-stack 编号 : strct-stack-item |
| 图表 | strct-sparkline, (中文(简体) ), strct-chart (行/区/栏), strct-donut, (中文(简体) ), strct-gauge |
| 反馈 | strct-alert, (中文(简体) ), strctTooltip, (中文(简体) ), strct-signpost, (中文(简体) ), strct-toast-outlet + 键 StrctToastService |
| 基金会 | strct-icon (数据中心图标设置 + 状态) badge, (中文(简体) ), strct-theme-switcher |
实例
<button strct-button variant="primary">Save</button>
<button strct-button variant="outline" size="sm">Cancel</button>
<strct-badge status="success">Active</strct-badge>
<strct-modal [(open)]="show" title="Confirm">
Body…
<ng-container strctModalFooter>
<button strct-button (click)="show = false">Cancel</button>
<button strct-button variant="primary" (click)="show = false">OK</button>
</ng-container>
</strct-modal>
<input strctInput placeholder="Name" [(ngModel)]="name" />
<strct-checkbox [(ngModel)]="agree">I agree</strct-checkbox>
设计符号
组件只参考这些 CSS 变量—— 从未硬编码的颜色 :
--bg-0..--bg-a 表面 − --hdr 标题 · --b1/--b2/--b3 边框
--t1..--t4 文本 ・ --inv 反向 --acc (+ 数) --acc-m/-s/50/30/18(口音 )
--success / --warning / --critical 语义( +) *-bg· --sh / --shh 阴影 --sb 卷轴条.
无障碍和眼睛舒适
对照WCAG和显示-工程学/视觉科学进行审查,以限制眼压 在长的全天控制台会话中:
- WCAG AA 文本对比 —— 说
--t1/--t2/--t3均在每组中达到AA(≥ 4.5:1) 调色板和模式,保留t1 > t2 > t3等级. - 了解操作系统 接下来
prefers-color-scheme直到一个明确的选择. prefers-contrast: more——加强边界,文字和重点环接请求.prefers-reduced-motion——动画崩溃为即时状态变化.- 12px 类型大小层, 1.5 车体行高,被软化(非纯-白)的光表面.
许可证
麻省理工学院 塞尔坎·阿克塞利克