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

fineui-panel

Frontend & websites

View repository

Updated 10-16 07:22

About this skill

FineUI container components skill (Panel / Tab / Accordion)

This skill coversthe container components themselves(Panel/tabs/accordion); how child controls inside the containerare arranged(Fit/Region/HBox/VBox/Block...) see the fineui-layout skill.

When to Use

  • Panel: a panel container with title/toolbar/collapse; for pure content use ContentPanel
  • GroupPanel: place a group of related controls into a collapsible area with a titled border in a form or page
  • TabStrip: tabs (static tabs, iframe tabs, dynamic add/remove)
  • Accordion: accordion (one panel expanded at a time)

Before You Start

  1. Which syntax? F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / Java (for determination see fineui-foundation）。
  2. Which container do you want? Panel (general) / TabStrip (paging) / Accordion (collapsible panel group).

Syntax overview (panel with top toolbar)

// ① F.js —— bars 放工具栏，items 放内容
F.create({ type: 'Panel', isFluid: true, id: 'Panel1', renderTo: '#wrap', title: '面板', bodyPadding: 10, collapsible: true,
    bars: [{ type: 'Toolbar', position: 'top', items: [{ type: 'Button', text: '按钮' }, '->', { type: 'ToolbarText', text: '右侧' }] }],
    items: [{ type: 'Panel', title: '内容面板', height: 200, autoScroll: true }] });

<%-- ② Pro（WebForms）--%>
<f:Panel ID="Panel1" runat="server" IsFluid="true" Title="面板" BodyPadding="10px" EnableCollapse="true">
    <Toolbars><f:Toolbar Position="Top" runat="server"><Items>
        <f:Button Text="按钮" runat="server" /><f:ToolbarFill runat="server" />
    </Items></f:Toolbar></Toolbars>
    <Items><f:ContentPanel Title="内容面板" Height="200px" AutoScroll="true" runat="server">内容</f:ContentPanel></Items>
</f:Panel>

// ③ Core-MVC（Fluent API）
@(F.Panel().IsFluid(true).ID("Panel1").Title("面板").BodyPadding(10).EnableCollapse(true)
    .Toolbars(F.Toolbar().Position(ToolbarPosition.Top).Items(F.Button().Text("按钮"), F.ToolbarFill()))
    .Items(F.Panel().Title("内容面板").Height(200).AutoScroll(true)))

<!-- ④ Core-TagHelper（RazorForms / RazorPages，写法相同）-->
<f:Panel ID="Panel1" IsFluid="true" Title="面板" BodyPadding="10" EnableCollapse="true">
    <Toolbars><f:Toolbar Position="Top"><Items><f:Button Text="按钮"></f:Button><f:ToolbarFill></f:ToolbarFill></Items></f:Toolbar></Toolbars>
    <Items><f:Panel Title="内容面板" Height="200" AutoScroll="true"></f:Panel></Items>
</f:Panel>

<!-- ⑤ FineUI.Java（Thymeleaf 方言：标签/属性全 kebab-case，工具栏用 <f:toolbars>/<f:toolbar>）-->
<f:panel id="Panel1" is-fluid="true" title="面板" body-padding="10" enable-collapse="true">
    <f:toolbars>
        <f:toolbar id="Toolbar1" position="Top">
            <f:items><f:button id="btn1" text="按钮"></f:button><f:toolbar-fill></f:toolbar-fill></f:items>
        </f:toolbar>
    </f:toolbars>
    <f:items><f:panel title="内容面板" height="200" auto-scroll="true"></f:panel></f:items>
</f:panel>

The client-side F.js runtime is identical across all four stacks (F.ui.Panel1.xxx(), listener JS is word-for-word identical), Java differs only in template syntax/case and page class language. See fineui-foundation stacks.md.

Documentation Reference Files

File When to read
references/panel.md Panel / ContentPanel: toolbar, collapse and collapse event, title bar tool icons
references/group-panel.md GroupPanel group panel: nested controls, collapse, toolbar and server-side control
references/tab.md TabStrip: static/iframe tabs, active page, dynamic add/remove tabs
references/accordion.md Accordion / AccordionPane: panel group, active panel, switch event

Related Skills

  • fineui-layout: layout inside the container (Fit / Region / HBox / VBox / Block...)
  • fineui-grid / fineui-form: content placed into a Fit panel or Tab / Pane
  • fineui-button: buttons in the toolbar and their dropdown menus
  • fineui-window: embedding an iframe edit page in a Tab / panel

Constraints & Rules

  1. Decide the syntax first, do not mix：F.js camelCase（collapsible/bodyPadding）；C# PascalCase（EnableCollapse/BodyPadding）；Java kebab-case（enable-collapse/body-padding）. Toolbar in F.js goes in bars, in C# goes in <Toolbars>，in Java goes in <f:toolbars>/<f:toolbar>/<f:items>(containing <f:toolbar-text>/<f:toolbar-separator>/<f:button>/<f:toolbar-fill>）。
  2. For pure content use ContentPanel: when only placing content and no further nesting is needed use <f:ContentPanel>（C#）/ <f:content-panel>（Java）。
  3. For grouped content use GroupPanel: when you need to organize a group of form fields or child controls with a titled border use GroupPanel; it can collapse, contains Items and Toolbars, and is not itself a form field.
  4. Dynamic tabs differ per syntax：F.js F.ui.TabStrip1.addTab({...})；Core-MVC/RazorPages UIHelper.TabStrip("id").AddTab(...)；Pro/RazorForms RegisterStartupScript(TabStrip1.GetAddTabReference(...))；Java calls directly on the control field TabStrip1.addTab(id, url, title, iconUrl, closable) / TabStrip1.hideTab(id). See references/tab.md。
  5. Accordion panels use <Panes>/AccordionPane（Java <f:panes>/<f:accordion-pane>; not <Items>/Tab); panel switchingserver-side event OnPaneIndexChanged（Java on-pane-index-changed) can all be declared directly on Pro / Core-RazorForms / Java . Pro recommends setting EnableImplicitChangeEvents="false", declaring the event will automatically post back; Core-MVC/RazorPages read the client-side getActivePaneIndex(). See references/accordion.md。
  6. Java collapse event is written directly as a property：on-collapse/on-expand(Unlike Pro, which requires EnableCollapseEvent/EnableExpandEvent toggle). The Region layout has additional Java <f:region-panel>/<f:regions>/<f:region> convenience controls (see fineui-layout）。
  7. Never fabricate APIs: if unsure, check the official API or F/doc/ JSDoc; Java property names = Core property names converted to kebab-case, but property "values" (enums/icons) remain PascalCase.

Official Resources

  • Online API: JS https://fineui.com/js/api/ · Pro https://fineui.com/pro/api/ · Core https://fineui.com/core/api/
  • FineUI.Java: control property semantics are the same as Core (property names converted to kebab-case, values remain PascalCase); the client-side F.js API is exactly the same as the JS side; when looking up properties, first check the Core API and then convert according to the naming convention.