# @duskmoon-dev/art-components 中文文档

规范地址：https://npmcn.com/package/%40duskmoon-dev/art-components/

版本：0\.6\.4
npm 元数据更新时间：2026-11-12T16:07:30.511Z
中文译文更新时间：2026-11-14T11:39:17.469Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40duskmoon-dev/art-components
原文对照：https://npmcn.com/package/%40duskmoon-dev/art-components/?lang=original
项目主页：https://github.com/duskmoon-dev/duskmoon-react#readme
源码仓库：https://github.com/duskmoon-dev/duskmoon-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：39.4 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=19\.0\.0，react-dom \>=19\.0\.0，@duskmoon-dev/css-art \>=1\.17\.0
- 首次发布：2026-06-11T01:41:46.649Z
- 最新版本发布：2026-11-12T16:07:29.365Z
- 近 30 天下载量：2064（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：24（近 12 个月 24 个）

## 中文简介

@duskmoon-dev/css-art纯 CSS 插图的响应组件

## 安装

```sh
npm install @duskmoon-dev/art-components
```

也可以使用：`pnpm add @duskmoon-dev/art-components`、`yarn add @duskmoon-dev/art-components`、`bun add @duskmoon-dev/art-components`

## README

# @duskmoon-dev/art-组件

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

## 安装

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

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

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

## 使用量

```tsx
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](https://github.com/duskmoon-dev/duskmoonui/issues/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` 禁用文本区和两个动作.

```tsx
<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 }}` 防止激活。 它的复选框在前面 如此上游检查/覆盖选择器的玻璃球依然有效.

## 发展

```bash
# Build the wrapper package
bun run build

# Run wrapper tests
bun run test

# Typecheck
bun run typecheck
```

## 常见问题

### @duskmoon-dev/art-components 是什么？

@duskmoon-dev/css-art纯 CSS 插图的响应组件

### 如何安装 @duskmoon-dev/art-components？

在项目目录运行 npm install @duskmoon-dev/art-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=19\.0\.0）、react-dom（\>=19\.0\.0）、@duskmoon-dev/css-art（\>=1\.17\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @duskmoon-dev/art-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @duskmoon-dev/art-components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @duskmoon-dev/art-components 可以商用吗？

@duskmoon-dev/art-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @duskmoon-dev/art-components 的下载量有多少？

根据 npm 官方下载统计，@duskmoon-dev/art-components 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,064 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @duskmoon-dev/art-components 还在维护吗？

最新版本 0\.6\.4 发布于 2026/11/13（1 天前）；至今共发布 24 个版本，其中过去 12 个月发布了 24 个；首次发布于 2026/06/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。