List

List is a flexible component that can be used to display a series of content. It can be modified to support a range of content types.

Usage

Within a standalone component

To use list in a standalone component, import it directly into your custom component:

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  standalone: true,
  imports: [
    DAFF_LIST_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use list in a module, import DaffListModule into your custom module:

import { NgModule } from '@angular/core';

import { DaffListModule } from '@daffodil/design/list';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffListModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Basic List

A <daff-list> consists of multiple <daff-list-item>s.

Navigation List

Use <daff-nav-list> for navigation lists. <daff-list-item> should be directly added to an anchor tag.

Multi-line List

For lists that have multiple lines per item, wrap each line appropriately with a heading or paragraph tag.

List with Icons

To add an icon to a list item, use the daffPrefix or daffSuffix attributes for the appropriate placements.