Xqss Component Library

A scalable Vue3+TypeScript component library with customizable themes.

Installationnpm install xqss --save

Usage

Global Importimport { createApp } from 'vue';

import App from './App.vue'; import Xqss from 'xqss'; import 'xqss/dist/css/xqss.css';

const app = createApp(App); app.use(Xqss); app.mount('#app');

Component Importimport { ProDialog } from 'xqss';

import 'xqss/dist/css/xqss.css';

export default { components: { ProDialog } }

Custom Namespace

To override the default namespace, import the source SCSS files:

1. Create a custom SCSS file:// your-variables.scss $namespace: 'your-custom-namespace'; $color-primary: #your-color;

// Import source styles @import 'xqss/src/styles/index.scss'; 2. Import in your project:import './your-variables.scss';

Components

ProDialog

A dialog component with fullscreen support.

Usage

<ProDialog title="My Dialog" :fullscreen="true" :bodyPadding="16px" @update:fullscreenStatus="handleFullscreenChange"

<!-- Your content here -->
<template #footer>
  <!-- Footer content -->
</template>

Props

| Name | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Dialog title | | fullscreen | boolean | true | Whether to support fullscreen mode | | fullscreenStatus | boolean | false | External fullscreen status | | bodyPadding | string | "8px" | Padding for dialog body |

Events

| Name | Parameters | Description | |------|------------|-------------| | update:fullscreenStatus | status: boolean | Emitted when fullscreen status changes |

Slots

| Name | Description | |------|-------------| | default | Dialog content | | header | Custom header content | | footer | Custom footer content |