SuperAPI AI 工具集

fineui-layout

前端与建站

查看项目

更新于 10-16 06:52

技能介绍

用途:FineUI 布局技能,帮助开发者配置容器的 Layout 属性,决定子控件在容器内如何排布,并让布局随浏览器窗口或屏幕尺寸自适应。容器组件本身见 fineui-panel,整页骨架见 fineui-foundation 的 page-scaffold.md。

主要布局类型:Container(默认,子控件按自身高度依次排列);Fit(唯一子控件铺满容器);Region(子面板按 RegionPosition 定位 Top/Left/Center/Right/Bottom,Center 必填);HBox/VBox(弹性盒子,用 BoxFlex 分配空间);Block(响应式栅格,子项 Block/BlockSM/BlockMD/BlockLG 取 1–12,行内和为 12,超出换行);Column(官方推荐改用 HBox);Anchor(锚点布局,表单默认);另有 InlineBlock、Table、Absolute、Accordion、Card。

使用方式:先确定写法不混用。F.js 的 Box 布局参数放在 layout 对象内,如 layout: { type: 'hbox', align: 'stretch', space: 10 },子项弹性值用 flex;C# 用 Layout="HBox" / BoxFlex;Core-MVC 用 Fluent API;Java 属性名转小写连字符、布局值与枚举保持 PascalCase。HBox/VBox 弹性子项用 BoxFlex,固定子项用 Width/Height;弹性子项内放 Grid 可加 Layout="Fit"。Region 的 Center 必填,左右用 Width、上下用 Height,RegionSplit="true" 加拖动条。视口自适应可用根面板 IsViewPort="true",或 Pro 的 <f:PageManager AutoSizePanelID="Panel1">。

限制与约束:Fit 时容器只应有一个子控件;Block 行内总和为 12;间隔统一用 BoxConfigSpace,末项不追加间隔,四周留白用 BodyPadding;不要与 InlineBlock 混淆。API 不确定时应查官方在线 API 或 JSDoc,不编造接口。

官方 API:JS https://fineui.com/js/api/ · Pro https://fineui.com/pro/api/ · Core https://fineui.com/core/api/。