List

View Source

NOTE: Introduced feature in v0.2.4.

List is used for rendering simple text lists.

<script>
    import {List} from "@kahi-ui/framework";
</script>

<List.Container>
    <List.Item>Lorem ipsum dolor sit amet.</List.Item>
    <List.Item>Consectetur adipiscing elit.</List.Item>
    <List.Item>Proin et consectetur orci.</List.Item>
</List.Container>

Imports

<script>
    import {List} from "@kahi-ui/framework";

    const {Container, Item} = List;
</script>

Elements

You can change what type of list is being rendered via the is property.

<script>
    import {
        List,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text>
            <Text is="strong">ORDERED</Text>
            <List.Container is="ol">
                <List.Item>
                    Lorem ipsum dolor sit amet.
                </List.Item>

                <List.Item>
                    Consectetur adipiscing elit.
                </List.Item>

                <List.Item>
                    Proin et consectetur orci.
                </List.Item>
            </List.Container>
        </Text>
    </div>

    <div>
        <Text>
            <Text is="strong">UNORDERED</Text>
            <List.Container>
                <List.Item>
                    Lorem ipsum dolor sit amet.
                </List.Item>

                <List.Item>
                    Consectetur adipiscing elit.
                </List.Item>

                <List.Item>
                    Proin et consectetur orci.
                </List.Item>
            </List.Container>
        </Text>
    </div>
</Stack.Container>

Properties

List.Container

Name Description Types
is Alters the HTML tag rendered to the DOM, changing the list item prefixes.
ol ul (DEFAULT)

Slots

List.Container

Name Description Types
default Default unnamed slot.
{}

List.Item

Name Description Types
default Default unnamed slot.
{}