@calimero-network/mero-ui (英语)

为Calimero设计系统所建的综合性React UI组件库. 这个软件包提供了一套完整的可访问,自定义的组件,并带有内置的黑暗主题支持.

安装

npm install @calimero-network/mero-ui
# or
yarn add @calimero-network/mero-ui
# or
pnpm add @calimero-network/mero-ui

快速启动

1. 进口CSS变量

重要: 您必须导入 CSS 变量以进行适当的造型 。 选择以下方法之一:

选项A:直接导入 CSS 文件

/* In your main CSS file */
@import "@calimero-network/mero-ui/styles.css";

选项B: HTML 导入

<link
  rel="stylesheet"
  href="node_modules/@calimero-network/mero-ui/dist/styles.css"
/>

备选办法C:方案注射

import { cssVariables } from "@calimero-network/mero-ui";

// Inject CSS variables into your document
const style = document.createElement("style");
style.textContent = cssVariables;
document.head.appendChild(style);

2. 进口和使用部件

import React from "react";
import { Button, Card, Text, Input } from "@calimero-network/mero-ui";

function App() {
  return (
    <div>
      <Card>
        <Text size="lg" weight="bold">
          Welcome to Calimero UI
        </Text>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Get Started</Button>
      </Card>
    </div>
  );
}

export default App;

可用组件

布局结构( S)

• 方框 - 灵活集装箱部分
• 弹性 - 弹性箱集装箱
• 堆栈 - 垂直/横向堆栈布局
• 网格 打开 网格项目 - CSS系统 网格布局系统
• 中间 - 横向和纵向中心内容
• 空间器 - 在元素之间添加间隔
• 版式 - 主布局包装器
• 集装箱 - 反应容器
• 奥特拉尤特 - 认证页面布局

导航

• 导航 - 顶端导航栏
• 边栏 - 侧导航面板
• 面包屑 - 导航面包屑
• 菜单 - 下拉和上下文菜单
• 标签 - 标签导航
• 手风琴 - 可折叠内容部分
• 命令 调色板 - 命令搜索接口

窗体输入( I)

• 投入 - 文本输入字段
• 文本区域 - 多行文字输入
• 数字输入 - 有控件的数字输入
• 选择 - 下拉选择
• 复选框 - 复选框输入
• 无线电 打开 无线电组 - 无线电按钮输入
• 切换 - 切换开关
• 日期选择器 - 选择日期
• 时间选择器 - 时间选择
• 文件加载 - 文件上传组件
• 搜索输入 - 以建议搜索输入
• 标签输入 - 自动完成标记输入
• RichText编辑器 - 用 Tiptap 进行丰富的文本编辑
• 表单 - 附有验证的表格包装
• 构建Wizard - 多步形向导

数据显示

• 图表 - 有排序和过滤的数据表
• 数据表 - 高级数据表
• 可编辑表 - 可编辑的数据表
• 树表 - 等级数据表
• 列表 - 列表显示组件
• 树 - 树视图组件
• 日历 - 日历部分
• 时间线 - 时间线显示
• 恒星卡 - 统计显示卡
• 计量卡 - 有图表的计量
• 趋势指标 - 趋势可视化
• 空状态 - 空状态显示
• 斯凯莱通 - 正在装入占位符

反馈状态( S)

• 警报 - 警报信息
• 横幅 - 班纳通知
• 土司 - 敬酒通知
• 通知中心 - 通知管理
• 徽标 - 身份证
• 进展 - 进度指标
• 装入器 - 装入自旋器
• 旋转器 - 装入旋转器
• 模式 - 模块对话框
• 过量 - 填充内容
• 工具提示 - 工具提示上线

媒体内容( C)

• 有远见 - 用户外观显示
• 图像 - 图像组件
• 图标 - 图标组件
• 分隔符 - 视觉分离器
• 文件预览 - 文件预览组件

类型

• 文本 - 有变体的文本组件
• 标题 - 标题部分
• 代码 - 代码显示
• 链接 - 链接部分

工具

• 标记 - 标记组件
• 复制到剪贴板 - 复制到剪贴板工具
• 搜索要点 - 突出显示搜索结果

设计托肯斯

该套件包括用于一贯样式的综合设计标志:

颜色

import { colors } from "@calimero-network/mero-ui";

// Brand colors
colors.brand[600]; // Primary brand color
colors.brand[700]; // Darker brand color

// Neutral colors
colors.neutral[200]; // Light gray
colors.neutral[800]; // Dark gray

// Semantic colors
colors.semantic.success; // Success green
colors.semantic.error; // Error red
colors.semantic.warning; // Warning orange
colors.semantic.info; // Info blue

// Background colors
colors.background.primary; // Primary background
colors.background.secondary; // Secondary background

间距

import { spacing } from "@calimero-network/mero-ui";

spacing[2]; // 0.5rem
spacing[4]; // 1rem
spacing[6]; // 1.5rem

类型

import { fonts } from "@calimero-network/mero-ui";

fonts.body; // Main body font
fonts.heading; // Heading font
fonts.secondary; // Secondary font

边框半径

import { radius } from "@calimero-network/mero-ui";

radius.sm; // 8px
radius.md; // 12px
radius.lg; // 16px

CSS 变量

所有设计符作为 CSS 变量可用 :

.my-component {
  background-color: var(--color-background-primary);
  color: var(--color-neutral-200);
  font-family: var(--font-body);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-neutral-600);
}

可用的 CSS 变量

颜色

• --color-neutral-200 改为 --color-neutral-900
• --color-brand-100, (中文(简体) ), --color-brand-600 改为 --color-brand-900
• --color-background-primary, (中文(简体) ), --color-background-secondary, (中文(简体) ), --color-background-tertiary
• --color-semantic-success, (中文(简体) ), --color-semantic-warning, (中文(简体) ), --color-semantic-error, (中文(简体) ), --color-semantic-info

间距

• --space-2, (中文(简体) ), --space-3, (中文(简体) ), --space-4, (中文(简体) ), --space-6

边框半径

• --radius-sm, (中文(简体) ), --radius-md, (中文(简体) ), --radius-lg

字体

• --font-body, (中文(简体) ), --font-heading, (中文(简体) ), --font-secondary

他们

设计系统以暗主题为默认构建. 所有组件都自动为暗主题使用相适应的颜色和样式. CSS变量确保在所有组件中保持一致.

类型脚本支持

全类型脚本支持包含所有组件及其道具的综合类型定义.

import { Button, ButtonProps } from '@calimero-network/mero-ui';

const MyButton: React.FC<ButtonProps> = ({ variant, children, ...props }) => {
  return <Button variant={variant} {...props}>{children}</Button>;
};

无障碍

所有组成部分都考虑到无障碍环境,包括:

• ARIA 属性
• 键盘导航支持
• 屏幕阅读器兼容性
• 重点管理
• 颜色对比遵守

浏览器支持

• 颜色( 最新)
• 火狐( 最新)
• 萨法里(最新)
• 边缘( 最新)

捐款

这个包件是卡利梅罗设计系统的一部分. 关于贡献指南和开发设置,请参见主设计系统存储器.

许可证

这个包裹是卡利梅罗计划的一部分. 请参见许可信息的主要项目.

更改日志

见 变动情况 详细列出变动和最新情况.