# @driif/motiv 中文文档

规范地址：https://npmcn.com/package/%40driif/motiv/

版本：0\.30\.0
npm 元数据更新时间：2026-11-11T17:09:19.554Z
中文译文更新时间：2026-11-12T20:49:48.570Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40driif/motiv
原文对照：https://npmcn.com/package/%40driif/motiv/?lang=original
源码仓库：https://github.com/driif/motiv

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

- 包体积（解压后）：767 kB，426 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=19，react-dom \>=19
- 首次发布：2026-10-19T17:33:01.157Z
- 最新版本发布：2026-11-11T17:09:19.123Z
- 近 30 天下载量：5055（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 35 个）

## 中文简介

以纯主题 CSS 反应 UI 组件

## 安装

```sh
npm install @driif/motiv
```

也可以使用：`pnpm add @driif/motiv`、`yarn add @driif/motiv`、`bun add @driif/motiv`

## README

# @ driif/ motiv (英语)

以平坦,可主题的 CSS 反应组件. 只有无害环境管理, 树能震动, 服务器安全.

## 安装

```sh
pnpm add @driif/motiv
```

`react` 财务报告和审定财务报表 `react-dom` 19+是同级依赖.

## 样式

motiv的样式是共享一个组件 API. **动力学** 是默认: 根 输出 `styles.css`。 。 。 . **抽签** 是手画样式的下方 `@driif/motiv/drawn` (见 [绘图样式](https://npmcn.com/package/%40driif/motiv/#readme-drawn-style)) (中文(简体) ). **矩阵** 下方为磷绿色终端样式 `@driif/motiv/matrix` (见 [矩阵样式](https://npmcn.com/package/%40driif/motiv/#readme-matrix-style)) (中文(简体) ).

在应用程序的条目或基底布局下导入样式表一次 :

```ts
import '@driif/motiv/styles.css';
```

-   `@driif/motiv/base.css` ——可选最小重置和打字(`box-sizing`字体和 颜色,标题字体).
-   `@driif/motiv/tokens.css` ——设计代号单为只想要变量的应用程序.

## 使用量

```tsx
import { Button, Card, CardBody, CardFooter, CardHeader } from '@driif/motiv';

<Card>
  <CardHeader title="Users" description="Active this week" />
  <CardBody>128 people signed in.</CardBody>
  <CardFooter>
    <Button variant="outline">Export</Button>
    <Button>View all</Button>
  </CardFooter>
</Card>;
```

`Button` 带 `variant` (单位:千美元)`primary` • 妇女 `secondary` • 妇女 `outline` • 妇女 `ghost` • 妇女 `danger`, (中文(简体) ), `size` (单位:千美元)`sm` • 妇女 `md` • 妇女 `lg`, (中文(简体) ), `iconLeft`, (中文(简体) ), `iconRight`, (中文(简体) ), `loading` 和每个本地人 `<button>` 道具 (英语). 这个 默认为 `type="button"`。 。 。 .

链接保持应用程序的自有功能 `buttonClassName`数字 :

```tsx
import { buttonClassName } from '@driif/motiv';
import { Link } from 'react-router';

<Link to="/settings" className={buttonClassName({ variant: 'outline' })}>
  Settings
</Link>;
```

## 线性组件

再说 `Button` 财务报告和审定财务报表 `Card`,根入器 动力学集: `MagneticButton`, (中文(简体) ), `MorphSubmitButton`, (中文(简体) ), `BellButton`, (中文(简体) ), `NotificationList`, (中文(简体) ), `Badge`, (中文(简体) ), `BadgeButton`, (中文(简体) ), `CopyField`, (中文(简体) ), `RadialMenu`, (中文(简体) ), `IconButton`, (中文(简体) ), `IconButtonGroup`, (中文(简体) ), `MenuButton`, (中文(简体) ), `ThemeToggle`, (中文(简体) ), `SegmentedControl`, (中文(简体) ), `ElasticTabs`, (中文(简体) ), `FilterChips`, (中文(简体) ), `Radio`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `Stepper`, (中文(简体) ), `CommandMenu`, (中文(简体) ), `FloatingField`, (中文(简体) ), `OtpInput`, (中文(简体) ), `ExpandingSearch`, (中文(简体) ), `FrequencySlider`, (中文(简体) ), `MomentumSlider`, (中文(简体) ), `LiquidSwitch`, (中文(简体) ), `SpringCheckbox`, (中文(简体) ), `LikeButton`, (中文(简体) ), `MuteToggle`, (中文(简体) ), `SlipCard`, (中文(简体) ), `Accordion`, (中文(简体) ), `Carousel`, (中文(简体) ), `GlideNav`, (中文(简体) ), `StepProgress`, (中文(简体) ), `DrillStack`, (中文(简体) ), `ProgressRing` 财务报告和审定财务报表 `Odometer`,加上当地人 `Confirm` 财务报告和审定财务报表 `Dialog` 模式, `FileUpload`, (中文(简体) ), `DatePicker`, (中文(简体) ), `Table` 与 `TableColumnsMenu`,以及 `MultiSelect`,可搜索的多种选择 `name` 隐藏一个 按数值输入。 每个动画只移动 `transform` 财务报告和审定财务报表 `opacity`· ; `prefers-reduced-motion` 静态 他们. `IconButton`, (中文(简体) ), `MenuButton`, (中文(简体) ), `ThemeToggle`, (中文(简体) ), `Radio`, (中文(简体) ), `RadioGroup` 财务报告和审定财务报表 `SegmentedControl` 带 因此切换样式只改变导入. `GlideNav` 选项 `href` ,然后 `<a>`· ; `onChange(id, event)` 让一个 路由器 `preventDefault()`。服务器已交付,活动项已显示其口音栏.

```tsx
import { LiquidSwitch, SegmentedControl } from '@driif/motiv';

<SegmentedControl label="Range" options={ranges} value={range} onChange={setRange} />;
<LiquidSwitch label="Wi-Fi" checked={wifi} onChange={setWifi} />;
```

## 通知

`NotificationList` 是一个 `BellButton` 打开在本地 `popover="auto"`: 点击、 输入和空间来切换它、 越狱和外部点击关闭它和焦点 回到铃声。 应用程序拥有项目、其持久性和未读数:

```tsx
import { NotificationList } from '@driif/motiv';

<NotificationList
  items={items}
  count={unread}
  onDismiss={(id) => remove(id)}
  onDismissAll={clear}
  onOpen={(id) => navigate(`/inbox/${id}`)}
/>;
```

每件东西都用 `id`, (中文(简体) ), `title`, (中文(简体) ), `time`选项 `text`, (中文(简体) ), `tone` (单位:千美元)`info`, (中文(简体) ), `success`, (中文(简体) ), `warning`, (中文(简体) ), `danger`; 装饰性边缘)和 `href`。当 `href` 设置,否则 按钮 `onOpen` 设置;打开一个项目会关闭面板. `count` 默认为 `items.length`。 。 。 . `label` (单位:千美元)`Notifications`,以及小组标题, `newText`, (中文(简体) ), `emptyText`, (中文(简体) ), `dismissLabel` 财务报告和审定财务报表 `dismissAllLabel` 接受翻译字符串。 其他按钮道具和 `ref` 转到 钟声。 当焦点项目被删除时,焦点移动到下一个项目,前一个,或者 标题。 面板不宣布新项目;添加您自己的活区域或 `toast()` 对于这个.

## 动作菜单

`ActionMenu` 是打开动作菜单的按钮。 这是在拉迪克斯的下拉菜单上建造的 所以 而根导入从不加载 Radix。 它的风格已经进入了 `@driif/motiv/styles.css`数字 :

```tsx
import { ActionMenu } from '@driif/motiv/action-menu';

<ActionMenu
  label="Export"
  variant="outline"
  items={[
    { label: 'CSV', onSelect: exportCsv },
    { label: 'XLSX', onSelect: exportXlsx, disabled: true },
  ]}
/>;
```

`label` 默认为 `Actions`. 所有其他道具(`variant`, (中文(简体) ), `size`, (中文(简体) ), `loading`, (中文(简体) ), `disabled`, (中文(简体) ), `ref`, (中文(简体) ), 本地属性)转到触发器 `Button`时,触发器被禁用 `loading`, (中文(简体) ), `disabled` 或者说 `items` 为空。 菜单在触发器旁边, 而不是在传送门, 所以子树 主题和符号覆盖到它.

## 选择

`Select` 财务报告和审定财务报表 `TerminalSelect` 接受 `clearable` 以添加一个明确的选项。 它召唤 `onChange('')`。 。 。 . 设定 `clearLabel` 更改选项文本;默认为 `Clear selection`。一个已存在的空值 选项作为明确的选项.

## 确认

`Confirm` 是一种受控本地模式 `<dialog>`。它的动作默认使用危险变量;设置 `confirmVariant="primary"` 用于无损行动。 影响计数和 错误进入 `children`。 。 。 .

```tsx
import { Button, Confirm } from '@driif/motiv';
import { useState } from 'react';

function DeleteProject({ slug, deleteProject }: { slug: string; deleteProject: () => Promise<void> }) {
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState(false);
  const [error, setError] = useState('');

  async function remove() {
    setPending(true);
    setError('');
    try {
      await deleteProject();
      setOpen(false);
    } catch {
      setError('Could not delete the project. Please try again.');
    } finally {
      setPending(false);
    }
  }

  return (
    <>
      <Button variant="danger" onClick={() => { setError(''); setOpen(true); }}>
        Delete project
      </Button>
      <Confirm
        open={open}
        title="Delete project?"
        slug={slug}
        pending={pending}
        onConfirm={remove}
        onCancel={() => setOpen(false)}
      >
        <p>This action cannot be undone.</p>
        <ul><li>3 bindings will also be deleted.</li></ul>
        {error && <p role="alert">{error}</p>}
      </Confirm>
    </>
  );
}
```

与 `slug`中,删除将禁用,直到字段完全匹配;shall显示为字段 指点. `confirmLabel` (单位:千美元)`Delete`, (中文(简体) ), `cancelLabel` (单位:千美元)`Cancel`和 `slugLabel` (单位:千美元)`Type the slug to confirm`)取翻译字符串. `pending` 锁定按钮、字段和 逃开 对话框从不关闭 : 取消和逃逸呼叫 `onCancel`,背景确实如此 没什么,你的应用程序 `open={false}`。焦点开始于取消或字段,然后返回 关闭打开器.

## 对话框

`Dialog` 是一种受控本地模式 `<dialog>` 对于免费内容:标题、关闭按钮和您的 孩子们 逃跑、关闭按钮和点击背景呼叫 `onClose`; 对话框从未 关闭自己。 焦点返回打开器,后面的页面不滚动,身体滚动 在90小时之内. `size="wide"` 将宽度从48雷米提高到60雷米; `closeLabel` 默认为 `Close`背景主题 `--motiv-dialog-backdrop`。 。 。 .

```tsx
import { Button, Dialog } from '@driif/motiv';
import { useState } from 'react';

function EditQuestion() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Edit question</Button>
      <Dialog open={open} title="Edit question" onClose={() => setOpen(false)}>
        <QuestionEditor onSaved={() => setOpen(false)} />
      </Dialog>
    </>
  );
}
```

## 土司

上一个 `<Toaster />` 每个应用程序(或一个共享的Astro岛),然后呼叫 `toast()` 从 任何浏览器回调 。 不需要提供者;第二个主机重复同样的通知. 此 API 只可用动能样式, 带有 `@driif/motiv/styles.css`。 。 。 .

```tsx
import { dismissToast, toast, Toaster } from '@driif/motiv';

<Toaster label="Notifications" dismissLabel="Dismiss" />;

toast({ tone: 'success', title: 'Changes saved', description: 'Your project is up to date.' });
const id = toast({ tone: 'error', title: 'Could not save', description: 'Please try again.' });
dismissToast(id);
```

`tone` 默认为 `info`5000毫秒后成功和信息解职;错误保留到解职为止. `duration` 覆盖时间( 毫秒) , 以 `Infinity` 坚持不懈 最多3个 土司以到来顺序出现,最出名于下;长堆卷卷于取景口. 其他人等待退出后一个槽打开;他们的计时器在显示时开始. 鼠标徘徊在上空 内置堆栈或焦点会暂停每个可见的计时器,保留剩余时间直到 两端 触摸指针不会在悬浮时停下来. `dismissToast(id)` 这是安全的重复.

成功和信息使用礼貌的公告;错误使用提醒. 新通知从不移动 焦点。 放弃敬酒 键盘可见的焦点 移动焦点到另一个解职按钮, 或者回到堆外边 指针解开焦点;剩余计时器在 鼠标不再徘徊于堆放地上,或者在触碰后立即被解职. `label` 财务报告和审定财务报表 `dismissLabel` 接受翻译字符串; 本地区域道具和 `ref` 通过。 服务器 呼吁 `toast()` 什么都不做,返回空字符串;服务器渲染生成空堆栈.

该堆栈在本土模式对话框下方使用固定定位. 虽然 `Confirm` 打开, 显示 需要注意的现有错误 `children` 插槽(例如, `<p role="alert">`, (中文(简体) ), 因为模式使得其他的页面变得惰性.

## 文件上传

应用用品 `upload` ,并获得它自己预先签名的URL. `putFile` 发送文件正文通过 XHR, 报告进展情况的百分比(0-100)和使用 `file.type` 页:1 `Content-Type` 除非 `contentType` 提供。 其信头必须匹配在签名 URL 时使用的 .

```tsx
import { FileUpload, putFile } from '@driif/motiv';

function Attachments({
  getUploadUrl,
}: {
  getUploadUrl: (file: File, signal: AbortSignal) => Promise<string>;
}) {
  return (
    <FileUpload
      multiple
      upload={async (file, { signal, onProgress }) => {
        const url = await getUploadUrl(file, signal);
        await putFile(url, file, { signal, onProgress });
      }}
    />
  );
}
```

单一选择取代上一个条目; `multiple` 附录. `onUploaded(file)` 运行 成功吗. `onRemove(file)` 在删除或替换已完成条目时运行; 取消 上传只中止其信号 。 删除失败的条目不调用 `onRemove`。 。 。 . `onDiscard(file)` 报告取消、失败或替换未完成的条目。 它不会卸载.

过 `attachedFiles` 显示应用程序已经保存的文件。 每个项目 `id`, (中文(简体) ), `name`, (中文(简体) ), `onRemove`选择 `size` 财务报告和审定财务报表 `onDownload`。应用程序拥有此列表。 何时 `attachedFiles` 提供, 成功上传离开内部列表; 更新 `attachedFiles` 从 `onUploaded` 用来显示它. 组件不匹配取名文件,因此两个文件可以有同名. 使用 `formatDownloadLabel(name)` 财务报告和审定财务报表 `formatRemoveLabel(name)` 来翻译附件动作名称.

自定义拾取器、状态和动作 `label`, (中文(简体) ), `uploadingLabel`, (中文(简体) ), `uploadedLabel`, (中文(简体) ), `errorLabel`, (中文(简体) ), `retryLabel`, (中文(简体) ), `removeLabel`, (中文(简体) ), `cancelLabel` 财务报告和审定财务报表 `downloadLabel`。 。 。 . `errorMessage` 供给倒计时 当拒绝者没有任何消息的时候; `formatSize(bytes)`, (中文(简体) ), `formatUploadedMessage(name)` 财务报告和审定财务报表 `formatErrorMessage(name)` 定制大小和直播通知。 本地输入道具和 `ref` 到达文件输入; `className` 财务报告和审定财务报表 `style` 适用于包装.

`putFile` 用英语拒绝 `Error` 优先于 `errorMessage`; 包装 通话 `upload` 用本地化消息重投,或 `new Error('')` 用倒计时.

选取者每次选择后都会重新排序, 故为本地 `required` 验证不支持; 验证 使用 `onUploaded` 财务报告和审定财务报表 `onRemove`。 。 。 .

## 日期

`DatePicker` 覆盖本地 `<input type="date">` 或者说 `type="datetime-local"` 输入 `TextField` 查看并添加一个清晰的按钮,同时它持有一个值。 价值是本地的字符串, `YYYY-MM-DD`, (中文(简体) ), `YYYY-MM-DDTHH:mm` (单位:千美元) `:ss` 非零秒)或 `''`,并达到 `onChange`, (中文(简体) ), `FormData` 财务报告和审定财务报表 `min`编号 :`max` 不变.

```tsx
import { DatePicker } from '@driif/motiv';

<DatePicker label="Due date" value={due} onChange={(event) => setDue(event.target.value)} />;
<DatePicker label="Starts" type="datetime-local" name="starts" min="2026-11-02T09:00" required />;
```

浏览器绘制日期格式、取出器及其指示器;它们遵循浏览器语言 和浏览器的不同。 动机使用不 `Date` 对象和转换无时区: a `datetime-local` 值是时钟时间,应用程序将其变成瞬间.

清算电话 `onChange` 一次与 `''` 并突出输入的焦点; 按钮被命名 `clearLabel` (默认) `"Clear"`)加上标签. 部分输入的日期仍然 `''`按钮 日期完成后立即显示。 错误工作于 `TextField`: 通过 `aria-invalid` 显示 信件输入 `hint` 或将其与 `aria-describedby`一个空 `required` 日期会变成红色 用户已与之互动.

## 表格

`Table` 成为本地人 `<table>` 从 `columns` 财务报告和审定财务报表 `rows`。每个栏都有 `id`,简洁文本 `label` (亦为修改控件名称),可选 `header` 替换标签的节点,用于 示例排序按钮,以及 `cell(row)` 变形器。 开始于 `width` (默认200px)和 调整大小 `minWidth` (默认 80px) 和 800px 通过拖取页眉边缘或用箭头 键;双击或输入重置键. `onColumnWidthsChange` 每个完成拖放时, 键 按下或重置,从不拖动,这样可以保存到服务器上。 无 `columnWidths` 表单 保持宽度本身.

`TableColumnsMenu` 只列出列: 应用程序保存 `hiddenColumns` 和过滤器 `columns` 在传递他们之前 `Table`. 存储隐藏的ID表示添加的列后出现.

```tsx
import { Table, TableColumnsMenu } from '@driif/motiv';

<TableColumnsMenu columns={columns} hiddenColumns={hidden} onHiddenColumnsChange={setHidden} />;
<Table
  caption="Submitted forms"
  columns={columns.filter((column) => !hidden.includes(column.id))}
  rows={entries}
  getRowKey={(entry) => entry.id}
  columnWidths={widths}
  onColumnWidthsChange={setWidths}
  style={{ maxHeight: '32rem' }}
/>;
```

桌子在包装箱里滚动 头排只接住包装 `height` 或者说 `max-height`,如上. (中文(简体) ). 细胞停留在一行上并以椭圆为一端.

长列表,导入 `DataTable` 从 `@driif/motiv/data-table`。它需要同样的道具与 `Table` 加号 `maxHeight` (默认) `70vh`和 `estimateRowHeight` (默认为40px). 它只挂载 视图中的行, 测量每个挂载行, 并保持一个有焦点的行, 当它向外滚动时 视图。 屏幕阅读器通过全数计数 `aria-rowcount` 财务报告和审定财务报表 `aria-rowindex`排序, 过滤和选择与应用程序一样 `Table`。 。 。 .

```tsx
import { DataTable } from '@driif/motiv/data-table';

<DataTable caption="Rows" columns={columns} rows={rows} getRowKey={(row) => row.id} maxHeight="32rem" />;
```

## 标记

导入 `Markdown` 财务报告和审定财务报表 `MarkdownEditor` 从 `@driif/motiv/markdown`,与 `@driif/motiv/styles.css`。解析器依赖性远离根 JavaScript 条目; 仅导入 `Markdown` 也把编辑器放出捆绑.

```tsx
import { Markdown, MarkdownEditor } from '@driif/motiv/markdown';
import '@driif/motiv/styles.css';

<Markdown>{'# Notes\n\nA **clear update** with [a link](/guide).'}</Markdown>;
<MarkdownEditor label="Notes" name="notes" defaultValue="## Draft" />;
```

`Markdown` 使 CommunityMark 标题、列表、强调、引用、链接、图像和代码. Raw HTML 保留文本,生成的 HTML 被消毒. 链接允许 `http`, (中文(简体) ), `https`, (中文(简体) ), `mailto`, (中文(简体) ), `xmpp` 和相对目的地; 不安全的协议,包括 `irc` 财务报告和审定财务报表 `ircs`, (中文(简体) ), 被删除。 栅栏代码保留其 `language-*` 类没有语法加亮. `children` 默认为空字符串;本地 div 道具和 `ref` 通过,但 `dangerouslySetInnerHTML`。 。 。 .

`MarkdownEditor` 包装 `Textarea` 带有始终可见的预览。 使用字符串 `value` 财务报告和审定财务报表 本地语言 `onChange` 用于控制编辑,或 `defaultValue` 用于无控制的编辑 本地形式重置支持 . `label` 默认为 `Markdown` 财务报告和审定财务报表 `previewLabel` 改为 `Preview`· ; 预览不宣布每次按键。 文本区域道具,包括 `hint`, (中文(简体) ), `rows`, (中文(简体) ), `maxRows`, (中文(简体) ), `name`, (中文(简体) ), `disabled`, (中文(简体) ), `readOnly` 文本区域 `ref`通过. `className` 财务报告和审定财务报表 `style` 适用于编辑器包装。 编辑器和预览堆放在窄容器中. 在Astro中,添加 `client:load` 给编辑岛; `Markdown` 可以渲染为静态 HTML.

## 绘图样式

`@driif/motiv/drawn` 是手绘样式 : `Link`, (中文(简体) ), `TextField`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Radio`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `Tabs`, (中文(简体) ), `SegmentedControl`, (中文(简体) ), `Select`, (中文(简体) ), `NavItem`, (中文(简体) ), `IconButton`, (中文(简体) ), `IconButtonGroup`, (中文(简体) ), `MenuButton`, (中文(简体) ), `ThemeToggle`, (中文(简体) ), `OrbitalThemeToggle` 财务报告和审定财务报表 `Progress`。它的样式表是自成一体的(纸箱、底盘、绘图组件和捆绑的) Caveat字体,所以一个绘制的应用程序导入它 **改为** `styles.css`永远不要与它并肩作战:

```tsx
import '@driif/motiv/drawn.css';
import { Checkbox, Link, TextField } from '@driif/motiv/drawn';

<TextField label="Email" type="email" hint="We only use it to reply." />;
<Checkbox label="Send me the newsletter" />;
<Link href="https://example.com" external>
  Read the guide
</Link>;
```

`Link` 带 `arrow` (默认) `true`, (中文(简体) ), `external` (增加数) `target="_blank"` 财务报告和审定财务报表 `rel="noopener noreferrer"`和 `externalLabel` (屏幕阅读文本, 默认值) `'(opens in a new tab)'`) (中文(简体) ). `RadioGroup` 带 `name`, (中文(简体) ), `legend`, (中文(简体) ), `options`, (中文(简体) ), `value` 财务报告和审定财务报表 `onChange`。 。 。 .

`NavItem` 制作一个 `<a>` 当给定时 `href` (通过路由器) `onClick` (a) 与《京都议定书》第三条第1款(一)项和(一)项一并解读 `<button>`· ; `active` 套装 `aria-current="page"`。 。 。 . `MenuButton` (单位:千美元)`open`, (中文(简体) ), `onToggle`和 `ThemeToggle` (单位:千美元)`dark`, (中文(简体) ), `onToggle`受控制; `ThemeToggle` 从未设定 `data-theme` 自己来. 图标是应用程序提供的 `ReactNode`编号. `IconButton` 带 `shape="round"` 每页中循环按钮 样式; 默认保留 `square`。 。 。 .

## 矩阵样式

`@driif/motiv/matrix` 是一个单一空间, phosphor- green 终端样式 : `GlitchThemeToggle`, (中文(简体) ), `ScanButton`, (中文(简体) ), `TerminalSelect`, (中文(简体) ), `DecodeSecretField`, (中文(简体) ), `SignalBurger`, (中文(简体) ), `HudTabs` 财务报告和审定财务报表 `ChevronNav`, (中文(简体) ), 加号 `Button`, (中文(简体) ), `buttonClassName`, (中文(简体) ), `IconButton`, (中文(简体) ), `IconButtonGroup`, (中文(简体) ), `Card`, (中文(简体) ), `CardHeader`, (中文(简体) ), `CardBody`, (中文(简体) ), `CardFooter`, (中文(简体) ), `TextField`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Radio`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `Progress` 财务报告和审定财务报表 `Link` 和他们画的道具一样 它的样式表是自成一体的,所以是一个矩阵应用程序 进口 **改为** `styles.css`数字 :

```tsx
import '@driif/motiv/matrix.css';
import { DecodeSecretField, TerminalSelect } from '@driif/motiv/matrix';

<TerminalSelect label="Auth method" prefix="auth://" options={methods} value={method} onChange={setMethod} />;
<DecodeSecretField label="Root token" value={token} onChange={setToken} />;
```

`TerminalSelect` 是一个只选中的组合框( arros, home, Enter, Enter, Space, Escape, 字母); 选项 `value`, (中文(简体) ), `label`, (中文(简体) ), `hint` 和可选 `code` 显示在触发器中. `DecodeSecretField` 财务报告和审定财务报表 `TerminalSelect` 报告纯值通过 `onChange(value)`· ; `ChevronNav` 报告 `onChange(id, event)`,所以路由器可以 `preventDefault()` 打开 `href` 页:1. `GlitchThemeToggle` (单位:千美元)`dark`, (中文(简体) ), `onToggle`和 `SignalBurger` (单位:千美元)`open`, (中文(简体) ), `onToggle`)被控制. 每个可见的字符串都是有英语默认的道具.

## 他们

一切由我驱动 `--motiv-*` 自定义属性, 所有库 CSS 都位于 `@layer motiv.*`,因此没有层次的应用程序 CSS 赢得没有 `!important`。 。 。 .

```css
:root {
  --motiv-color-primary: #2563eb;
  --motiv-color-on-primary: #ffffff;
}
```

暗模式 : `<html data-theme="dark">`没有 `data-theme`, (中文(简体) ), `prefers-color-scheme` 适用. 故事书 [**文献/专题**](https://npmcn.com/package/%40driif/motiv/src/docs/Theming.mdx) 页面列出每个符号和组件级别覆盖.

## 小型布局

使用 `40rem` 作为小分点。 其下为堆放多栏布局. 在 视图或容器查询:

```css
@media (width < 40rem) {
  .layout {
    grid-template-columns: 1fr;
  }
}

@container (width < 40rem) {
  .layout {
    grid-template-columns: 1fr;
  }
}
```

## 天体

组件向静态 HTML 渲染,不需要客户端指令,除非您附加了处理器:

```astro
---
import '@driif/motiv/styles.css';
import { Button } from '@driif/motiv';
---
<Button variant="secondary">Static button</Button>
```

导入基底布局中的样式表, 这样每个页面都会得到它 .

## 其他框架

长相完全生活在 `styles.css`,因此普通的HTML,Vue或Svelte可以直接使用这些类:

```html
<button type="button" class="motiv-btn motiv-btn--primary motiv-btn--md">
  <span class="motiv-btn__label">Save</span>
</button>
```

## 发展

```sh
pnpm check            # Biome
pnpm typecheck        # tsc
pnpm test             # Vitest
pnpm build            # dist/ (JS, d.ts, CSS)
pnpm check:package    # publint, attw, tree-shaking check
pnpm storybook        # docs on http://localhost:6006
```

## 释放

耗用应用程序的每个更改都可以看到一个更改器:运行 `pnpm changeset` 并用 一条线。 打开 `main`,发布工作流程打开了“Version套件” PR;将其合并到 没有.

## 常见问题

### @driif/motiv 是什么？

以纯主题 CSS 反应 UI 组件

### 如何安装 @driif/motiv？

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

### @driif/motiv 支持 TypeScript 吗？

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

### @driif/motiv 支持 ESM 还是 CommonJS？

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

### @driif/motiv 可以商用吗？

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

### @driif/motiv 的下载量有多少？

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

### @driif/motiv 还在维护吗？

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