@antscorp/ ui (英语)

通过一个外观反应QQ19.2视图,Astryx,StyleX和Antsomi主题. React和React DOM QX19.2由主机作为同级提供. 被包装的CLI需要节点QQ24.

bun add @antscorp/ui

import "@antscorp/ui/reset.css";
import "@antscorp/ui/astryx.css";
import "@antscorp/ui/theme.css";
import "@antscorp/ui/ui.css";
import { AddButton, AntsomiTheme } from "@antscorp/ui";

export function Example() {
  return (
    <AntsomiTheme>
      <AddButton label="Add" />
    </AntsomiTheme>
  );
}

选择样式X 消费者 antscorp-source 并提取自己的 CSS 而不是导入 ui.css见 仓库读取器 用于源配置、链接开发和发布.

本地化

主机翻译套件 label编号 :labels说明和错误。 Astryx拥有的日历, 清晰、搜索和状态文本使用 InternationalizationProvider 来自同一外观 :

import { getLocaleDirection, InternationalizationProvider } from "@antscorp/ui/astryx/i18n";
import arSA from "@antscorp/ui/astryx/locales/ar-SA.generated.js";

const locale = "ar-SA";
const dir = getLocaleDirection(locale);

// The host also sets <html dir={dir}>; this provider renders no DOM element.
<InternationalizationProvider locale={locale} messages={{ [locale]: arSA }} dir={dir}>
  <AntsomiTheme>{/* Views with host-translated labels. */}</AntsomiTheme>
</InternationalizationProvider>;

留着DOM dir 和提供方方向同步。 使用 overrides 为稀疏, 本地密钥 上游文本更改;缺失的译名会回溯到英文. DateTimeInput 默认为 hourFormat="12h"; 设置 hourFormat="24h" 一个24小时的钟。 不需要第二层翻译.