Installation
Using a terminal inside of your project's directory, use npm
to install the package.
npm install @kahi-ui/framework
Importing Stylesheet
WARNING: This feature received a breaking change in
v0.6.0
.
First if your toolchain supports it, import the required CSS files from @kahi-ui/framework/dist
:
// For non-minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";
// For minified:
import "@kahi-ui/framework/dist/kahi-ui.framework.min.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.min.css";
Otherwise download the required CSS files from Releases and use <link rel="stylesheet">
:
<html>
<head>
<!-- For non-minified: -->
<link
rel="stylesheet"
href="/path/to/kahi-ui.framework.css"
/>
<link
rel="stylesheet"
href="/path/to/kahi-ui.theme.default.css"
/>
<!-- For minified: -->
<link
rel="stylesheet"
href="/path/to/kahi-ui.framework.min.css"
/>
<link
rel="stylesheet"
href="/path/to/kahi-ui.theme.default.min.css"
/>
</head>
</html>
Usage
Import Components by their variable name from @kahi-ui/framework
:
<script>
import {Button, Heading} from "@kahi-ui/framework";
let clicks = 0;
function on_click(event) {
clicks++;
}
</script>
<Heading>
Clicks: {clicks}
</Heading>
<Button on:click={on_click}>Add +1</Button>
Some Components are multi-part patterns, so you'll need to import their namespaces:
<script>
import {
Button,
Card,
Text,
} from "@kahi-ui/framework";
</script>
<Card.Container class="getting-started-patterns">
<Card.Figure>
<img src={IMAGE_BACKGROUND} />
</Card.Figure>
<Card.Header>Lorem Ipsum</Card.Header>
<Card.Section>
<Text>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin et consectetur orci.
Curabitur a egestas turpis, vitae convallis
sapien. Sed pellentesque rutrum tellus, in
iaculis dolor tincidunt non. Orci varius
natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</Text>
</Card.Section>
<Card.Footer>
<Button palette="affirmative">
Open Details
</Button>
</Card.Footer>
</Card.Container>
<style>
:global(.getting-started-patterns) {
max-width: 35ch;
}
</style>