模板

A3S UI 为具有较大 HTML 结构的组件提供了可选的 Nunjucks 和 Jinja 宏。它们生成组件文档中显示的相同语义 A3S UI 标记，同时使重复的服务器渲染标记更易于维护。

这些模板使用 @a3s-lab/ui 进行版本控制，因此生成的标记与您安装的 CSS 和 JavaScript 文件相匹配。

宏

组件	宏	Nunjucks	Jinja
组合框	`combobox()`	combobox.njk	combobox.html.jinja
命令	`command()`	command.njk	command.html.jinja
命令	`command_dialog()`	command.njk	command.html.jinja
Dialog	`dialog()`	dialog.njk	dialog.html.jinja
下拉菜单	`dropdown_menu()`	dropdown-menu.njk	dropdown-menu.html.jinja
弹出	`popover()`	popover.njk	popover.html.jinja
选择器	`select()`	select.njk	select.html.jinja
侧边栏	`sidebar()`	sidebar.njk	sidebar.html.jinja
标签	`tabs()`	tabs.njk	tabs.html.jinja
Toast	`toaster()`	toast.njk	toast.html.jinja
Toast	`toast()`	toast.njk	toast.html.jinja

某些宏文件包含内部递归助手，例如 render_select_items()。这些助手是实现细节，不属于公共 API 的一部分。

用途

安装模板

从 @a3s-lab/ui 复制模板引擎的模板文件夹。模板应归应用程序所有，因此您可以在复制后对其进行编辑。

Nunjucks

cp -R node_modules/@a3s-lab/ui/templates/nunjucks ./templates/a3s-ui

Jinja

cp -R node_modules/@a3s-lab/ui/templates/jinja ./templates/a3s-ui

如果您不需要完整的模板文件夹，则仅复制您使用的文件。

也可以直接从 GitHub 复制 Nunjucks templates 或 Jinja templates。

使用宏

从复制的模板文件导入宏，然后使用该组件的 props 调用它。

Nunjucks

{% from "a3s-ui/select.njk" import select %}
{{ select(
  name="fruit",
  items=[
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "blueberry", label: "Blueberry" }
  ]
) }}

Jinja

{% from "a3s-ui/select.html.jinja" import select %}
{{ select(
  name="fruit",
  items=[
    { "value": "apple", "label": "Apple" },
    { "value": "banana", "label": "Banana" },
    { "value": "blueberry", "label": "Blueberry" }
  ]
) }}

宏参考

`combobox()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的组合框 ID。
`selected`	`字符串\	数组\	对象`
`name`	`string`	`None` / `none`	隐藏输入名称。
`multiple`	`boolean`	`false`	启用基于芯片的多重选择。
`placeholder`	`string`	`None` / `none`	可见的输入占位符。
`close_on_select`	`boolean`	`false`	在多模式下选择每个选项后关闭弹出窗口。
`clear`	`boolean`	`false`	在单选模式下显示清除按钮。
`auto_highlight`	`boolean`	`false`	过滤时突出显示第一个匹配选项。
`format`	`“值”\	“对象”`	`"value"`
`main_attrs`	`object`	`{}`	`.combobox` 根的额外属性。
`input_attrs`	`object`	`{}`	可见输入或芯片输入包装器的额外属性。
`popover_attrs`	`object`	`{}`	弹出框元素的额外属性。
`listbox_attrs`	`object`	`{}`	列表框的额外属性。
`hidden_input_attrs`	`object`	`{}`	隐藏输入的额外属性。

`command()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的命令 ID。
`items`	`array`	`None` / `none`	可选的结构化项目数据。省略时使用调用者内容。
`placeholder`	`string`	`"Type a command or search..."`	搜索输入占位符。
`empty_text`	`string`	`"No results found."`	空状态文本。
`main_attrs`	`object`	`{}`	`.command` 根的额外属性。
`input_attrs`	`object`	`{}`	搜索输入的额外属性。
`menu_attrs`	`object`	`{}`	命令菜单的额外属性。

`command_dialog()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的命令对话框 ID。
`items`	`array`	`None` / `none`	可选的结构化项目数据。省略时使用调用者内容。
`placeholder`	`string`	`"Type a command or search..."`	搜索输入占位符。
`empty_text`	`string`	`"No results found."`	空状态文本。
`dialog_attrs`	`object`	`{}`	原生对话框的额外属性。
`input_attrs`	`object`	`{}`	搜索输入的额外属性。
`menu_attrs`	`object`	`{}`	命令菜单的额外属性。
`open`	`boolean`	`false`	默认情况下呈现打开的对话框。

`dialog()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的对话框 ID。
`trigger`	`string`	`None` / `none`	生成的触发按钮的文本或 HTML。
`title`	`string`	`None` / `none`	对话框标题。
`description`	`string`	`None` / `none`	对话框描述。
`footer`	`string`	`None` / `none`	对话框页脚的 HTML。
`dialog_attrs`	`object`	`{}`	原生对话框的额外属性。
`trigger_attrs`	`object`	`{}`	生成的触发按钮的额外属性。
`header_attrs`	`object`	`{}`	对话框标题的额外属性。
`body_attrs`	`object`	`{}`	对话框主体部分的额外属性。
`footer_attrs`	`object`	`{}`	对话框页脚的额外属性。
`open`	`boolean`	`false`	默认情况下呈现打开的对话框。
`close_button`	`boolean`	`true`	包括生成的关闭按钮。
`close_on_overlay_click`	`boolean`	`true`	添加背景单击关闭行为。

`dropdown_menu()`

道具	类型	默认	描述
`trigger`	`string`	必填	触发按钮的 HTML。
`id`	`string`	生成的	唯一的下拉菜单 ID。
`items`	`array`	`None` / `none`	可选的结构化菜单项数据。省略时使用调用者内容。
`main_attrs`	`object`	`{}`	`.dropdown-menu` 根的额外属性。
`trigger_attrs`	`object`	`{}`	触发按钮的额外属性。
`popover_attrs`	`object`	`{}`	弹出框元素的额外属性。
`menu_attrs`	`object`	`{}`	菜单元素的额外属性。

`popover()`

道具	类型	默认	描述
`trigger`	`string`	必填	触发按钮的 HTML。
`id`	`string`	生成的	唯一的弹出窗口 ID。
`main_attrs`	`object`	`{}`	`.popover` 根的额外属性。
`trigger_attrs`	`object`	`{}`	触发按钮的额外属性。
`popover_attrs`	`object`	`{}`	弹出框元素的额外属性。

`select()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的选择 ID。
`selected`	`字符串\	数组`	`None` / `none`
`name`	`string`	从 `id` 生成	隐藏输入名称。
`items`	`array`	`None` / `none`	可选的结构化项目数据。省略时使用调用者内容。
`multiple`	`boolean`	`false`	启用多项选择。
`placeholder`	`string`	`None` / `none`	多种模式的占位符文本，无需选择。
`close_on_select`	`boolean`	`false`	在多模式下选择每个选项后关闭弹出窗口。
`format`	`“值”\	“对象”`	`"value"`
`main_attrs`	`object`	`{}`	`.select` 根的额外属性。
`trigger_attrs`	`object`	`{}`	触发按钮的额外属性。
`popover_attrs`	`object`	`{}`	弹出框元素的额外属性。
`listbox_attrs`	`object`	`{}`	列表框的额外属性。
`input_attrs`	`object`	`{}`	隐藏输入的额外属性。

`sidebar()`

道具	类型	默认	描述
`id`	`string`	`None` / `none`	可选侧边栏 ID。当存在多个侧边栏时使用一个。
`label`	`string`	`"Sidebar navigation"`	导航地标标签。
`open`	`boolean`	`true`	初始打开状态。
`side`	`“左”\	“对”`	`"left"`
`header`	`string`	`None` / `none`	侧边栏标题的 HTML。
`footer`	`string`	`None` / `none`	侧边栏页脚的 HTML。
`menu`	`array`	`None` / `none`	可选的结构化菜单数据。省略时使用调用者内容。
`main_attrs`	`object`	`{}`	`.sidebar` 根的额外属性。
`header_attrs`	`object`	`{}`	标题的额外属性。
`content_attrs`	`object`	`{}`	可滚动内容部分的额外属性。
`footer_attrs`	`object`	`{}`	页脚的额外属性。

`tabs()`

道具	类型	默认	描述
`id`	`string`	生成的	唯一的选项卡 ID。
`tabsets`	`array`	`[]`	选项卡定义。每个项目可包括 `tab`、`panel`、`tab_attrs` 和 `panel_attrs`。
`main_attrs`	`object`	`{}`	`.tabs` 根的额外属性。
`tablist_attrs`	`object`	`{}`	选项卡列表的额外属性。此处使用 `aria-orientation="vertical"` 或 `data-variant="line"`。
`default_tab_index`	`number`	`1`	最初选择的选项卡的基于一的索引。

`toaster()`

道具	类型	默认	描述
`id`	`string`	`"toaster"`	烤面包机容器 ID。
`toasts`	`array`	`[]`	烤面包机内渲染的初始烤面包对象。
`attrs`	`object`	`{}`	`.toaster` 容器的额外属性。

`toast()`

道具	类型	默认	描述
`category`	`“成功”\	“错误”\	“信息”\
`title`	`string`	`""`	Toast标题。
`description`	`string`	`""`	Toast描述。
`duration`	`number`	默认超时	超时（以毫秒为单位）。使用 `-1` 使 toast 保持打开状态。
`icon`	`string`	类别图标	自定义图标 HTML。
`action`	`object`	`None` / `none`	操作按钮/链接配置。支持`label`、`onclick`和`href`。
`cancel`	`object`	`None` / `none`	取消按钮/链接配置。支持`label`、`onclick`和`href`。
`attrs`	`object`	`{}`	`.toast` 元素的额外属性。

#模板

#宏

#用途

#安装模板

#使用宏

#宏参考

#combobox()

#command()

#command_dialog()

#dialog()

#dropdown_menu()

#popover()

#select()

#sidebar()

#tabs()

#toaster()

#toast()

模板

宏

用途

安装模板

使用宏

宏参考

`combobox()`

`command()`

`command_dialog()`

`dialog()`

`dropdown_menu()`

`popover()`

`select()`

`sidebar()`

`tabs()`

`toaster()`

`toast()`