@bitchline-digital/hawk-app-ui (英语)
"Spark"寻找"Hawk Apps",以主机的颜色和模式. 为 Bridgeline 开发者. 在光线下看到每个部分 阴暗: UI 工具包画廊 (关于开发商网站).
- 反应 + MUI 应用程序 (单位:千美元)
next-mui模板 : Spark的MUI主题,连接应用程序与其主机的提供者, 和组件应用 继续需要: 区域、 KPI 瓦片、 表格、 小图表、 确认对话框、 侧抽屉, 土司和格式化. 需要鹰Apps桥. - 其他应用程序 (单位:千美元)
react, (中文(简体) ),preact, (中文(简体) ),next财务报告和审定财务报表vanilla模板:样式表和一些自定义元素, 不需要反应或MUI。 见 没有反应和MUI。 。 。 .
npm install @bridgeline-digital/hawk-app-ui @mui/material@^9 @emotion/react @emotion/styled # React + MUI
npm install @bridgeline-digital/hawk-app-ui # any other app
用这个
// app/layout.tsx (once): Montserrat, Spark's font, bundled with the app
import '@bridgeline-digital/hawk-app-ui/fonts';
// app/providers.tsx
'use client';
import { HawkAppProvider } from '@bridgeline-digital/hawk-app-ui';
export default function Providers({ children }: { children: React.ReactNode }) {
return <HawkAppProvider>{children}</HawkAppProvider>;
}
// any page or component inside it
import { useHawk } from '@bridgeline-digital/hawk-app-ui';
export function Page() {
const { app, context } = useHawk(); // the connected app and its context (client, engine, dates, theme)
// …app.data.query(...), app.analytics.report(...)
}
HawkAppProvider连接到主机( n)createApp({ autoResize: true }),修改后options),显示a 同时回旋器和当应用程序在主机外打开时的解释(connecting财务报告和审定财务报表error代替他们, 然后让孩子成为主题 它跟随主机在主题改变时. 旋转和解释 为 a<main>所以访问检查在每个州都能找到一个.useHawk()返回时{ app, context },总是互相连接(提供方只让孩子在那时).useHawkAppState()这是下面的钩子, 对于一个应用 想要使国家本身.<HawkComments target label?>(单位:千美元)comments范围)是一个带有“!”的注释图标,当有注释时(其工具提示中的计数);单击打开 抽屉中的线程,客户端的每个人都会读取并添加评论(作者编辑并删除自己的评论). 这个 页面的徽章共享一个计数请求. 见"通桥指南""评论".usePdfExport(options | false)让用户在挂载时导出该页面为 PDF: 主机显示 PDF 图标,单击后下载整个页面.usePdfExport({ fileName: 'Zero results' }),或false在装入时. 删除按钮和过滤器data-hawk-pdf-ignore. 见"桥梁指南""输出一页作为PDF".useSavedState(initial)实值useState对于保存的视图( 过滤器、 范围、 标签、 排序) : 值是 页面对主机“视图”菜单的状态,打开已保存的视图或其链接将其放回.const [filters, setFilters] = useSavedState({ range: 'l13', target: null })一个小JSON对象,每页一次. 见"通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通通.useRoute()是该应用的深链接和回路 :const [route, setRoute] = useRoute()页面 路线名称,以及setRoute('/widgets/12')当用户打开一个( w){ replace: true }没有退后一步。 这个 主机将它保存在它的URL中,所以重新加载或链接打开同一个页面. 在预览( 没有主机) 中, 路由在 页 次 见"通桥指南""深通与后通".useScreen(name | null)计算路线不显示的屏幕, 如标签, 每次显示时:useScreen('Logs')在标签的组件中。 路由和视图在桥边计数,点击也data-hawk-usage="Export CSV"要素。 见hawk-app usage --screens和桥导"错误与用".usePageContext(object | null)说页面显示的,为主机 解释此页面 按钮(及其 助理人员:usePageContext(rows ? { page: 'Zero-result searches', dateRange, top10 } : null)。普通名称和 数字,最多50 KB; 变化后不久发送, 当组件卸载时清除。 见桥指向 "说出页面显示的".useTour()是一个"Take the tour"按钮:{ available, active, start }。桥显示巡演 (单位:千美元)tour在鹰app.json,卡由data-hawk-tour(b) 单靠首次开放;start()显示每个步骤 再说一遍,available一旦该版本有步骤,active在它显示。 没有预览 看桥 指南"图".- 您自己增加的主题 :
<HawkAppProvider theme={{ components: { … } }}>最后合并.
构成部分
import { ConfirmDialog, DataTable, EmptyState, KpiRow, KpiTile, LoadingSection, Notice, Section, SideDrawer, useFormat, useToast } from '@bridgeline-digital/hawk-app-ui';
import { BarList, ColumnChart, Sparkline, StackedColumnChart } from '@bridgeline-digital/hawk-app-ui/charts';
import { DataGrid } from '@bridgeline-digital/hawk-app-ui/data-grid'; // needs @mui/x-data-grid@^9
const f = useFormat(); // in the host's locale
<KpiRow>
<KpiTile highlight label="Revenue" value={f.money(rev)} change={rev / prevRev - 1} trend={weekly} />
<KpiTile label="No-result searches" value={f.integer(zero)} change={zero / prevZero - 1} goodWhen="down" />
</KpiRow>
<Section title="Searches per day" subtitle="UTC days" action={<Button>Refresh</Button>}>
<ColumnChart label="Searches per day" columns={days.map((d) => ({ label: f.date(d.date, { year: false }), value: d.searches }))} />
</Section>
<DataTable rows={terms} columns={[{ key: 'term', label: 'Term' }, { key: 'searches', label: 'Searches', align: 'right' }]}
defaultSort={{ key: 'searches', direction: 'desc' }} totals={{ term: 'Total', searches: f.integer(total) }} download="terms.csv" />
| 构成部分 | 对于 |
|---|---|
Section | 一个有标题的卡片(Spark的卡片头和贴纸),可选字幕和动作 |
KpiTile, (中文(简体) ), KpiRow | 其变化与前一时期(绿色当良好时: goodWhen),一种可选趋势;并列瓦片 |
DataTable | 最多几百行:可分类列,总行,粘取头(maxHeight),CSV下载其显示的内容(文本,电子表格将作为一个公式运行,例如从 =,以文本打开) |
DataGrid (单位:千美元)/data-grid(中文(简体) ) | 上千行, 呼出并过滤: MUI X 的社区网格带有 Spark 的默认值 |
BarList, (中文(简体) ), ColumnChart, (中文(简体) ), StackedColumnChart, (中文(简体) ), Sparkline (单位:千美元)/charts(中文(简体) ) | 主题颜色中的小图表,没有图表库;每个图都有 label 用于屏幕阅读器和带有值的工具提示 |
EmptyState, (中文(简体) ), LoadingSection, (中文(简体) ), Notice | 无可显示; 一节仍在装入; 有信件(onRetry 添加 再试一次) |
ConfirmDialog | 在行动前询问; destructive 让它红; 承诺从 onConfirm 用旋转器打开 |
SideDrawer | 一个项目的细节, 从右边, 有标题, 关闭按钮和动作 |
useToast() | toast(message, severity):主持人的祝酒词在全方位的应用中,一个小吃栏在一景中 |
useFormat() 编号 : createFormat(locale) | integer, (中文(简体) ), number, (中文(简体) ), compact, (中文(简体) ), percent, (中文(简体) ), change (+12.3%), money, (中文(简体) ), date (a"2026-10-03"日期停留当天), dateTime日期: a Date 或 ISO / Athena 字符串; 其它任何显示“ -” 的字符串 |
主机在打开一个对话框或抽屉时会在整个页面上显示框架,所以它们总是完全可见.
每个部件,光和暗,都是在 UI 工具包画廊 在开发者网站(仓库)
画廊应用, examples/ui-kit页:1. <HawkAppProvider preview={{ mode: 'dark' }}> 在没有主机的情况下制作,并带有样本上下文
(单位:千美元)previewContext()),用于画廊,文档和截图. 新的应用程序从CLI那里得到工具箱 next-mui 模板
(单位:千美元)hawk-app create my-app --template next-mui); 已有的下一条 mui 应用程序得到它 hawk-app upgrade。 。 。 .
主题
createHawkTheme(context.theme, ...overrides) (亦见 @bridgeline-digital/hawk-app-ui/theme:
| 编 | 从 |
|---|---|
字法 (Montserrat, 14 px base, h1–h3, 14 px base, 14 px base, h1–h3), featuredValue),断点(sm 640号.. 2xl 1536),间距,卡片和列表覆盖 | 斯派克的主题( S)sparkThemeOptions(中文(简体) ) |
| 主颜色及其文本、背景、文本颜色、分隔符、边框半径、光或暗 | 主机主题符号( Q)color-button-accent-background, (中文(简体) ), color-background, (中文(简体) ), color-background-container, (中文(简体) ), color-text-default, (中文(简体) ), color-text-secondary, (中文(简体) ), color-border-default, (中文(简体) ), border-radius, (中文(简体) ), mode),否则Spark's. A 类 color-border-default 在主机表面太微弱无法看见(在1.2下相接,如HawkSearch's #f5f7fa 在白色上)被忽略,所以分隔符,表格行和被概括的卡片保留了MUI的分隔符 |
| 框架部分的对话框和小吃栏 | 工具包frameThemeOptions从桥的 --hawk-visible-* 变量) |
| 菜单和选择不锁定帧滚动(一个锁会调整帧和页面闪存) | 工具包frameThemeOptions(中文(简体) ) |
表格行和页眉(分页颜色的边框,页上背景的页眉行,上下行为10px,其他行为有色;样式表的 .hawk-table 都一样) | 工具包tableThemeOptions(中文(简体) ) |
字体总是Spark's的,无论主机使用什么,所以应用在HawkSearch和Spark中看起来都是一样的.
没有反应和MUI
对于香草, Preact, React 或 Next apps 不使用 MUI : 与样式表相同的外观, 以及一些自定义的元素 CSS一个人办不到的. 没有依附关系:没有反应,没有MUI,没有桥.
// With a bundler (Vite, Next): once, where the app starts (Next: the css in app/layout.tsx).
import '@bridgeline-digital/hawk-app-ui/css';
import '@bridgeline-digital/hawk-app-ui/elements';
<!-- Without a build step: from the CDN, at the bridge's version (the vanilla template does this). -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@bridgeline-digital/[email protected]/dist/css/hawk.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@bridgeline-digital/[email protected]/dist/elements/index.js"></script>
样式表 (单位:千美元)/css, (中文(简体) ), dist/css/hawk.css)携带蒙特塞拉特(不向Google字体提出要求)并绘制东道主地图
主题符号,桥架设置为 --hawk-* 变量和 <html data-hawk-theme>,作为 createHawkTheme 是否为:
口音,背景,文字,边框,半径和暗模式, 否则Spark's. 用它来 --hawk-ui-* 变量
(单位:千美元)--hawk-ui-accent, (中文(简体) ), --hawk-ui-surface, (中文(简体) ), --hawk-ui-text, (中文(简体) ), --hawk-ui-text-secondary, (中文(简体) ), --hawk-ui-border, (中文(简体) ),
--hawk-ui-radius,... 为你自己的风格。 视图的一页<html data-hawk-view>保持透明.
| 类 | 对于 |
|---|---|
hawk-section (单位:千美元)hawk-section-header, (中文(简体) ), -title, (中文(简体) ), -subtitle(中文(简体) ) | 一张名片, Spark's |
hawk-kpi-row, (中文(简体) ), hawk-stack, (中文(简体) ), hawk-row, (中文(简体) ), hawk-spacer | 并排; 列或行块 |
hawk-button (单位:千美元)is-outlined, (中文(简体) ), is-text, (中文(简体) ), is-small(中文(简体) ) | 主机口音中的按钮 |
hawk-field, (中文(简体) ), hawk-input, (中文(简体) ), hawk-select | 窗体字段 |
hawk-notice (单位:千美元)is-error, (中文(简体) ), is-warning, (中文(简体) ), is-success(中文(简体) ) | 一个消息 |
hawk-chip (单位:千美元)is-accent, (中文(简体) ), hawk-empty, (中文(简体) ), hawk-spinner, (中文(简体) ), hawk-skeleton | 标签, 没有要显示的, 装入 |
hawk-table (单位:千美元) hawk-table-wrap(中文(简体) ) | 普通表格(或使用) <hawk-data-table>(中文(简体) ) |
hawk-h1. hawk-h3, (中文(简体) ), hawk-value, (中文(简体) ), hawk-muted, (中文(简体) ), hawk-caption, (中文(简体) ), hawk-num | 类型:标题、标题编号、次要文本 |
要点 (单位:千美元)/elements使标记。 数据作为属性输入( E)el.rows = [...],设置为
属性。 导入定义它们( 在浏览器中; 在服务器上导入是安全的, 例如在 Next) .
| 元素 | 使用 |
|---|---|
<hawk-kpi label value hint change good-when highlight loading> | 其变化与前一个时期的比较change 作为一个分数, none 用于“没有先前的数据”; 绿色当良好时) |
<hawk-data-table> | columns (单位:千美元){ key, label, align?, format?, value?, sortable?, csvLabel? }· ; format数字 : integer, (中文(简体) ), number, (中文(简体) ), compact, (中文(简体) ), percent, (中文(简体) ), money, (中文(简体) ), date, (中文(简体) ), dateTime 或职能, rows, (中文(简体) ), totals, (中文(简体) ), sort; 属性 download="file.csv", (中文(简体) ), max-height, (中文(简体) ), clickable (单位:千美元)hawk-row-click 事件, empty可排序标题, CSV 以排序方式下载行( 公式制成的文本) |
<hawk-bar-list> | items (单位:千美元){ label, value }(三); selectable (单位:千美元)hawk-select 事件, value-format, (中文(简体) ), color, (中文(简体) ), label |
<hawk-column-chart> | columns (单位:千美元){ label, value, tooltip? }(三); height, (中文(简体) ), value-format, (中文(简体) ), color, (中文(简体) ), label |
const table = document.querySelector('hawk-data-table');
table.columns = [{ key: 'keyword', label: 'Keyword' }, { key: 'search_count', label: 'Searches', format: 'integer' }];
table.rows = report.data;
table.setAttribute('download', 'searches.csv');
createFormat(locale) (从) /elements 格式数字、钱和日期 useFormat()在反应或预告中
使用 TypeScript 键入 JSX 中的元素 HawkElementTags (模板有: src/hawk-elements.d.ts:
import type { HawkElementTags } from '@bridgeline-digital/hawk-app-ui/elements';
declare module 'react' { namespace JSX { interface IntrinsicElements extends HawkElementTags {} } } // Preact: 'preact'
敬酒: app.toast(message, severity) 从桥上看主人自己.
版本数
与"桥"和"CLI"一并发布(三个版本各一). 反应 + MUI 部分的对等依赖性: 反应 19, MUI 9,"情感11"(样式表和元素的选择),和桥.