HTML5

View Source

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

Properties

*

Name Description Types
class Sets a class name(s) on the Component.
string
style Sets inline CSS properties on the Component.
string
id Sets an identifier that other Components can target or useful for querying DOM by association.
string
name Sets an identifier that will be used in form submissions or targettable by specific Components like Anchor.
string
title Sets text for a tooltip whenever an end-user hovers the Component, and useful for assistive technologies.
string
tabindex Alters how the Browser will cycle through the elements within the Component's current stacking context.
number string

Events

*

Name Description Types
click Forwards the click event whenever the Component or inner content left clicked.
MouseEvent
contextmenu Forwards the contextmenu event whenever the Component or inner content is right clicked.
MouseEvent
dblclick Forwards the dblclick event whenever the Component or inner content is double clicked.
MouseEvent
focusin Forwards the focusin event whenever focus is obtained by the Component or inner content.
FocusEvent
focusout Forwards the focusout event whenever focus is lost by the Component or inner content.
FocusEvent
keydown Forwards the keydown event whenever a keyboard button is pressed down while the Component or inner content has focus.
KeyboardEvent
keyup Forwards the keyup event whenever a keyboard button is released while the Component or inner content has focus.
KeyboardEvent
pointercancel Forwards the pointercancel event whenever the Component or inner content has interuptions like palm rejection or screen orientation rotated.
PointerEvent
pointerdown Forwards the pointerdown event whenever the Component or inner content has buttons (mouse) pressed or physical contact (pen, touch) made.
PointerEvent
pointerenter Forwards the pointerenter event whenever the pointer (mouse, pen, touch) enters the bounding box of the Component or inner content.
PointerEvent
pointerleave Forwards the pointerleave event whenever the pointer (mouse, pen, touch) leaves the bounding box of the Component or inner content.
PointerEvent
pointermove Forwards the pointermove event whenever the pointer (mouse, pen, touch) is moving within the bounding box of the Component or inner content.
PointerEvent
pointerout Forwards the pointerout event, which is similar to pointerleave but also includes interuptions like pointing device leaving digitizer.
PointerEvent
pointerup Forwards the pointerup event whenever the Component or inner content has buttons (mouse) released or physical contact (pen, touch) lifted.
PointerEvent