search

qupaya / sketch

A headless UI library for Angular.
MIT License
5 stars 0 forks source link

Components / Features / List Component #2

Closed patrickjahr closed 4 months ago

patrickjahr commented 5 months ago

DRAFT

List Component

The list component should offer the possibility to display a collection of items. The collection can be flat or nested. If the collection is nested, you can navigate deeper in the list by selecting an item. This can work either with a component state or with the given route of an item, but not mixed. You can navigate back either via selecting an item in a higher level or via the routing. The selected item should offer the possibility to be highlighted via an optional CSS class.

Components

Directive

Usage

Simple Use case without routing

<sk-list skListProvider>
    <sk-list-item [skListItemId]="1">
        <span skLabel>Label Conent</span>
    </sk-list-item>
    <sk-list-item [skListItemId]="2">
        <span skLabel>Label Conent</span>
        <sk-list skChilds>
             <sk-list-item [skListItemId]="21">
                <span>Child Label Content</span>
             </sk-list-item>
        </sk-list>
    </sk-list-item>
    <sk-list-item [skListItemId]="3">
        <span skLabel>Label Conent</span>
    </sk-list-item>
</sk-list>

Simple Use case without routing

<sk-list skListProvider>
    <sk-list-item [skListItemId]="1" enableRouting>
        <span skLabel>Label Conent</span>
    </sk-list-item>
    <sk-list-item [skListItemId]="2" enableRouting>
        <span skLabel>Label Conent</span>
        <sk-list skChilds>
             <sk-list-item [skListItemId]="21" enableRouting>
                <span>Child Label Content</span>
             </sk-list-item>
        </sk-list>
    </sk-list-item>
    <sk-list-item [skListItemId]="3" enableRouting>
        <span skLabel>Label Conent</span>
    </sk-list-item>
</sk-list>