NOTE: Introduced feature in
v0.2.0
.
Code
is used to render inline monospaced text, typically for showing programming code / application configuration to an user.
<script>
import {Code} from "@kahi-ui/framework";
</script>
<Code>
import * as Kahi from "@kahi-ui/framework";
</Code>
Imports
<script>
import {Code} from "@kahi-ui/framework";
</script>
Palette
You can change the color palette of Code
via the palette
property.
<script>
import {
Code,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container alignment_x="left" spacing="medium">
<div>
<Text is="strong">DEFAULT</Text>
<br />
<Code>
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">ACCENT</Text>
<br />
<Code palette="accent">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">NEUTRAL</Text>
<br />
<Code palette="neutral">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">DARK</Text>
<br />
<Code palette="dark">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">LIGHT</Text>
<br />
<Code palette="light">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">ALERT</Text>
<br />
<Code palette="alert">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">AFFIRMATIVE</Text>
<br />
<Code palette="affirmative">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">INFORMATIVE</Text>
<br />
<Code palette="informative">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
<div>
<Text is="strong">NEGATIVE</Text>
<br />
<Code palette="negative">
import * as Kahi from "@kahi-ui/framework";
</Code>
</div>
</Stack.Container>
Code Block
You can display blocks of code via a <pre>
HTML tag by passing is="pre"
.
<script>
import {Code} from "@kahi-ui/framework";
</script>
<Code is="pre">
import math from "a-math-library";
const result = math.add(1, 1);
console.log("Our value is:", result);
</Code>