Skip to content

Latest commit

 

History

History
94 lines (73 loc) · 1.95 KB

README.md

File metadata and controls

94 lines (73 loc) · 1.95 KB

CircleCI code coverage npm version license npm

Web page layout collection for Vue3

Examples and Documentation

Documentation and examples please visit below sites

Layout and modules diagram

admin classic layout

admin-classic

content press layout

content-press

panel group modules

panel-group

Installation

# npm
npm i v-layouts
# yarn
yarn add v-layouts
# pnpm
pnpm add v-layouts

Usage

LayoutAdminClassic

<template>
  <LayoutAdminClassic>
    <template #header>
      Header
    </template>
    <template #aside>
      Aside
    </template>
    <template #breadcrumb>
      Breadcrumb
    </template>
    <template #footer>
      Footer
    </template>

    <div>Main content</div>
  </LayoutAdminClassic>
</template>

<script setup>
import { LayoutAdminClassic } from 'v-layouts'
</script>

Panel group

<template>
  <PanelGroup>
    <PanelItem name="panel1">
      <template #header>
      panel 1 header
      </template>
      panel 1 content
    </PanelItem>
    <PanelItem name="panel2">
      <template #header>
      panel 2 header
      </template>
      panel 2 content
    </PanelItem>
  </PanelGroup>
</template>

<script setup>
import { PanelGroup, PanelItem } from 'v-layouts'
</script>