X-Next

一套面向 Vue 3 + TypeScript 的企业级 UI 组件库。

X-Next 提供常用基础组件、表单组件、反馈组件、导航组件和数据展示组件，适合中后台系统、业务平台和内部工具使用。

文档

完整文档、组件示例和 API 说明请访问：

https://x-next.ztes.com

安装

pnpm add x-next

或使用 npm：

npm install x-next

快速开始

全量引入

import { createApp } from 'vue';
import XNext from 'x-next';
import 'x-next/dist/style.css';
import App from './App.vue';

const app = createApp(App);

app.use(XNext);
app.mount('#app');

<template>
  <x-button type="primary">保存</x-button>
</template>

按需引入

import { createApp } from 'vue';
import { Button, Table, Message } from 'x-next';
import 'x-next/dist/style.css';
import App from './App.vue';

const app = createApp(App);

app.use(Button);
app.use(Table);
app.mount('#app');

Message.success('保存成功');

样式

使用组件时需要引入样式文件：

import 'x-next/dist/style.css';

主题定制

X-Next 基于 CSS Variables 提供运行时主题能力。你可以在全局或局部容器中覆盖 --x-* 变量。

:root {
  --x-color-primary: #0f766e;
}

局部覆盖示例：

<template>
  <section class="brand-theme">
    <x-button type="primary">品牌按钮</x-button>
    <x-time-range-selector v-model="ranges" />
  </section>
</template>

<style scoped>
.brand-theme {
  --x-color-primary: #0f766e;
  --x-button-color-bg-primary-solid: var(--x-color-primary);
  --x-button-color-border-primary: var(--x-color-primary);
  --x-time-range-selector-color-default: var(--x-color-primary);
}
</style>

更多主题变量和组件级变量请查看文档站。

组件

通用

• Button 按钮
• Link 链接
• Tag 标签

布局

• Grid 栅格
• Layout 布局
• Space 间距
• ResizeBox 可调整区域
• Scrollbar 滚动条

表单

• Form 表单
• Input 输入框
• Textarea 文本域
• InputNumber 数字输入
• InputTag 标签输入
• Checkbox 复选框
• Radio 单选框
• Select 选择器
• Slider 滑块
• Rate 评分
• Switch 开关
• DatePicker 日期选择器
• TimePicker 时间选择器
• TimeRangeSelector 时间范围选择

反馈

• Alert 警告提示
• Dialog 对话框
• Drawer 抽屉
• Message 全局提示
• MessageBox 消息框
• Notification 通知提醒
• Popconfirm 气泡确认
• Popover 气泡卡片
• Progress 进度条
• Spin 加载中
• Skeleton 骨架屏

导航

• Dropdown 下拉菜单
• Menu 菜单
• Pagination 分页
• Steps 步骤条
• Tabs 标签页

数据展示

• Empty 空状态
• Image 图片
• Table 表格
• Timeline 时间线
• TrendChart 趋势图

其他能力

• Draggable 拖拽
• Network 网络状态
• Tooltip 文字提示
• Trigger 触发器
• Watermark 水印

命令式组件

import { Message, Notification, Dialog, MessageBox } from 'x-next';

Message.info('加载完成');

Notification.success({
  title: '成功',
  content: '数据已同步',
});

指令和 Hooks

import {
  useDraggable,
  useResizeObserver,
  vDraggable,
  vWatermark,
  type WatermarkOptions,
} from 'x-next';

类型提示

X-Next 提供 TypeScript 类型声明和 Vue 全局组件类型声明。安装后可直接在 Vue 3 + TypeScript 项目中获得组件类型提示。

如需生成或更新 Volar 全局组件声明，请查看文档站说明。

浏览器兼容性

推荐使用现代浏览器环境。主题能力依赖 CSS Variables，部分视觉效果会使用现代 CSS 能力。

License

MIT