Prefix Suffix

Overview

DaffPrefixDirective applies the daff-prefix CSS class and DaffSuffixDirective applies the daff-suffix CSS class. Components that support them position the content in the right place, usually as a leading or trailing icon.

Supported components

Usage

Import the directives into your component:

import {
  DaffPrefixDirective,
  DaffSuffixDirective,
} from '@daffodil/design';

@Component({
  selector: 'custom-component',
  template: 'custom-component.html',
  imports: [
    DaffPrefixDirective,
    DaffSuffixDirective,
  ],
})
export class CustomComponent { }

Or import both at once with DAFF_PREFIX_SUFFIX_DIRECTIVES:

import { DAFF_PREFIX_SUFFIX_DIRECTIVES } from '@daffodil/design';

@Component({
  selector: 'custom-component',
  template: 'custom-component.html',
  imports: [
    DAFF_PREFIX_SUFFIX_DIRECTIVES,
  ],
})
export class CustomComponent { }

Add daffPrefix or daffSuffix to an element inside a supported component:

<button daff-button>
  <fa-icon daffPrefix [icon]="faPlus"></fa-icon>
  Add to cart
</button>

Adding prefix and suffix support to a custom component

Use ng-content to place prefix and suffix content in your component's template:

<ng-content select="[daffPrefix]"></ng-content>
<div class="custom-component__content">
  <ng-content></ng-content>
</div>
<ng-content select="[daffSuffix]"></ng-content>

Styling

Use the applied CSS classes to style prefix and suffix content:

.custom-component {
  display: flex;
  align-items: center;

  .daff-prefix {
    margin-right: 0.5rem;
  }

  .daff-suffix {
    margin-left: 0.5rem;
  }
}