Auto Init - ExpressiveCSS

Auto Init starts all of the registered Expressive components with a single call. The IIFE bundle exposes it as Expressive.AutoInit.

Importing the JavaScript installs a few document-level behaviors (Forms, Chips, Slider, Cards, and ExpandingCard), but it does not call AutoInit() for you. Call it after the DOM is ready. This documentation site does that in docs.js on DOMContentLoaded.

Initialization

document.addEventListener('DOMContentLoaded', function() {
  Expressive.AutoInit();
});

Or pass a root element and per-component options. The option keys are the component names from the table below.

Expressive.AutoInit(document.body, {
  Menu: {
    // pass options for Menu here
  },
  FloatingActionButton: {
    // pass options for FloatingActionButton here
  }
});

From the module build:

import { AutoInit, Tooltip } from './js/expressive.mjs';

AutoInit();

const element = document.querySelector('.custom-tooltip');
Tooltip.init(element, { position: 'top' });

Options

AutoInit(context, options) takes two arguments:

Name	Type	Default	Description
`context`	Element	`document.body`	DOM element to search within for components.
`options`	Object	`{}`	Options for each component, keyed by name. See that component’s page for its own options.

Calling AutoInit() again on the same elements is safe: each component’s constructor destroys any existing instance on that element before creating a new one.

Components

These are the components AutoInit() starts, and the selector each one claims. Elements that also have no-autoinit are skipped.

Name	Selector
`Autocomplete`	`.autocomplete`
`ButtonGroup`	`.button-group`
`Cards`	`.cards`
`Carousel`	`.carousel`
`Chips`	`.chips`
`Datepicker`	`.datepicker`
`Menu`	`.menu-trigger`
`Lightbox`	`.lightboxed`
`NavigationRail`	`.navigation-rail`
`ScrollSpy`	`.scrollspy`
`FormSelect`	`select`
`NavigationDrawer`	`.navigation-drawer`
`Tabs`	`.tabs`
`Timepicker`	`.timepicker`
`Tooltip`	`.tooltipped`
`FloatingActionButton`	`.fab`

Snackbar, CharacterCounter, and Range stay out of this table. Range still starts itself when the bundle loads. Forms, Chips, Cards, and ExpandingCard also run an import-time Init(); Chips and Cards appear in the table as well so a later AutoInit() can pick up elements added after load.

Ignoring Elements

If you want AutoInit() to skip an element, add the class no-autoinit. Initialize that element yourself with the component’s init method when you need options other than the defaults.

<a class="button tooltipped no-autoinit" data-tooltip="Hi">Hover</a>

Expressive.Tooltip.init(
  document.querySelector('.tooltipped.no-autoinit'),
  { position: 'top' }
);