@ximax/layout

A flexible and responsive layout system for Vue3 applications.

Installation

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:

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

Usage

<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:

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

Or in your main entry file:

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