Settings Groups

If you want to reuse settings across multiple instances of a component, you can use setting groups.

Consider an example with the Dropdown component.

Without using setting groups, each instance of the Dropdown component needs to have a unique identifier assigned.

<button data-ui-toggle="account-menu">Account</button>
<div id="account-menu" hidden>...</div>

But if we already know the locations of the button and the content, we can link them using the toggler option.

<button>Account</button>
<div data-ui-dropdown="my-group" hidden>...</div>

Dropdown.data("my-group", (elem) => {
  return { toggler: elem.previousElementSibling };
});
 
Dropdown.initAll();

If the group is not declared through Dropdown.data(), the dropdown won’t be initialized after calling Dropdown.initAll().

Also, if an empty string '' is passed instead of a name or skip it, then the provided settings will apply to all dialogs with the data-ui-dialog attribute where no name is specified.

Dropdown.data({});
// or
Dropdown.data((elem) => ({}));

Setting Inheritance

Consider an example with the Tablist component.

Tablist has predefined setting groups such as 'ui-accordion' (default) and 'ui-tabs'.

Let’s create tabs and arrange so that we do not need to manually link each tab to a panel via the id attribute.

<div data-ui-tablist="tabs">
  <button data-ui-tablist-tab>Tab #1</button>
  <button data-ui-tablist-tab>Tab #2</button>
  <button data-ui-tablist-tab>Tab #3</button>
</div>
<div>
  <div>Tabpanel with id:</div>
  <div hidden>Tabpanel with id:</div>
  <div hidden>Tabpanel with id:</div>
</div>

Tablist.data("tabs", (tablistElem) => {
  return {
    data: "ui-tabs",
    tabpanel: tablistElem.nextElementSibling.children,
  };
});
Tablist.initAll();

After that the settings will look like this:

{
  alwaysExpanded: true,
  horizontal: true,
  arrowActivation: true,
  awaitPrevious: true,
  a11y: 'tabs'
  tabpanel: tablistElem.nextElementSibling.children,
}