@ximax/layout/README.md

A flexible and responsive layout system for Vue3 applications

# @ximax/layout

A flexible and responsive layout system for Vue3 applications.

## Installation

```bash
npm install @ximax/layout
# or
pnpm add @ximax/layout
# or
yarn add @ximax/layout
```

## Peer Dependencies

This package has the following peer dependencies that you need to install:

```bash
npm install vue naive-ui
# or
pnpm add vue naive-ui
# or
yarn add vue naive-ui
```

## Usage

```vue
<template>
  <AdminLayout>
    <template #header>
      <div>Header Content</div>
    </template>

    <template #sider>
      <div>Sidebar Content</div>
    </template>

    <div>Main Content</div>

    <template #footer>
      <div>Footer Content</div>
    </template>
  </AdminLayout>
</template>

<script setup>
import { AdminLayout } from '@ximax/layout'
</script>

<style>
/* Import the CSS file */
@import '@ximax/layout/dist/layout.css';
</style>
```

## CSS Import

To use the layout styles, you need to import the CSS file:

```css
@import '@ximax/layout/dist/layout.css';
```

Or in your main entry file:

```javascript
import '@ximax/layout/dist/layout.css'
```

## Available Components

- `AdminLayout` - Main admin layout component
- `SplitContainer` - Split container for creating resizable panels
- `PageTab` - Tab component for pages
- `SimpleScrollbar` - Custom scrollbar component
- `BetterScroll` - Better scroll component
- `ButtonIcon` - Icon button component
- `LoginBackground1` - Login background variant 1
- `LoginBackground2` - Login background variant 2

## Constants

- `LAYOUT_MAX_Z_INDEX` - Maximum z-index value for layout
- `LAYOUT_SCROLL_EL_ID` - Scroll element ID constant

## License

MIT