阿拉克利斯大学
一个完整的、可主题的设计系统 阿拉克里斯语Name 没有别的了。 没有其它运行时间的依赖性,没有构建步骤,没有CSS框架——71个组件,一个三级的令牌系统,一个用一个样式表书写重塑整页的主题引擎,以及一个被记录的运动层.
材料设计是默认的. 你的设计系统才是重点. 每个可视化的决定都通过符号来流出,你可以在三个层次上超越——从"改变品牌颜色"(一行)到"这已经不是材料了".
标记是真实的自定义元素,因此在平版HTML和React,Vue,Svelte,Angular,Rails,Django,以及内部工作 阿拉克里斯- 前进 - 任何地方,一个标签.
安装
npm install @alacris/ui
这拉入 @alacris/core 还有 请不要在同一页上从一个CDN上再装入一份阿拉克里斯的第二份副本——两份意味着两个反应图,更新停止跨越边界.
import { applyTheme } from '@alacris/ui';
applyTheme({ seed: '#0b57d0' });
<ui-button>Hello</ui-button>
<ui-text-field label="Email" clearable></ui-text-field>
<ui-switch label="Dark mode"></ui-switch>
导入 @alacris/ui 登记每个组件。 对于一个更小的页面,仅导入您使用的内容——每个组件模块都是自成一体的:
import { applyTheme } from '@alacris/ui/theme';
import '@alacris/ui/components/ui-button.js';
import '@alacris/ui/components/ui-text-field.js';
applyTheme({ seed: '#0b57d0' });
没有捆绑
公布的成套材料是简单的无害环境管理。 将导入地图指向一个被钉住的阿拉克里斯(UI源使用的唯一光谱符)的 CDN 构建, 并在此包上:
<script type="importmap">
{
"imports": {
"@alacris/core": "https://cdn.jsdelivr.net/npm/@alacris/[email protected]/dist/alacris.js",
"@alacris/ui": "https://cdn.jsdelivr.net/npm/@alacris/[email protected]/src/index.js",
"@alacris/ui/theme": "https://cdn.jsdelivr.net/npm/@alacris/[email protected]/src/theme/index.js",
"@alacris/ui/components/": "https://cdn.jsdelivr.net/npm/@alacris/[email protected]/src/components/"
}
}
</script>
<script type="module">
import { applyTheme } from '@alacris/ui';
applyTheme({ seed: '#0b57d0' });
</script>
<ui-button>Hello</ui-button>
永远不要混合两个版本 @alacris/core 在一页上——两本表示两个反应图.
他们
import { createTheme, applyTheme, setScheme, toggleScheme } from '@alacris/ui/theme';
applyTheme({ seed: '#6750a4' });
applyTheme({ seed: '#b3261e', density: -1 });
setScheme('dark');
toggleScheme();
applyTheme(createTheme({
colors: { primary: '#0b57d0', tertiary: '#00695c' },
typography: 'google-sans',
shape: { radius: 0.5 },
overrides: { light: { 'color-surface': '#faf7f2' } },
}));
applyTheme 写入 一个 文档级别样式表 --ui-* 自定义属性,并在下次调用时替换。 方案在此之后切换 data-ui-scheme 打开 <html> (单位:千美元)light | dark | auto) (中文(简体) ).
有三个地方可以干预,从最宽到最窄:
- 重新确定系统的主题 —— 说
applyTheme({ seed, shape, … })每一个部分如下。 黑暗模式是自动生成的. - 重新剥光一个组件类型 —— 说
ui-button { --ui-button-radius: 4px; }。 。 。 . - 接触一个实例 —— 说
ui-dialog::part(surface) { backdrop-filter: blur(8px) }。 。 。 .
全向导 : 医生/医生。 。 。 .
动议
import { animate, fx, presence, withFlip } from '@alacris/ui/motion';
animate(el, fx.slideInUp, { duration: 'medium2', easing: 'emphasizedDecelerate' });
html`${presence(open, () => html`<div class="sheet">…</div>`, {
enter: fx.slideInUp, exit: fx.slideOutDown,
})}`;
时间和放松是象征,所以主题 motion.scale 管理CSS的过渡和JS动画,以及 prefers-reduced-motion 将自动获得荣誉。 全向导 : 文档/动因。 。 。 .
表单
命名控件( N)ui-text-field, (中文(简体) ), ui-switch, (中文(简体) ), ui-checkbox, (中文(简体) ), ui-select,.)是形式关联自定义元素. 给一个组件 a name 并提交、重新发送和随后提交 <fieldset disabled> 像个土生土长的土地.
移动视图
对话框、床单、抽屉和模式取日期器 position: fixed; inset: 0 覆盖大小 可见 视图, 不 100vh (电话和平板电脑上显示的是 URL 栏的高度) 100vh 覆盖从屏幕下方运行). 只有身体卷轴,所以头条和动作都放在屏幕上;抽屉将内容滚动到一个可选的被绑上 footer 插槽 .
页面视图元中的两行完成此任务:
<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
interactive-widget=resizes-content使屏幕上键盘收缩了布局的取景口(Chrome on Android, 108+),所以打开的上覆收缩了上面没有脚本. 没有它,组件就跟着window.visualViewport将自己置于键盘上方;这也覆盖忽略了键的浏览器.viewport-fit=cover让页面在节点和主指标下绘制。 叠加后由env(safe-area-inset-*);没有它,那些被套入是0,没有什么变化.
自己的顶部可以使用同样的管道: fitToViewport(el, host) 写入 --ui-vv-top 编号 : --ui-vv-bottom 打开 el 键盘向上滚动,并将焦距带回视图; visibleBounds() 给可见带用于定位.
入境点
| 导入 | 这是什么 |
|---|---|
@alacris/ui | 登记每个组件;再出口主题、运动、符号、公用事业 |
@alacris/ui/theme | createTheme, (中文(简体) ), applyTheme,方案切换 |
@alacris/ui/motion | animate, (中文(简体) ), fx, (中文(简体) ), presence, (中文(简体) ), withFlip, (中文(简体) ), ripple |
@alacris/ui/tokens | sys 和标志性引擎 |
@alacris/ui/components/ui-button.js | 一个元素,登记为副作用 |
组件模块具有副作用(它们叫 define()) (中文(简体) ). 主题、动作和符号模块没有.
在此存储库中
这个包裹住在 ui/ 会 议 日 程 和 议 程 Alacris 重传 因此库和设计系统可以一起开发. 他们 单独出版数字 : @alacris/ui 拥有自己的版本, changelog, 和 npm 发行. 仅更改此文件夹不剪切 Alacris 库释放的约定 . starter/ 在同一repo中是使用示例和安装向导,而不是这个软件包.
ui/
src/ the published modules
types/ hand-written .d.ts
demo/ kitchen-sink app (not published)
docs/ theming, motion, component catalog
test/ node smoke tests
CONVENTIONS.md rules every component follows
现场目录是 页:1 ——每个组件外加一个主题操场,不需要克隆.
从 repo 的克隆:
npm install
npm run demo # kitchen sink: http://localhost:5173/ui/
# starter app: http://localhost:5173/starter/
cd ui && npm test
cd ui && npm run test:chrome # overlay geometry in headless Chrome at phone/tablet sizes (skips without Chrome)
许可证
麻省理工学院