@duskmoon-dev/art-组件

反应包装 @duskmoon-dev/css-art。 。 。 .

安装

bun add @duskmoon-dev/art-components @duskmoon-dev/css-art react react-dom

在您的应用程序中导入 CSS 一次 :

@import "@duskmoon-dev/art-components/styles.css";

使用量

import { ArtMoon, ArtPlasmaBall } from "@duskmoon-dev/art-components";

export function Demo() {
  return (
    <>
      <ArtMoon crescent glow size="lg" />
      <ArtPlasmaBall defaultChecked />
    </>
  );
}

构成部分

• ArtMoon
• ArtSun
• ArtAtom
• ArtEclipse
• ArtMountain
• ArtSnowflake
• ArtPlasmaBall
• ArtCircularGallery
• ArtCatStargazer
• ArtFlowerAnimation
• ArtColorSpin
• ArtSynthwaveStarfield
• ArtCsswitch 编号 : ArtCSSwitch
• ArtSnowballPreloader
• ArtGeminiInput

ArtCircularGalleryItem 导出为 ArtCircularGallery。 。 。 .

ArtCircularGallery 默认情况下保持其图像链接的可访问性。 使用 decorative 仅当画廊是纯视觉的;然后删除其链接 从键盘标签顺序。 明确 aria-hidden 根上的数值 优先级.

ArtCsswitch 按钮是键盘可访问和默认名称。 设定 decorative 当控制台只是插图时;其按钮随即离开 标签顺序。 明确的根 aria-hidden 价值优先.

ArtGeminiInput 名称其默认 + 财务报告和审定财务报表 > 按钮 添加和发送。 何时 以自定义图标内容取代 glyph, 提供可访问按钮 名称通过 beforeButtonProps 或者说 afterButtonProps 如果内容没有.

大多数装饰成分都接受 size="sm" | "default" | "lg"· ; ArtMoon 财务报告和审定财务报表 ArtSun 还接受 size="xl". 将组件转发到其根 元素,接受 className, (中文(简体) ), style,并通过 DuskMoon CSS 自定义属性 style。 。 。 .

CSS和浏览器合同

包装提供CSS Art 1.210. 他们不添加 JavaScript动画引擎或浏览器多填充. CSS艺术使用现代CSS; 检查您支持的浏览器中的特性支持, 特别是以下内容:

• ArtCircularGallery 使用 CSS 运动路径, :has(), (中文(简体) ), @property,和CSS系统 锚地定位. 上游设计有20项指数化为1-20;较小 数组仍然支持,但只占据了该弧的部分。 项目打开 本地散列目标预览时 href 被省略或指向自己的 身份证 习惯 href 执行普通链接导航。 出版的CSS集 纸牌宽度改为 0.09 * --art-circular-gallery-size (上游文件符号) 表单 0.07 与已运出样式表不同 。 CSS 第1.20.7条 本地预览中心( n)黄昏月桂#77(三); 升级 CSS 依赖以接收该修补。 包装器使用上游 定位没有本地覆盖.
• ArtCsswitch 改变其在取景口宽度1010,670,460,和360px的布局. 这些是视野断点,独立于 size 道具 (英语). 当地人 按钮提供新闻反馈;应用动作是消费者拥有的.
• ArtSnowballPreloader 需求 --art-snowball-preloader-bg 以匹配 周围的背景,所以它的赛道口罩混合了进来。 上游文档 相对颜色支持为Chrome 119+,Firefox 128+,或Safari 16.4+;验证 您实际浏览器中的功能。 其从 URL 的雪质负载 上层CSS. 默认为装饰; 添加单独的状态信息 当宣布加载.
• ArtGeminiInput 用途 field-sizing: content 多线增长和 @property,梯度, 和遮罩的边框。 默认为 rows={1}· ; 呼叫器可以设置 rows 当然 给文本区域一个可访问的名称 textareaProps={{ "aria-label": "Message" }} 或关联 <label>。 。 。 . 添加和发送按钮没有默认应用程序动作 。 设定 afterButtonProps={{ type: "submit" }} 提交周围表格,或 提供按钮回调 . disabled 禁用文本区和两个动作.

<ArtSnowballPreloader
  style={{ "--art-snowball-preloader-bg": "#101827" }}
/>
<ArtGeminiInput
  placeholder="Write a message"
  textareaProps={{ "aria-label": "Message" }}
  afterButtonProps={{ type: "submit" }}
/>

动画定制在CSS中保留. 月光 太阳射线/脉冲 原子轨道, 相片地层 山地极光 落花雪花 猫眨眼 花园 生长, CorlSpin 环和雪球轨道没有额外的反应活化 API (英语). ArtSynthwaveStarfield paused 冻结上游场景动画. ArtPlasmaBall 提供本地复选框状态通过 checked, (中文(简体) ), defaultChecked, (中文(简体) ), onCheckedChange,以及 inputProps; 使用 inputProps={{ disabled: true }} 防止激活。 它的复选框在前面 如此上游检查/覆盖选择器的玻璃球依然有效.

发展

# Build the wrapper package
bun run build

# Run wrapper tests
bun run test

# Typecheck
bun run typecheck