fineui-layout

Name: fineui-layout
Author: sanshi

github.com/sanshi设计与 UI545 次安装1 天前更新

代码仓库

关于 fineui-layout

fineui-layout 是用于配置 FineUI 容器内子控件排布方式的开发技能，适用于需要组织页面内容并适配窗口尺寸的项目。它汇总 Fit、Region、HBox/VBox 和响应式栅格等布局类型及其配置要点。

主要功能

01介绍多种容器布局类型
02配置 Fit 单控件填充布局
03设置 Region 区域位置
04使用 HBox/VBox 弹性分配空间
05配置响应式栅格与锚点布局

适用场景

01让 Grid 或表单填满容器
02安排页面的上下左右区域
03组合固定宽度与弹性面板
04按屏幕尺寸调整栅格排列

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sanshi/fineui-skills --skill fineui-layout

安装后在 Claude Code 中输入/fineui-layout确认已加载。

附带文件references/hbox-vbox.mdreferences/layout-types.md

详细介绍

来自项目 README

FineUI 布局技能（Layout System）

本技能讲容器内部子控件如何排布（Layout 属性）。容器组件本身（Panel/选项卡/手风琴）见 fineui-panel；整页骨架（ViewPort + Region + PageManager）见 fineui-foundation 的 page-scaffold.md。

何时使用（When to Use）

选并配置某种布局：填充、区域、弹性盒子、响应式栅格、分栏
让布局随浏览器窗口/屏幕尺寸自适应

布局类型速查（`Layout` 属性）

值	用途	详见
`Container`（默认）	子控件按自身高度依次排列	—
`Fit`	唯一子控件铺满容器（放一个 Grid/Form 常用）	layout-types
`Region`	区域布局：子面板 `RegionPosition` 定位 Top/Left/Center/Right/Bottom（Center 必填）	layout-types
`HBox` / `VBox`	弹性盒子（重点），子用 `BoxFlex` 分配空间	hbox-vbox
`Block`	响应式栅格：子用 `Block/BlockSM/BlockMD/BlockLG`（1–12，行内和 12）	layout-types
`Column`	列布局（官方推荐改用 HBox）	layout-types
`Anchor`	锚点布局（表单默认），子用 `AnchorValue`	layout-types
`InlineBlock` / `Table` / `Absolute` / `Accordion` / `Card`	行内块 / 表格 / 绝对 / 手风琴 / 卡片	—

速览：HBox 左固定 + 右自适应（最常用弹性布局）

// ① F.js
{ type: 'Panel', layout: { type: 'hbox', align: 'stretch', space: 10 }, items: [
    { type: 'Panel', width: 200, title: '左固定' }, { type: 'Panel', flex: 1, title: '右弹性' }
] }

<%-- ② Pro / ④ Core-TagHelper --%>
<f:Panel runat="server" Layout="HBox" BoxConfigAlign="Stretch" BoxConfigSpace="10">
    <Items><f:Panel Width="200px" Title="左固定" runat="server" /><f:Panel BoxFlex="1" Title="右弹性" runat="server" /></Items>
</f:Panel>

// ③ Core-MVC（Fluent API）
@(F.Panel().Layout(LayoutType.HBox).BoxConfigAlign(BoxLayoutAlign.Stretch).BoxConfigSpace(10)
    .Items(F.Panel().Width(200).Title("左固定"), F.Panel().BoxFlex(1).Title("右弹性")))

<!-- ⑤ FineUI.Java（Thymeleaf 方言：标签/属性全 kebab-case，布局值 layout="HBox" 保持 PascalCase）-->
<f:panel layout="HBox" box-config-align="Stretch" box-config-space="10">
    <f:items>
        <f:panel width="200" title="左固定"></f:panel>
        <f:panel box-flex="1" title="右弹性"></f:panel>
    </f:items>
</f:panel>

参考文档（Documentation Reference Files）

文件	何时读
references/hbox-vbox.md	HBox / VBox 弹性盒子（重点）：BoxFlex、对齐、常见组合
references/layout-types.md	Fit / Region / Block / Column / Anchor + 视口自适应

约束与规则（Constraints & Rules）

先定写法、不混用：F.js 的 Box 布局参数放在 layout 对象内，例如 layout: { type: 'hbox', space: 10 }，子项弹性值用 flex；C# 用 Layout="HBox" / BoxFlex；Java 属性名用小写连字符，布局值和枚举值保持 PascalCase。
Fit 只放一个子控件：Layout="Fit"（Java layout="Fit"）时容器只应有一个子控件（它铺满）。
Region 的 Center 必填：区域布局必须有一个 RegionPosition="Center"（Java region-position="Center"）的面板占满剩余；左右用 Width、上下用 Height；RegionSplit="true"（Java region-split="true"，分隔条宽度 region-split-width="3"）加拖动条。Java 另有便捷控件 <f:region-panel>/<f:regions>/<f:region region-position=...>（等价于 <f:panel layout="Region"> + 子 <f:panel region-position=...>）。
视口自适应两种入口：根面板 IsViewPort="true"（Java is-view-port="true"），或 Pro <f:PageManager AutoSizePanelID="Panel1">。
Block 一行总和 12：子项 Block/BlockSM/BlockMD/BlockLG（Java block/block-sm/block-md/block-lg）值 1–12，行内和为 12（超出换行）；间距 BlockConfigSpace（Java block-config-space）；InlineBlock 是另一种布局，别与 Block 混淆。
HBox/VBox 弹性用 BoxFlex（Java box-flex）：弹性子项 BoxFlex，固定子项用 Width/Height；"撑满 + 放 Grid"给弹性子项加 Layout="Fit"。见 references/hbox-vbox.md。
绝不编造 API：不确定就查官网 API 或 F/doc/ JSDoc；Java 属性名 = Core 属性名转 kebab-case。
HBox/VBox 统一间隔优先用 BoxConfigSpace（Java box-config-space，F.js layout.space），末项不追加间隔；四周留白用 BodyPadding。仅在说明等效写法或需要特殊边距时使用 BoxConfigChildMargin 与 BoxConfigLastChildMargin，不要机械保留旧写法留下的尾部空隙。迁移与覆盖顺序见 references/hbox-vbox.md。

官方资源（Official Resources）

在线 API：JS https://fineui.com/js/api/ · Pro https://fineui.com/pro/api/ · Core https://fineui.com/core/api/
FineUI.Java：布局属性语义同 Core（属性名转 kebab-case、值保持 PascalCase），客户端 F.js 布局引擎与 JS 端完全相同；Region 另有 <f:region-panel> 便捷控件。

支持 Markdown

登录后评论