Link Set

<daff-link-set> is a component for displaying two or more [daff-link-set-item]s. <daff-link-set>s can be nested.

Usage

Within a standalone component

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

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

Within a module (deprecated)

To use link set in a module, import DaffLinkSetModule into your custom module:

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

import { DaffLinkSetModule } from '@daffodil/design/link-set';

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

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

Supported Content Types

A <daff-link-set> transcludes:

• [daffLinkSetHeading]
• [daffLinkSetSubheading]
• [daff-link-set-item] component

Heading

A link set heading is used by adding [daffLinkSetHeading] to any tag. This is used to define the heading of a top level link set.

Subheading

A link set subheading is used by adding [daffLinkSetSubheading] to any tag. This is helpful to define the heading of a nested link set that is not actionable.

Styling links within a link set

Use the [daff-link-set-item] component to style links within a link set.

Example

<h4>Default Link Set</h4>
<daff-link-set class="docs-link-set">
  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
  <a href="#" daff-link-set-item>Link</a>
  <a href="#" daff-link-set-item>Link</a>
  <a href="#" daff-link-set-item>Link</a>
</daff-link-set>

<h4>Nested Link Set</h4>
<daff-link-set>
  <a href="#" daff-link-set-item daffLinkSetHeading>Link Set Heading</a>
  <a href="#" daff-link-set-item>Link</a>
  <div daffLinkSetSubheading>Link Set Subheading</div>
  <daff-link-set>
    <a href="#" daff-link-set-item>Link</a>
    <a href="#" daff-link-set-item>Link</a>
    <a href="#" daff-link-set-item>Link</a>
    <a href="#" daff-link-set-item>Link</a>
  </daff-link-set>
  <a href="#" daff-link-set-item>Link</a>
  <a href="#" daff-link-set-item>Link</a>
  <a href="#" daff-link-set-item>Link</a>
</daff-link-set>