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

风带来故事的种子,时间使之发芽(header)

你我同为异世界之旅人，在此相遇皆为命运之意志(main)

风带来故事的种子,时间使之发芽(header)

你我同为异世界之旅人，在此相遇皆为命运之意志(main)

若知是梦何须醒，不比真如一相会(footer)

飞翔吧，飞翔吧

就像飞鸟那样

(aside)

若你困于无风之地,我将奏响高天之歌

我将奏响高天之歌

(main)

红缨猎猎剑流星,直指怒潮洗海清(header)

浮世景色

百千年依旧

(aside)

在黎明到来之前

必须要有人稍微照亮黑暗

(main)

拾花鸟之一趣，照月风之长路。(header)

我等必将复起

古木已发新枝

(aside)

最初的鸟儿是不会飞翔的

飞翔是它们勇敢跃入峡谷的奖励

(main)

纵使古玩价值连城，给人的快乐不过刚拥有时的一瞬(footer)

四方食事

不过一碗人间烟火

(aside)

总有地上的生灵，敢于面对雷霆的威光(header)

风雨犹祝，山海同欢

(main)

十里寒塘路

烟花一半醒

(aside)

不要害怕长夜，我将伴你左右(header)

吹灭读书灯，一身都是月

(main)

与君相别离，何日是归期(footer)

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