@frigear-nu/ ui (英语)
Frigiar Nuxt应用软件的共享UI组件,可堆肥和辅助器,以Nuxt UI为基础. 登记
全球组件(无前缀)和自动进口其可堆肥和辅助器。 它带来规律,而不是一个主题:
使用相同的卡片 bg-elevated/50 ring ring-default rounded-lg 表面和主机的 Nuxt UI 颜色.
内建字符串来自 @nuxtjs/i18n 安装时patterns.*, (中文(简体) ), actions.*· ; en 财务报告和审定财务报表 da (列入)
英语回落;每个回落都可以被道具所压倒.
应用程序外壳
AppShell 是应用区域(admin, account)的仪表板外壳;一个区域布局将它的页面包裹在其中:
<AppShell
id="admin"
:title="t('title', 'Administration')"
home="/admin"
:navigation="navigation"
:nav-label="t('nav.label', 'Admin navigation')"
:search-groups="searchGroups"
:back-to="{ to: '/', label: t('backToSite', 'Back to the site') }"
>
<template #sidebar-footer="{ collapsed }">
<AccountMenu block :collapsed="collapsed" />
</template>
<slot />
</AppShell>
id键dashboard-sidebar-<id>cookie (collapse,宽;每个区域一.home财务报告和审定财务报表backTo.to原为 路径, shell 添加了语言前缀.navigation是一个列表UNavigationMenu组别(type: 'label'行头一团. 导航栏显示一个哑巴 眉间,title › active section,从没有标题:<h1>结束PageHeading。 。 。 .searchGroups添加 QQK 按钮和调色板( 不包含颜色- 模式组); 将其留出, 不进行搜索 .- 身体的中心是
max-w-7xl· ;wide或者说definePageMeta({ wide: true })让它宽到完全宽. - 文档标题默认为活动区域( else)
title); 页面本身useHead赢了. - 槽数 :
brand, (中文(简体) ),sidebar-top, (中文(简体) ),sidebar-footer(所有获得{ collapsed }, (中文(简体) ),navbar-left(取代眉毛),navbar-right(违约)LanguageSelect当应用程序有一个以上的地方时,默认. - 轻度应用主题为 shell 上的效用类(
bg-default躯体,bg-elevated/25侧边栏, a 主机可瞄准[data-area=app]。 。 。 .
页面图案
| 构成部分 | 使用 |
|---|---|
PageHeading | 应用程序页的标题块:面包屑(阵列)或眉毛线(字符串), #badge,描述,元行, #actions |
PageSectionSwitcher | 全宽按钮命名当前区域,包含所有区域菜单(移动区域导航) |
PageTabs | 标题下的标签:链接(to,路线决定)或状态(v-model + 键 value(中文(简体) ) |
SectionCard | 一节(形式、关键事实)的标题卡; flush 表格和清单 |
TableCard | 表面a UTable 座入( 二:ui="tableUi()"),与 #header 财务报告和审定财务报表 #footer (总数,平分) |
RowMenu | 这个 ⋯ 菜单; 命令 打开 = 编辑 = 破坏性组 |
StatCard | 带有标签、有色图标和提示的编号; 与列表的链接 to |
ListCard | 带有“ 查看全部” 链接的简短分割列表 |
DescriptionList | 标签/ 值行; 空值为“ 未设置 ” ; 空位 key |
PageToolbar | 搜索和过滤表上方, #right 计数 |
FormRow | A 类 UFormField 作为设置行( 标签和提示左侧, 控制右侧, 在下方堆叠) sma. 内含形式 SectionCard; 父关 divide-y divide-default |
FormSlideover | 使用 Cancel + 提交来创建/编辑幻灯片格式( E)form="<formId>"; 与 useOverlay |
ConfirmDialog 编号 : useConfirmDialog() | 破坏行动前确认 |
| 可编曲 | 使用 |
|---|---|
useAction() | { busy, run(fn, { success?, error? }) }:祝成功,祝酒并吞错误 |
useErrorToast() | (e, title?) => void: 作为红土司的错误 |
useCopyToClipboard() | { copy(text, message?) } 用"被收起"的祝酒词 |
useFormat() | { date, dateTime, time, dateRange, money } 在活动区和应用程序时区(appConfig.frigearUi.timeZone,比如说. Europe/Copenhagen),因此服务器和客户端渲染出相同的文本 |
useLocaleLink() | { localize, strip, isActive }: 位置前缀意识路径( 身份不包含 i18n) |
useNavLinks(items, { exact }) | 菜单项目到 UNavigationMenu 与本地化的链接 to 财务报告和审定财务报表 active |
帮助者( E)@frigear-nu/ui/utils(中文(简体) ) | 使用 |
|---|---|
errorMessage(e, fallback), (中文(简体) ), errorToToast(e, overrides?) | 一个有用的信息 $fetch编号 :createError 错误 |
formatDate, (中文(简体) ), formatDateTime, (中文(简体) ), formatTime, (中文(简体) ), formatDateRange | Intl 日期格式化(value, locale?, options?(中文(简体) ) |
statusColor(status, overrides?) | 状态标记颜色( 已公布/ 活动/ 付费 ) 成功 , 待 —— 警告 , 失败 —— 错误) |
stripLocale(path, codes) | 一条没有它的道路 /<locale> 前缀 |
surfaceClass, (中文(简体) ), tableUi(overrides?) | 纸牌表面和A UTable :ui 页:1 TableCard |
类型(DescriptionItem, (中文(简体) ), PageTabItem, (中文(简体) ), StatusColor,)从 @frigear-nu/ui/types。 。 。 .
投入
CurrencyInput, (中文(简体) ), MoneyInput, (中文(简体) ), DateInput, (中文(简体) ), IntervalInput, (中文(简体) ), TagInput, (中文(简体) ), UrlInput, (中文(简体) ), IconInput, (中文(简体) ), SwitchToggle, (中文(简体) ),
MarkdownTextarea, (中文(简体) ), TranslatedInput· ; MonacoCodeEditor 仅在主机安装时 nuxt-monaco-editor。 。 。 .