Hero Image

Components

Dialog - contextual

Dialog-contextual is built on the dialog component.

Code

import { Dialog, DialogContextual, DialogConstants } from 'trinidad-ui'; import {
  AnimateInView
} from '@components/animate-in-view';

const _contextual = new DialogContextual({
  area: DialogConstants.area.CONTEXTUAL,
  branding: DialogConstants.branding.SPORT,
  attachTo: document.querySelector('.js-contextual-example-1'),
  title: '',
  message: [
    {
      type: DialogConstants.message.TEXT,
      text:
        'Simple contextual has no buttons and closes on click.'
    }
  ]
  })

const dialog = new Dialog();
dialog.add(_contextual);

//-----------------------------
// For Trinidad users
//-----------------------------
// In the world of Trinidad you can't use import, so you need to add
// a dependency to 'dialog' in your controller.
// Replace all 'DialogConstants' with svs.ui.dialog.
// Replace new DialogContextual with new svs.ui.dialog.Contextual({...
// Replace dialog.add(_contextual) with svs.ui.dialog.api.add(_contextual);

Properties

Check out Dialog component for more information on props, methods, callbacks etc.

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Read more about WCAG 2.1 AA.