@ cratis/ scene. blueprint. 默认
默认 蓝图 对于场景:应用程序外壳会选择一次,屏幕和 进入它们内部的对话框模板,填补它们的空位的组件,以及两个主题.
面向用户的文档 Documentation/blueprints/。 。 。 .
该文件是撰稿人的说明:资料来源所遵循的惯例及其背后的理由.
版式
blueprint.default/
├── defaultBlueprint.ts the ScenePackage manifest + the ScenePackageBundle
├── defaultBlueprintComponents.ts the ComponentRegistry - every bare name to its shell component
├── ComponentName.ts the bare names this blueprint declares
├── packageName.ts the name a ui profile lists it under
├── configuration/ the layout-mode state machine, its React provider and persistence
├── layouts/ the two Layout definitions and the flow builders behind them
├── shell/ the sixteen shell components, and layout.css
├── gallery/ the screen and dialog templates, the screens, and preview helpers
├── themes/ the two themes and the provider that applies them
└── for_*/ BDD specs beside the code they specify
这四样东西,为什么是四
| 概念 | 这是什么 | 有多少个 |
|---|---|---|
| 版式 | 应用程序的基础导航外观 | 从两个申请中选出一个 |
| 屏幕模板 | 可重复使用的形状 内部 模块/ 特性/ 切片级布局 | 二十四岁 |
| 对话框模板 | 相同,用于叠加 - 不 fitsSlot,因为对话框没有占用父槽 | 3个 |
| 屏幕 | 实例:命名其布局和模板,并提供内容 | 二十四岁 |
屏幕模板说明它所属位置, 以 fitsSlot而不是被任何宿主告诉.
这个规则在每一个深度都组成:一个模块的模板符合布局 content,一个特征的适合
设置模块声明的档位,切片符合功能声明的档位. nestScreenTemplates 折叠链条从
内出,和 ModuleWorkspace → FeatureSection → SliceSection 不存在,而不是
仅说明.
区域(地块)
topbar, (中文(简体) ), sidebar, (中文(简体) ), menu, (中文(简体) ), breadcrumb, (中文(简体) ), content, (中文(简体) ), footer, (中文(简体) ), rightPanel, (中文(简体) ), configPanel, (中文(简体) ), aside。 。 。 .
坂井建立上巴/侧巴/菜单/内容/脚;溢价PrimeTek模板添加面包屑b
和右面板; aside 是一个满页屏幕的分块的品牌。 他们都在这里,
因为一个只覆盖自由模板所在区域的蓝图 迫使任何想要其他的都有一个叉子.
SlotName 是布局、模板和 shell 组件所使用的一个enum,因为一个已填入的槽
贝壳从不读出任何内容 也没有报告.
布局模式
8,加上无人选择的移动系统。 阶级词汇为PrimeTek的,不变.
| 模式 | 包装类 | 它会做什么 |
|---|---|---|
| 静态 | layout-static | 侧边栏停靠于 18rem; 内容被匹配边距所驱动, 从未覆盖 |
| 重叠 | layout-overlay | 侧边栏停放在屏幕上; 打开时将它浮在面具后的内容上 |
| 斯莱姆 | layout-slim | 5rem 图标唯一的铁路, 圆形按钮; 子菜单弹出在铁路的宽度 |
| 滑动+ | layout-slim-plus | 7rem 栏杆,每个标签都放在其图标下 |
| 压缩 | layout-compact | 5rem有平方按钮的铁路;上行栏也由铁路宽度转动 |
| 水平 | layout-horizontal | 侧边栏去 position: static 进入顶端栏作为现行; 子菜单下移 |
| 启示 | layout-reveal | 完全面板从左侧翻译到4.25rem图标条后;在内容上盘旋滑行;取而代之的是一针将内容推出 |
| 绘图器 | layout-drawer | 一条5.25雷姆的铁路 动画其宽度 满地徘徊 - 显示幻灯片, 抽屉会长出 - 并用同样的方式针出 |
州级: layout-static-inactive, (中文(简体) ), layout-overlay-active, (中文(简体) ), layout-sidebar-active, (中文(简体) ),
layout-sidebar-anchored, (中文(简体) ), layout-mobile, (中文(简体) ), layout-mobile-active菜单:
layout-menu-light|dark|primary颜色方案 : layout-color-scheme-light|dark。 。 。 .
移动不是一个模式. 在991px或以下时 effectiveLayoutMode 返回时 overlay 无论是什么
选择,模式拾取器会自行禁用,并说原因,选择被保留,所以当它返回
窗口增长。 断点导出为 mobileBreakpoint 因此调整听众和媒体查询大小
无法不同意.
国家所在的地方
一个 LayoutConfigState,一个 LayoutConfigProvider,一个 useLayoutConfig每一次过渡都是纯粹的
函数在记录中layoutConfigTransitions.ts),所以整个国产机器可以测试,没有
反应,一个函数将状态变为 CSS(layoutWrapperClasses) (中文(简体) ).
继续优惠 localStorage 下级 cratis.scene.blueprint.default: 模式、菜单主题、颜色
方案、主题名称和指针。 故意 没有 侧边栏是否碰巧打开,是否
指针在上面,或者视门是否狭窄 - 恢复那些产生壳的外壳
没有人选择。 所有回读的都经过验证 与enums, 因为存储寿命超过
写它和未知模式的软件包版本在包装上设置了一个没有规则匹配的类.
调值词汇
十三个令牌, 匹配 @cratis/scene.primereact确切的表。 每个软件包增长的词汇
是一个无法依赖的软件包.
primary.color, (中文(简体) ), primary.contrastColor, (中文(简体) ), surface.background, (中文(简体) ), surface.card, (中文(简体) ), surface.border, (中文(简体) ),
surface.hover, (中文(简体) ), surface.overlay, (中文(简体) ), text.color, (中文(简体) ), text.mutedColor, (中文(简体) ), highlight.background, (中文(简体) ),
highlight.color, (中文(简体) ), content.borderRadius, (中文(简体) ), focus.ring。 。 。 .
layout.css 别名 --scene-* 自定义属性为 --layout-* 本地人一次,在顶部,没有
以下规则a --scene-* 名称 - 相同的桥型 @cratis/components 技术用途
--cratis-* 层。 凌驾于外观意味着压倒一切的象征 绝不编辑规则.
样式表是一个平面 .css 文件而不是从 TypeScript 导入, 因为此 repo 的滚动
配置没有 CSS 插件,添加一个不是此软件包的调用 。 主机进口
@cratis/scene.blueprint.default/styles 一次; 故事书在 .storybook/preview.tsx。 。 。 .
主题属性
| 主题 | 作者 | 链接 | 许可证 |
|---|---|---|---|
| 场景默认光 | 克拉蒂斯语Name | https://cratis.io (英语) | 麻省理工学院 |
| 场景默认黑暗 | 克拉蒂斯语Name | https://cratis.io (英语) | 麻省理工学院 |
两种调色板都原创到 Cratis - 一个中性灰色坡道,带有indigo口音 - 没有从任何语言中采用
已有预设,因此 author 说,而不是被留空。 一个有空的主题
归属读作"没人检查过" 一旦调色板被解开 没有它的功劳 没人知道
后来是哪一个 以后通过的任何文件都必须填满 author, (中文(简体) ), authorUrl 财务报告和审定财务报表 license
从源软件包本身的LICENSE文件,经过验证而不是假设.
两个主题都声明 compatibleWith: ['core', 'Cratis.Blueprint.Default', 'PrimeReact', 'Cratis.Components', 'Tailwind']。 。 。 . core 以下列目的列入清单: incompatiblePackages 没有暗示
豁免,所以一个主题省略了它 据报道它不兼容 core 包含所有列出的配置文件
它 - 这是每一个简介.
从其他地方借用的构成部分名称
屏幕模板名称组件 赤线 名称,所以 resolveComponentName 选择软件包
模板保持可移植性. gallery/dependencyComponentNames.ts 列出画廊借用的每个名字;
每一个都根据自有软件包的自有清单进行核对(primeReactPackage.ts, (中文(简体) ),
cratisComponentsPackage.ts)而不是假设,一个 spec解决了所有它们.
两个名字 一个仪表盘显然想要 - chart 财务报告和审定财务报表 fileUpload - 由 也没有 软件包,所以
模板使用存在的( 每月数字表; “变化相片” 按钮旁的图像)
而不是引用一些会变成红色占位符的东西.
menu, (中文(简体) ), breadcrumb 财务报告和审定财务报表 sidebar 由PrimeReact和本蓝图宣布。 这是超能力
优先级按设计工作:本蓝图在剖面图的上下级优先级列表中排到最后,所以它
shell 版本在PrimeReact 仍然可以到达时赢得空名 PrimeReact.menu。 。 。 .
预览
GalleryScreenPreview 一个画廊屏幕穿过真实路径 - 真实 Screen真实
resolveComponentName真实 SceneElementView,真实的注册。 里面没有什么只是预览的代码路径 .
它决心反对 galleryProfile 当其登记册执行每个配置文件声明的软件包时(PrimeReact by
画廊的每个部件都从它那里借来 galleryPreviewProfile 否则,所以部分捆绑
使什么是存在的而不是占位符。 只有明确列出的主机 PrimeReact 装入这些部件。 一个配置命名
仅限 Cratis.Blueprint.Default 解决 shell 和 Cratis 组件, 使基础模板,
并留下模板,要求模板目录中的可选软件包不兼容.
Shell 控件和可选部件
该 shell 导入 Cratis 组件用于其图标按钮和相机 。 它的配置器使用端置的Cratis Dialog. 它的弹出菜单直接使用 React Aria 是因为 Cratis组件有一个动作菜单栏,但没有弹出菜单. 面包屑也用来 直接反应 Aria : 导航必须保留 Alt 选择和修改/ new-tab 点击的激活事件, cratis Breadcrumbs 目的地召回并不暴露。 贝壳图标是 SVG 而不是一个 已安装图标字体。 布局模式、断点、持久性、导航政策和主题切换 不变.
贝壳和地基不需要 PrimeReactProvider 或部件预设。 可选 actionButton.icon
属性使PrimeIcons类具有装饰性;使用它的主机提供了PrimeIcons字体.
按钮的标签仍然是其无障碍名称. 故事书没有应用部件提供者、预设或字体
在全球。 预览可选部件的故事拥有其提供者、预设和字体导入.
着陆、模块工作空间、地物分科和切片分科使用蓝图制头和控制 比库所选的卡片、文本和按钮。 它们的初级和二级行动保持其重点; 着陆的登录和启动动作保留了目标屏幕导航. 特性科保留其 (原始内容存档于2013-10-12). PrimiIcons. 标题为一次,包括完整的部件登记册.
旧的商业模板仍然借用部件 scene.primereact他们 templateProvenance 编辑
图片库依赖性词汇在本地声明此要求; 主机在其用户界面中选择软件包
当它选择这样的模板时配置文件。 外壳布局只声明自己的组件要求.
主题相容性元数据仍然支持两种主机.
故意没有建造
- 没有路由器.
menuItem财务报告和审定财务报表breadcrumb制成散列路线(#/Dashboard)对屏名. A 类 带有真实路由器的主机将外壳包裹并重写; 散列使相册可导航, 无 路由器,这是预览需要的. - 没有部件适配器 . 每个部件的模板位置来自 PrimeReact 或 Cratis 组件 。 A 类 它自己运出桌子的蓝图 将是一个装有蓝图清单的组件库.
- 没有布局安排渲染器. 排版图
FlowArrangements 由真实值评估evaluateFlowArrangement,但外壳以CSS定位其区域. 绘制 通常的安排是Scene#4的工作,在上方分层而不是在这里折叠. - 没有
FreeformSlotArrangement。 。 。 . 两种布局都回流; 两种布局都没有固定位置的变体值 表示绝对位置.
此软件包外已知的缺口
yarn install自文件夹重新命名以来, 尚未运行 从layout.default所以亚恩的 工作空间状态仍然为旧路径命名yarn build编号 :yarn test失败Package for @cratis/scene.blueprint.default@workspace:... not found in the project运行yarn install一次; 在那之前, 大门会穿过npx tsc -b, (中文(简体) ),npx rollup -c ./rollup.config.mjs, (中文(简体) ),npx vitest run, (中文(简体) ),npx eslint --cache --quiet .财务报告和审定财务报表npx storybook build,这是什么g:*剧本引用.Source/JavaScript/blueprint.default不在根头tsconfig.jsonreferences(现在列出)tailwind, (中文(简体) ),primereact财务报告和审定财务报表components),所以是一个根npx tsc -b不建造它.FlowRow, (中文(简体) ),FlowColumn(单位:千美元)FlowGrid没有columns在结构上完全相同Scene.Model, (中文(简体) ), 因此消费者无法从一列中分出一行值。 建造者在layouts/flowBuilders.ts保留 页:1 意图 可在申报现场辨认grid()总是设定columns但模型间隙是 真实的.
盖茨
npx tsc -b # from the repository root
yarn build # from this package
yarn test
yarn lint:ci
yarn build-storybook