@ basenative/组件

35个模块的语义UI组件呈现为HTML字符串-没有框架，除了选择加入初始化程序之外，不需要客户端JavaScript

部分 BaseNative 生态系统——基于信号的web运行时，基于原生HTML。

包从35个源模块导出62个符号(通过 src/index.js): 47 render* 帮助者，烤面包队列(createToaster， showToast， dismissToast， renderToastContainer)，选项卡，日历，管道和站点标头客户端初始化程序 (initTabs， initCalendarDragDrop， initPipelineDragDrop， initSiteHeader)，状态存储和助手，以及两个小型实用程序(buttonVariants， layoutGridStyles）。完整参考选项表、呈现的标记和辅助功能注释: docs/api/components.md。类型声明发货 types/index.d.ts.

安装

npm install @basenative/components

快速入门

import {
  renderButton,
  renderInput,
  renderAlert,
  renderTable,
  renderDialog,
} from '@basenative/components';

// All components return HTML strings for use with @basenative/server
const html = `
  ${renderAlert('Changes saved successfully.', { variant: 'info' })}
  ${renderButton('Submit', { variant: 'primary', type: 'submit' })}
  ${renderInput({ name: 'email', label: 'Email', type: 'email', required: true })}
`;

存在两种调用约定，以及适用于每个函数的参考文档：

• 内容: renderButton(content, options?)， renderAlert(content, options?)， renderBadge(content, options?)
• 仅选项: 其他所有内容，例如. renderInput({ name, label, … })

大多数 render* 帮助者接受一个 attrs 额外的HTML属性字符串，逐字拼接到最外层的元素。 renderPagination， renderSpinner， renderSkeleton 和 renderLayoutGrid 不要。

内容优先帮助者 (renderButton， renderAlert， renderBadge)也带走 options.text:一个 逃 替换未转义的标签 content 插槽。只要标签是数据而不是标记，就可以获取它-这是记住之间的区别 escapeText() 在每个呼叫站点，并且不能弄错。

风格

所有样式都位于CSS层叠层 (reset， tokens， layout， components， states）; 除了日历、虚拟列表和布局网格的几何形状外，组件不携带任何内联样式。

最简单的选项是捆绑入口，它以正确的顺序导入每一层：

<link rel="stylesheet" href="node_modules/@basenative/components/src/index.css">

import '@basenative/components/css';

每个层也单独导出。 @basenative/components/layers.css 声明级联顺序 (@layer reset, tokens, layout, components, states;)，必须先载入 每当您导入单个文件时-否则层将按第一次外观和 states 可能会输给 components：

import '@basenative/components/layers.css'; // first
import '@basenative/components/tokens.css';
import '@basenative/components/components.css';

暗模式: prefers-color-scheme: dark 或者 data-theme="dark" 在任何祖先身上。密度: data-density="compact|default|spacious".

品牌前景

调整 --palette-primary-* 在你的品牌只是工作的一半: 有些东西已经 为了便于阅读 在顶部 那些装满的盒子。四个令牌命名该前景，因此 以淡色调（琥珀色、薄荷色、沙色）为基础的品牌在不添加任何CSS的情况下仍然清晰可辨。

还有两个令牌将“页面”和“页面上的东西”分开，它们是 仅在灯光主题上使用相同的颜色:

:root {
  --palette-primary-600: #e8920a;   /* amber brand */
  --color-text-on-primary: #1a0a00;    /* 7.86:1 — white would be 2.46:1 */
}

API

所有组件都是返回HTML字符串的纯函数。看到 docs/api/components.md 用于选项和标记。

窗体控件

• renderButton(content, options) -按钮与 variant （primary， secondary， ghost， destructive)， size （sm， default， lg)， disabled， type. options.text 是一个转义的标签并赢得了 content HTML槽。
• renderInput(options) —文本输入，包括标签、帮助和错误状态。
• renderTextarea(options) -多行文本输入。
• renderCheckbox(options) -带标签的复选框。
• renderRadioGroup(options) - a中的一组无线电输入 <fieldset>.
• renderToggle(options) -切换/开关输入 (role="switch"）。
• renderSelect(options) - - - - - - <select> 带有选项列表。
• renderField(options) -作为公共组件的字段单元: 标签，预渲染控件，帮助文本和错误组成在一个 [data-bn="field"] Shell -与内置控件内部呈现的契约相同，用于任何其他控件。
• renderFormField(options) -在一个调用中组成整个字段: 命名一个内置控件 (input， textarea， select， checkbox， radio， toggle)或传递预渲染 controlHtml,和标签/帮助/错误一起来。
• renderCombobox(options) - - - - - - <input> + <datalist> combobox。
• renderMultiselect(options) -多值选择与可移动的标签。

反馈

• renderAlert(content, options) -内联警报 variant （info， success， warning， error)， dismissible 和 attrs. options.text 是一条逃脱的消息而赢得的 content HTML槽。
• createToaster(options) / showToast(toaster, options) / dismissToast(toaster, id) / renderToastContainer(position) -Toast通知系统。
• renderProgress(options) / renderSpinner(options) -进度条和加载旋转器。
• renderSkeleton(options) -骨架加载占位符。

数据显示

• renderTable(options) -无障碍 <table> 列和行配置；一列的 render(value, row) 钩子填充复合单元格 (徽章， <time>（行操作）作为HTML槽，默认是转义文本。列带 align 和 numeric (表格衬里图，端部对齐，标记在 <th> ), cellAttrs 将属性拼接到列的单元格上，以及 srLabel 命名没有可见标题的列； footer 行呈现 <tfoot>； labelCells （默认开启）邮票 data-label 在每个body和footer单元格上，以及随附的样式表根据其自己的容器宽度堆叠表，从该标签标题每个单元格-表在每个宽度都是可读的，没有消费者端CSS。
• renderDataGrid(options) -数据网格与排序指标，行选择，可编辑的单元格和分页页脚。可排序的标题是真实存在的 <button>s内的 <th> -键盘操作，没有客户端JS。
• renderTree(options) / renderTreeGrid(options) -树视图和树网格。项目/行带有静态粗纱 tabindex (第一 0,休息 -1）; 在箭头键上的项目之间移动它留给您自己的keydown处理程序。
• renderVirtualList(options) -虚拟化列表的第一个窗口加上用于全高度的间隔。
• renderBadge(content, options) -小状态徽章与 variant 和 attrs； content 是一个HTML槽（未转义）， options.text 是逃脱的选择，并赢得了它。
• renderAvatar(options) -带有回退首字母的用户头像。
• renderPagination(options) -页面导航控件。

布局和导航

• renderCard(options) -内容卡与可选的页眉/页脚，加上 id 和 attrs 所以它可以被标记 (aria-labelledby) 或绑定到。
• renderDialog(options) ——本地 <dialog>,以其标题命名 (aria-labelledby)，并由可选项描述 description （aria-describedby）。
• renderDrawer(options) -带覆盖层的侧抽屉面板。
• renderTabs(options) -带有粗纱的选项卡式内容面板 tabindex； initTabs(root, { onChange?, activation? }) 电线点击/左箭头/右箭头/ Home / End切换 aria-selected， tabindex 和面板 hidden 切换（WAI-ARIA APG选项卡模式）和返回 { select(id), active(), destroy() }.
• renderAccordion(options) - - - - - - <details>/<summary> 手风琴。
• renderBreadcrumb(options) -面包屑导航路径。
• renderTooltip(options) -弹出窗口- api工具提示；触发器呈现为真实的 <button type="button"> (或您自己的 <button>/<input> 插槽，连接到位)，因为只有类似按钮的元素才是有效的弹出窗口调用器。
• renderDropdownMenu(options) -Popover-API下拉菜单。
• renderCommandPalette(options) -键盘驱动的命令面板。
• renderLayoutGrid(options) / layoutGridStyles() -拖放可视化构建器的CSS网格画布及其CSS。
• renderSiteNav(options) -独立标签导航列表；当前项的链接携带 aria-current="page".
• renderSiteHeader(options) -网站标题: 品牌链接，真正的按钮导航切换和主导航菜单； initSiteHeader(root, { onToggle? }) 连接窄视口切换 (Escape关闭并重新聚焦，外部单击关闭) 并返回 { open, close, toggle, destroy }.
• renderSiteFooter(options) -站点页脚：品牌块，链接栏作为标签导航 <h2> 标题，和一个法律酒吧。
• renderAppShell(options) -最小的页面外壳：跳过链接，标题槽， <main> 界标和页脚槽，其中跳过目标归shell所有。

营销和内容

• renderHero(options) -营销英雄：徽章，标题，线索，行动，社会证明和可选的视觉； variant: 'page' 呈现紧凑的标题和线索页面英雄。复制转义文本 (headingText/leadText)或受信任的HTML插槽。
• renderPricingCard(options) / renderPricingCards(options) -一个计划（徽章，价格，标语，勾选功能，CTA）； featured 在卡片上盖章，并将CTA变为主要)，或整个计划列表。
• renderFeatureCard(options) -图标，标签，标题和描述的特征网格。
• renderStatCard(options) -值，标签和可选的向上/向下趋势指标。
• renderFaq(options) / renderFaqItem(options) -定义-常见问题列表；问题是转义的，答案是HTML槽或转义的 answerText.

调度

• renderCalendar(options) -周视图与每小时的下降区域和可拖动的事件。桶按每个已解析的时间戳(或 timeZone)，今天的标记 (now)，从事件中获得小时范围，并每天重复多天事件。
• renderPipelineBlock(options) -可拖动卡，可以放在日历上。
• renderPipeline(options) -看板栏和卡片板；列是由带有卡片计数的标题标记的部分，卡片采用转义格式 badge 加上 actions/footer HTML槽，已知 status 值获得令牌驱动的重音。
• initCalendarDragDrop(container, { onDrop, dragSource?, snapMinutes? }) / initPipelineDragDrop(container, { onCardMove }) -客户端移动通过HTML5拖放，点击选择/点击放置，或通过键盘（输入选择，箭头移动，输入放置，退出取消）；返回 { destroy() }。日历删除报表 minute/datetime 除了槽， dragSource 让日历外的侧边栏提供有效载荷，并且管道丢弃报告实际 position 在目标列中。
• createCalendarState(options) / createPipelineState(options) -DOM-无碰撞检测和更改回调的商店。
• eventsCollide(a, b) / updateEvent(event, overrides) / getEventDuration(start, end) -日历助手。

公用事业公司

• buttonVariants(variant?, size?) -返回类字符串的函数 bn-button bn-button--{variant} bn-button--{size} 用于手写标记。

许可证

apache - 2.0