SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-layout

fineui-layout

Frontend & websites

View repository

Updated 10-16 06:52

About this skill

FineUI Layout System skill

This skill covershow child controls are arranged inside a container（Layout property). For container components themselves (Panel/TabStrip/Accordion), see fineui-panel; for the full-page scaffold (ViewPort + Region + PageManager), see fineui-foundation page-scaffold.md.

When to Use

  • Choose and configure a layout: Fit, Region, flexbox, responsive grid, columns
  • Make the layout adapt to the browser window/screen size

Layout type quick reference (Layout property)

Value Purpose See
Container(default) Child controls are arranged in sequence by their own height —
Fit Onlychild control fills the container (commonly used to place a Grid/Form) layout-types
Region Region layout: child panel RegionPosition positioned Top/Left/Center/Right/Bottom (Center is required) layout-types
HBox / VBox Flexbox (key), children use BoxFlex to allocate space hbox-vbox
Block Responsive grid: children use Block/BlockSM/BlockMD/BlockLG(1–12, row total 12) layout-types
Column Column layout (officially recommended to switch to HBox) layout-types
Anchor Anchor layout (form default), children use AnchorValue layout-types
InlineBlock / Table / Absolute / Accordion / Card Inline-block / table / absolute / accordion / card —

Quick look: HBox fixed left + adaptive right (most commonly used flex layout)

// ① 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

File When to read
references/hbox-vbox.md HBox / VBox flexbox (key): BoxFlex, alignment, common combinations
references/layout-types.md Fit / Region / Block / Column / Anchor + viewport adaptation

Related Skills

  • fineui-panel: Panel / TabStrip / Accordion container components
  • fineui-foundation: full-page scaffold (ViewPort + Region + PageManager)
  • fineui-grid / fineui-form: content placed into Fit / flexible regions

Constraints & Rules

  1. Decide the syntax first, do not mix: F.js Box layout parameters go inside the layout object, for example layout: { type: 'hbox', space: 10 }, child flex values use flex; C# uses Layout="HBox" / BoxFlex; Java property names use lowercase hyphens, layout values and enum values keep PascalCase.
  2. Fit holds only one child control：Layout="Fit"（Java layout="Fit") the container should have only one child control (it fills the container).
  3. Region's Center is required: a region layout must have one RegionPosition="Center"（Java region-position="Center") panel filling the remaining space; use Widthfor left/right, Height；RegionSplit="true"（Java region-split="true"for top/bottom, splitter width region-split-width="3") to add a drag bar.Java also has a convenience control <f:region-panel>/<f:regions>/<f:region region-position=...>(equivalent to <f:panel layout="Region"> + child <f:panel region-position=...>）。
  4. Two entry points for viewport adaptation: root panel IsViewPort="true"（Java is-view-port="true"), or Pro <f:PageManager AutoSizePanelID="Panel1">。
  5. Block row total 12: child items Block/BlockSM/BlockMD/BlockLG（Java block/block-sm/block-md/block-lg) values 1–12, with an inline sum of 12 (wraps when exceeded); spacing BlockConfigSpace（Java block-config-space）；InlineBlock is another layout, do not confuse it with Block .
  6. HBox/VBox flexibility uses BoxFlex（Java box-flex): flexible child items BoxFlex, fixed child items use Width/Height; "stretch full + place in Grid" adds Layout="Fit"to flexible child items. See references/hbox-vbox.md。
  7. Never fabricate APIs: when unsure, check the official website API or F/doc/ JSDoc; Java property names = Core property names converted to kebab-case.
  8. For HBox/VBox uniform spacing, prefer BoxConfigSpace（Java box-config-space，F.js layout.space), no spacing is appended after the last item; for surrounding padding use BodyPadding. Use BoxConfigChildMargin and BoxConfigLastChildMarginonly when explaining equivalent syntax or when special margins are needed, and do not mechanically preserve trailing gaps left by old syntax. For migration and override order see references/hbox-vbox.md。

Official Resources