@ driif/ motiv (英语)
以平坦,可主题的 CSS 反应组件. 只有无害环境管理, 树能震动, 服务器安全.
安装
pnpm add @driif/motiv
react 财务报告和审定财务报表 react-dom 19+是同级依赖.
样式
motiv的样式是共享一个组件 API. 动力学 是默认: 根
输出 styles.css。 。 。 . 抽签 是手画样式的下方 @driif/motiv/drawn (见
绘图样式) (中文(简体) ). 矩阵 下方为磷绿色终端样式
@driif/motiv/matrix (见 矩阵样式) (中文(简体) ).
在应用程序的条目或基底布局下导入样式表一次 :
import '@driif/motiv/styles.css';
@driif/motiv/base.css——可选最小重置和打字(box-sizing字体和 颜色,标题字体).@driif/motiv/tokens.css——设计代号单为只想要变量的应用程序.
使用量
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数字 :
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()。服务器已交付,活动项已显示其口音栏.
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": 点击、 输入和空间来切换它、 越狱和外部点击关闭它和焦点
回到铃声。 应用程序拥有项目、其持久性和未读数:
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数字 :
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。 。 。 .
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。 。 。 .
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。 。 。 .
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 默认为 info5000毫秒后成功和信息解职;错误保留到解职为止.
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 时使用的 .
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 不变.
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表示添加的列后出现.
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。 。 。 .
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 也把编辑器放出捆绑.
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永远不要与它并肩作战:
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数字 :
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。 。 。 .
:root {
--motiv-color-primary: #2563eb;
--motiv-color-on-primary: #ffffff;
}
暗模式 : <html data-theme="dark">没有 data-theme, (中文(简体) ), prefers-color-scheme 适用.
故事书 文献/专题 页面列出每个符号和组件级别覆盖.
小型布局
使用 40rem 作为小分点。 其下为堆放多栏布局. 在
视图或容器查询:
@media (width < 40rem) {
.layout {
grid-template-columns: 1fr;
}
}
@container (width < 40rem) {
.layout {
grid-template-columns: 1fr;
}
}
天体
组件向静态 HTML 渲染,不需要客户端指令,除非您附加了处理器:
---
import '@driif/motiv/styles.css';
import { Button } from '@driif/motiv';
---
<Button variant="secondary">Static button</Button>
导入基底布局中的样式表, 这样每个页面都会得到它 .
其他框架
长相完全生活在 styles.css,因此普通的HTML,Vue或Svelte可以直接使用这些类:
<button type="button" class="motiv-btn motiv-btn--primary motiv-btn--md">
<span class="motiv-btn__label">Save</span>
</button>
发展
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;将其合并到
没有.