# UIB ListModule

## Prequisites

Add the `ListModule` module to your module imports:

```TS
import { ListModule } from '@uib/angular';

@NgModule({
  imports: [
    // ...
    ListModule,
    // ...
  ],
})
// ...
```

## Expandable list

### Examples

#### List items

```HTML
<uib-list size="small|medium|large" [variants]="['no-border', 'muted']">
  <uib-list-item >
    Item content
  </uib-list-item>
  <uib-list-item >
    <uib-avatar variant="circle">UI</uib-avatar> With avatar
  </uib-list-item>
  <uib-list-item >
    <uib-icon name="uib-icon--photo"></uib-icon> With icon
  </uib-list-item>
</uib-list>
```

#### Expandable list items

```HTML
<uib-list [multiple]="<boolean>">
  <uib-expandable-list-item title="Item title">
    item content
  </uib-expandable-list-item>
  <uib-expandable-list-item title="Item title with <b>HTML</b>">
    item content
  </uib-expandable-list-item>
  <uib-expandable-list-item title="Item title with <b>HTML</b>">
    <ng-template uibListItemTitle>
      Item title as angular template
    </ng-template>
    item content
  </uib-expandable-list-item>
  <uib-expandable-list-item title="Item title">
    item content
  </uib-expandable-list-item>
</uib-list>
```

#### Mixed list items

```HTML
<uib-list [multiple]="<boolean>">
  <uib-expandable-list-item title="Expandable list item">
    item content
  </uib-expandable-list-item>
  <uib-list-item>List item</uib-list-item>
  <uib-expandable-list-item title="Expandable list item">
    item content
  </uib-expandable-list-item>
</uib-list>
```
