KLayout

Handling the overall layout of a page.

Install

pnpm

pnpm add @ikun-ui/layout

yarn

yarn add @ikun-ui/layout

npm

npm install @ikun-ui/layout

Basic usage

KLayout consists of 5 components, namely KContainer, KMain, KFooter, KAside, and KHeader.

Some common combination examples are given below

KContainer Props

Name	Type	Default	Description
direction	vertical | horizontal	-	vertical when nested with KHeader or KFooter; horizontal otherwise
cls	string	'-'	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

KContainer Slots

Name	Description
header	Customize header content, Please pass in the KHeader component
default	Customize default content
footer	Customize footer content, Please pass in the KFooter component

KMain Props

Name	Type	Default	Description
cls	string	'-'	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

KMain Slots

Name	Description
default	Customize default content

KFooter Props

Name	Type	Default	Description
heigth	string	'-'	Heigth of footer
cls	string	'-'	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

KFooter Slots

Name	Description
default	Customize default content

KHeader Props

Name	Type	Default	Description
heigth	string	'-'	Heigth of header
cls	string	'-'	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

KHeader Slots

Name	Description
default	Customize default content

KAside Props

Name	Type	Default	Description
width	string	'-'	Width of aside
cls	string	'-'	Additional class for component
attrs	Record<string, string>	{}	Additional attributes

KAside Slots

Name	Description
default	Customize default content