mcpField
F
fineui-layout

fineui-layout

github.com/sanshiDesign & UI545 installsUpdated 1d ago
Repository

About fineui-layout

fineui-layout is a development skill for arranging child controls inside FineUI containers and adapting layouts to browser or screen dimensions. It summarizes options such as Fit, Region, HBox/VBox, and responsive grids, with configuration guidance.

Key features

  1. 01Covers multiple container layout types
  2. 02Configures Fit for a single child
  3. 03Positions panels with Region layout
  4. 04Distributes space with HBox/VBox
  5. 05Sets up responsive grids and anchors

Use cases

  1. 01Fill a container with a Grid or form
  2. 02Arrange top, side, and center regions
  3. 03Combine fixed-width and flexible panels
  4. 04Adapt grid placement to screen size

Install

Copy the command and run it in a terminal.

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

After installing, type/fineui-layoutin Claude Code to confirm it loaded.

Bundled filesreferences/hbox-vbox.mdreferences/layout-types.md

Details

From the project 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锚点布局（表单默认），子用 AnchorValuelayout-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.mdHBox / VBox 弹性盒子（重点）：BoxFlex、对齐、常见组合
references/layout-types.mdFit / Region / Block / Column / Anchor + 视口自适应

相关技能（Related Skills）

  • fineui-panel：Panel / TabStrip / Accordion 容器组件
  • fineui-foundation：整页骨架（ViewPort + Region + PageManager）
  • fineui-grid / fineui-form：放进 Fit / 弹性区域的内容

约束与规则（Constraints & Rules）

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

官方资源（Official Resources）

Comments

Markdown supported