SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfineui-buttons-toolbar

fineui-buttons-toolbar

Frontend & websites

View repository

Updated 10-16 08:45

About this skill

FineUI Buttons & Menu skill (Buttons & Menu)

Toolbar (Toolbar, placed in Panel/Grid's <Toolbars> ) see fineui-panel skill. This skill focuses on buttons, button groups, and drop-down menu controls themselves.

When to Use

  • Button: semantic colors, icons, sizes, badges; server-side/client-side clicks; confirm before click
  • Button group ButtonGroup: gapless joining, mutually exclusive pressed (single select), multiple pressed, vertical
  • Hyperlink button LinkButton
  • Drop-down menu Menu / MenuButton (including submenus, checkable menu items)

Before You Start

  1. Which syntax? F.js / Pro / Core-MVC / Core-RazorForms / Core-RazorPages / Java (Spring Boot) (for determination see fineui-foundation）。
  2. Should the click post back to the server? Server-side events use OnClick / on-click; pure client-side uses a named page function + ClickHandler / click-handler。

Syntax overview for each approach (normal button + primary button + server-side click)

// ① F.js —— color 语义色；handler 客户端点击
F.create({ type: 'Button', renderTo: '#wrap', text: '普通按钮', cls: 'marginr' });
F.create({ type: 'Button', renderTo: '#wrap', text: '主按钮', color: 'primary',
    handler: function () { showNotify('点击了'); } });

<%-- ② Pro（WebForms）：ButtonColor 语义色；OnClick 服务端 --%>
<f:Button ID="btnDefault" runat="server" Text="普通按钮" CssClass="marginr" />
<f:Button ID="btnPrimary" runat="server" Text="主按钮" ButtonColor="Primary" OnClick="btnPrimary_Click" />

// ③ Core-MVC（Fluent API）
@(F.Button().ID("btnDefault").Text("普通按钮").CssClass("marginr"))
@(F.Button().ID("btnPrimary").Text("主按钮").ButtonColor(ButtonColor.Primary).OnClick(Url.Action("btnPrimary_Click")))

<!-- ④ Core-RazorForms（TagHelper）：OnClick="方法名" -->
<f:Button ID="btnPrimary" Text="主按钮" ButtonColor="Primary" OnClick="btnPrimary_Click"></f:Button>

<!-- ⑤ Core-RazorPages（TagHelper）：OnClick="@Url.Handler(...)" -->
<f:Button ID="btnPrimary" Text="主按钮" ButtonColor="Primary" OnClick="@Url.Handler(&quot;btnPrimary_Click&quot;)"></f:Button>

<!-- FineUIJava（Thymeleaf 方言）：标签/属性全 kebab-case；on-click="方法名" -->
<f:button id="btnPrimary" text="主按钮" button-color="Primary" on-click="btnPrimary_Click"></f:button>

// FineUIJava 页面类：@FineUIPage + extends FineUIPageBase；处理器返回 void
@FineUIPage("button/button-click")
public class ButtonClick extends FineUIPageBase {
    public void btnPrimary_Click(Object sender, EventArgs e) { showNotify("这是服务器端事件"); }
}

Documentation Reference Files

File When to read
references/button.md Semantic colors/icons/sizes/badges, server-side and client-side clicks, confirm button, LinkButton
references/menu.md Menu / MenuButton drop-down menu, MenuHyperLink/MenuCheckBox/MenuText/MenuSeparator

Related Skills

  • fineui-foundation: syntax determination, naming conventions, RawHtml (when button text contains HTML)
  • fineui-panel: Toolbar toolbar (placed in container <Toolbars>）
  • fineui-window: Confirm confirmation box, message box

Constraints & Rules

  1. Determine the syntax first, do not mix：F.js color/handler（camelCase）；C# ButtonColor/OnClick（PascalCase）；Java button-color/on-click(kebab-case), the value remains PascalCase。
  2. Semantic color property name：F.js color: 'primary'；C# ButtonColor="Primary" / .ButtonColor(ButtonColor.Primary)；Java button-color="Primary"(values: Primary/Success/Danger/Warning/Info).Note that C#'s Type is ButtonType{Button,Submit,Reset}(form submit/reset), not a color.
  3. Server-side vs client-side click: server-side OnClick（MVC Url.Action / RazorForms method name / RazorPages @Url.Handler / Java on-click); client-side uses a named page function + ClickHandler（Java click-handler). New code does not use OnClientClick, nor write script strings into Handler.
  4. Pro official recommended configuration: site-wide settings EnableImplicitPostBack="false" and EnableImplicitChangeEvents="false". In this case, pure client-side buttons do not need to write EnablePostBack="false"individually; buttons that declare OnClick will automatically post back; explicit control properties always take precedence.
  5. Confirm button: declarative ConfirmText="..." ConfirmTarget="Top"(click first shows confirmation, and only posts back after confirmation).ConfirmTitle/ConfirmIcon is also a control property (default icon Warning).
  6. Drop-down menu items use MenuButton/MenuHyperLink etc., not MenuItem（C#/Java）: C# menu items are MenuButton(clickable/with submenu),MenuHyperLink(link),MenuCheckBox(checkable),MenuText(title),MenuSeparator(separator);Java corresponds to <f:menu-button>/<f:menu-hyper-link>/<f:menu-check-box>/<f:menu-text>/<f:menu-separator>. F.js uses type: 'MenuItem'. See references/menu.md。
  7. Button group "pressed" uses enablePress(not the deprecated enableToggle）：F.js enablePress/pressGroup；C# EnablePress/EnablePressGroup（not PressGroup）；Java enable-press/enable-press-group。
  8. Never fabricate APIs: if unsure, check the official website API or F/doc/ JSDoc。

Official Resources