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.