JavaScript API

dist/js/gnexus-ui-kit.js публикует API двумя способами:

Toasts.createSuccess("Saved", "Changes applied").show();
GNexusUIKit.Toasts.createInfo("Info", "Message").show();

Namespace

GNexusUIKit.Helper
GNexusUIKit.Toasts
GNexusUIKit.Modals
GNexusUIKit.advancedSelect
GNexusUIKit.editableString
GNexusUIKit.confirmPopup
GNexusUIKit.Drawer
GNexusUIKit.NavigationShell
GNexusUIKit.Overlays
GNexusUIKit.InputPatterns
GNexusUIKit.Accordion

Auto init

На DOMContentLoaded автоматически запускаются:

Overlays.init();
NavigationShell.init();
InputPatterns.init();
Accordion.init();

Если вы динамически вставляете HTML после загрузки страницы, можно повторно вызвать init для root-элемента:

GNexusUIKit.NavigationShell.init(document.querySelector("#dynamic-root"));
GNexusUIKit.InputPatterns.init(document.querySelector("#dynamic-root"));
GNexusUIKit.Accordion.init(document.querySelector("#dynamic-root"));

Модули защищены от повторной инициализации одного и того же root.

Data attributes

Компоненты используют declarative attributes:

• data-navigation-toggle
• data-navigation-drawer
• data-navigation-close
• data-navigation-link
• data-dropdown-toggle
• data-popover-toggle
• data-tooltip-toggle
• data-input-clear
• data-file-upload-input
• data-file-upload-preview
• data-date-picker

Programmatic components

Некоторые компоненты создаются через JS:

const drawer = GNexusUIKit.Drawer.create("details-drawer", {
  title: "Details",
  bodyText: "Drawer content",
  position: "left"
});

drawer.show();

const modal = GNexusUIKit.Modals.create("edit-modal", {
  title: "Edit",
  bodyText: "Modal content"
});

modal.show();

GNexusUIKit.Toasts.createSuccess("Saved", "Changes applied").show();