ofs-hor-layout v0.0.19

description

ofs-hor-layout is a layout with a horizontal alignment。

installing

$ npm install ofs-hor-layout

import in main.ts

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import OfsHorLayout from 'ofs-hor-layout'
import 'ofs-hor-layout/lib/style.css'

const app = createApp(App)
app.use(ElementPlus)
    .use(OfsHorLayout)
    .mount('#app')

using in page

<ofs-hor-layout
  :side-width="220"
  :side-collapse-width="64"
  :header-height="50"
  :tags-view-height="20"
  @collapse="collapse"
  @layout-changed="changed"
>
  <template #logo> RK </template>
  <template #menu> aside </template>
  <template #header> header </template>
  <template #tags> tags view </template>
  <template #main> main </template>
</ofs-hor-layout>

import OfsHorLayout from 'ofs-hor-layout'

const collapse = (val: boolean) => {
  console.log(val)
}

const changed = (val: OfsWindowSize) => {
  console.log(val)
}