Bildirişnomalar markazi

1. root.fx-notifyşart
2. trigger.fx-notify__triggerşart
3. panel.fx-notify__panelşart
4. head.fx-notify__headixtiyoriy
5. title.fx-notify__titleixtiyoriy
6. tabs.fx-notify__tabsixtiyoriy
7. body.fx-notify__bodyixtiyoriy
8. foot.fx-notify__footixtiyoriy

Tugma popovertarget bilan; aria-label'da «N ta yangi» (xulq yangilaydi). Panel — native popover (Esc, taşqariga bosiş). Tablar APG «Tabs»; tabpanel aria-labelledby tanlangan tabga boğlanadi.

Naqş: WAI-ARIA APG tabs · rol dialog

npx foxui add notify

<div class="fx-notify" data-fx-notify>
  <button class="fx-btn fx-notify__trigger" data-variant="ghost" data-shape="icon" popovertarget="nt" aria-label="Bildirişnomalar, 2 ta yangi" data-label="Bildirişnomalar"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M5 8a5 5 0 0 1 10 0c0 4 1.5 5.5 1.5 5.5h-13S5 12 5 8ZM8.5 16.5a1.6 1.6 0 0 0 3 0" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-count">2</span></button>
  <div class="fx-notify__panel" id="nt" popover aria-label="Bildirişnomalar">
    <div class="fx-notify__head"><h2 class="fx-notify__title">Bildirişnomalar</h2><button class="fx-btn" data-variant="link" data-size="sm" data-notify="read-all">Hammasini öqilgan deb belgilaş</button></div>
    <div class="fx-tabs fx-notify__tabs" role="tablist" aria-label="Filtr" data-fx-tabs>
      <button class="fx-tabs__tab" role="tab" id="nt-t1" aria-selected="true" data-filter="all">Hammasi</button>
      <button class="fx-tabs__tab" role="tab" id="nt-t2" aria-selected="false" data-filter="mention">Eslatmalar</button>
    </div>
    <div class="fx-notify__body" role="tabpanel" aria-labelledby="nt-t1" tabindex="0">
<div class="fx-inbox" data-fx-inbox>
  <section class="fx-inbox__group" aria-labelledby="ib-d1"><h3 class="fx-inbox__day" id="ib-d1">Bugun</h3>
    <ul class="fx-inbox__list">
      <li class="fx-inbox__item" data-unread data-kind="mention">
        <span class="fx-inbox__dot"><span class="fx-sr-only">Yangi</span></span>
        <span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Aziz">AZ</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Aziz</strong> sizni «Tarif narxlari» vazifasida eslatdi</span><span class="fx-inbox__sub">Savdo · 12 daqiqa oldin</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">12 daq</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
      <li class="fx-inbox__item" data-unread data-kind="all">
        <span class="fx-inbox__dot"><span class="fx-sr-only">Yangi</span></span>
        <span class="fx-avatar" data-size="sm" data-color="green" role="img" aria-label="Madina">MA</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Madina</strong> arizani «Qabul qilindi»ga ötkazdi</span><span class="fx-inbox__sub">Arizalar · #1042</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">1 soat</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
    </ul></section>
  <section class="fx-inbox__group" aria-labelledby="ib-d2"><h3 class="fx-inbox__day" id="ib-d2">Keça</h3>
    <ul class="fx-inbox__list">
      <li class="fx-inbox__item" data-kind="all">
        <span class="fx-inbox__dot"></span>
        <span class="fx-avatar" data-size="sm" data-color="coral" role="img" aria-label="Bobur">BO</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Bobur</strong> tölov hisobini yubordi</span><span class="fx-inbox__sub">Moliya · hisob #318</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">Keça</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
    </ul></section>
  <p class="fx-inbox__empty" hidden>Hammasi körib çiqildi — yangi narsa yöq.</p>
</div>
    </div>
  </div>
</div>

Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-dialog-width --fx-ease-enter --fx-ease-exit --fx-font-size-md --fx-font-size-sm --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-fast --fx-motion-scale-enter --fx-motion-shift-sm --fx-popover-width --fx-radius-overlay --fx-shadow-lg --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary