All Components have access to common HTML5 global attributes and events.
class
NOTE: Introduced feature in
v0.2.0
.
class
allows you to apply CSS classes that you've defined to Components. However, you will have to use :global
on your class names to bypass Svelte's local scoping.
<script>
import {Text} from "@kahi-ui/framework";
</script>
<Text class="my-text">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</Text>
<style>
:global(.my-text) {
color: red;
}
</style>
style
NOTE: Introduced feature in
v0.2.0
.
style
allows you to apply inline CSS properties to Components.
<script>
import {Text} from "@kahi-ui/framework";
</script>
<Text style="color:red;">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.
</Text>
id
NOTE: Introduced feature in
v0.2.0
.
id
allows you to set an identifier that other elements can target or targettable for scrolling by a URL fragment.
<script>
import {
Anchor,
Heading,
Spacer,
} from "@kahi-ui/framework";
</script>
<Anchor href="#target-heading">
Scroll to Heading!
</Anchor>
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Spacer spacing="huge" />
<Heading id="target-heading">Hello World!</Heading>
name
NOTE: Introduced feature in
v0.2.0
.
name
allows you to set an identifier for the Component to set its value to in a form, or, can targettable by an Anchor
.
<script>
import {Anchor} from "@kahi-ui/framework";
</script>
<Anchor target="target-iframe" href="/">
Open Landing Page
</Anchor>
<iframe
name="target-iframe"
width="100%"
height="256"
/>
title
NOTE: Introduced feature in
v0.2.0
.
title
allows you to set a timed effect to show a text tooltip whenever an end-user hovers for long enough. Typically you don't want to rely on this attribute for the UI. Rather use it for semantic and assistive purposes.
<script>
import {Text} from "@kahi-ui/framework";
</script>
<Text title="I am some additional text!">
Hover me!
</Text>
tabindex
NOTE: Introduced feature in
v0.2.0
.
tabindex
allows you to configure how the Browser cycles through elements in the current stacking context when they press their tab keyboard button, or similar.
<script>
import {Button} from "@kahi-ui/framework";
</script>
<Button tabindex="3">Index #3</Button>
<Button tabindex="1">Index #1</Button>
<Button tabindex="-1">Unselectable</Button>
<Button tabindex="4">Index #4</Button>
<Button tabindex="2">Index #2</Button>
TODO: Event samples