Feedback Components

Alerts

Alerts показывают inline-состояния и важные сообщения внутри страницы.

<div class="alert alert-warning">
  <h3 class="alert-title">Needs review</h3>
  <p class="alert-text">Check configuration before publishing.</p>
</div>

Состояния:

• .alert-success
• .alert-warning
• .alert-info
• .alert-danger
• .alert-error

Toasts

Toasts создаются через JS.

GNexusUIKit.Toasts.createSuccess("Saved", "Changes applied").show();
GNexusUIKit.Toasts.createInfo("Queued", "Job started").show();
GNexusUIKit.Toasts.createWarning("Review", "Check before publishing").show();
GNexusUIKit.Toasts.createError("Failed", "Request failed").show();

createSuccess по умолчанию закрывает другие toast-ы и исчезает через 4000ms.

Modals

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

modal.show();

Используйте modal для blocking flow, подтверждения ввода или короткого edit-flow.

Confirm Dialog

confirmPopup предназначен для подтверждения рискованного действия.

GNexusUIKit.confirmPopup({
  title: "Delete item",
  text: "This action cannot be undone.",
  confirmText: "Delete",
  cancelText: "Cancel",
  onConfirm: () => {
    // delete item
  }
});

Progress

Determinate progress:

<div class="progress" style="--progress-value: 64">
  <div class="progress-bar"></div>
</div>

Usage meter:

<div class="usage-meter">
  <div class="usage-meter-header">
    <span>Storage</span>
    <span>64%</span>
  </div>
  <div class="progress" style="--progress-value: 64">
    <div class="progress-bar"></div>
  </div>
</div>

Skeleton

Skeleton используется для loading preview.

<div class="skeleton-stack" aria-label="Loading preview">
  <span class="skeleton skeleton-title"></span>
  <span class="skeleton skeleton-line"></span>
  <span class="skeleton skeleton-line" style="width: 84%"></span>
  <span class="skeleton skeleton-block"></span>
</div>