@likecoffee/x-view-ui
v1.0.0
Published
A clean, animated Vue 3 and uni-app component library for AI apps, portals, blogs, admin platforms, and IoT systems.
Maintainers
likecoffeeReadme
X-View
A clean, animated Vue 3 component library featuring a primary color of #AB82FF. Designed for AI apps, portals, blogs, admin platforms, and IoT systems.
Features
- Vue 3 + uni-app compatible
- Light & dark theme support
- 100+ components across 8 categories
- Built-in micro-animations, press feedback, and loading states
- TypeScript support
- Tree-shakeable
Installation
npm install x-view
# or
yarn add x-view
# or
pnpm add x-viewUsage
Global Registration
import { createApp } from 'vue'
import XView from 'x-view'
import 'x-view/dist/x-view.css'
import App from './App.vue'
createApp(App).use(XView).mount('#app')On-demand Import (recommended)
<script setup lang="ts">
import { XButton, XInput } from 'x-view'
</script>
<template>
<XInput v-model="keyword" placeholder="Search..." />
<XButton type="primary">Submit</XButton>
</template>Note: When using on-demand imports, you still need to import the CSS file once in your entry file.
Theme Switching
Set the data-x-theme attribute on the <html> element:
<html data-x-theme="light"> <!-- Light mode (default) -->
<html data-x-theme="dark"> <!-- Dark mode -->Toggle programmatically:
const theme = ref<'light' | 'dark'>('light')
function toggleTheme() {
theme.value = theme.value === 'light' ? 'dark' : 'light'
document.documentElement.dataset.xTheme = theme.value
}Component Categories
| Category | Description | Components | |----------|-------------|------------| | Basic | Button, Icon, Text, Link, Image, Avatar, Badge, Tag | 9 | | Layout | Card, Cell, Grid, Space, Row/Col, Panel, List, Container | 9 | | Form | Input, Textarea, Switch, Slider, Stepper, Rate, Search, Password, Upload, Select, Picker | 16 | | Feedback | Alert, Loading, Progress, Empty, Skeleton, NoticeBar, Result, Toast, Dialog | 11 | | Navigation | Tabs, Segment, Breadcrumb, Steps, Pagination, Navbar, Tabbar, Sidebar | 12 | | Data | Statistic, CountTo, Collapse, Timeline, Description, Table, DataList | 10 | | Business | Price, UserCard, VerifyCode, Coupon, GoodsCard, OrderCard, LoginPanel | 9 | | Mobile | FloatingBubble, PullRefresh, InfiniteScroll, SwipeCell, ShareSheet | 7 |
License
MIT