Extending Fusion Component Example

The easiest way to create new custom components is to extend existing Fusion components. Below is an example of extending the Fusion Text component to create a simple headline.

JS

import { FusionText } from '../../../fusion/slide/text';

class AcmeHeadline extends FusionText {
  static get properties() {
    const {
      'font-size': fontSize,
      'font-weight': fontWeight,
      color,
      ...rest
    } = super.properties;
    return {
      ...rest,
      'font-size': {
        ...fontSize,
        value: '32px',
      },
      'font-weight': {
        ...fontWeight,
        value: '700',
      },
      color: {
        ...color,
        value: 'rgba(227, 146, 80, 1)',
      },
    };
  }

  static get options() {
    return {
      ...super.options,
      componentName: 'acme-headline',
      componentUIName: 'ACME Headline',
      componentCategory: 'text',
      componentDescription: 'Customized headline',
      defaultTemplate: '<p>Headline</p>',
    };
  }
}

export { AcmeHeadline };