Körsatiş · molecule
Manbalar va iqtibos
Matn içida [1] iqtibos pill'i — ustiga kelinsa yoki fokus tuşsa manba kartasi (sayt, sarlavha, parça) çiqadi; javob oxirida yiğiladigan manbalar röyxati. Pill röyxatdagi manbaga havola (:target ajratadi).
Oktabr tuşumi 12,4 % ösdi1moliya.example.uzOktabr oyi savdo hisobotiOnlayn kanal uluşi 38 % ga yetdi…, asosiy hissa onlayn kanaldan2statistika.example.uzElektron savdo: çoraklik şarh.
Manbalar 2 ta
- 1Oktabr oyi savdo hisobotimoliya.example.uz
- 2Elektron savdo: çoraklik şarhstatistika.example.uz
Anatomiya
- cite
.fx-citeşart - pill
.fx-cite__pillşart - card
.fx-cite__cardixtiyoriy - site
.fx-cite__siteixtiyoriy - favicon
.fx-cite__favixtiyoriy - title
.fx-cite__titleixtiyoriy - snippet
.fx-cite__snippetixtiyoriy - sources
.fx-sourcesixtiyoriy - stack
.fx-sources__stackixtiyoriy - list
.fx-sources__listixtiyoriy - item
.fx-sources__itemixtiyoriy - domain
.fx-sources__domainixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Iqtibos pill'iga — karta oçiladi |
| Enter | Manbaga ötadi |
Pill — oddiy havola, karta aria-describedby bilan boğlangan role="tooltip" matni; hover va fokus oçadi. Manbalar röyxati — <details> + <ol>. Favicon aria-hidden, sayt nomi matn bilan.
Naqş: WAI-ARIA APG disclosure
Kod
AI uçun: qaçon işlatiladi
- AI javobidagi tasdiqlanadigan faktlarga manba beriş.
npx foxui add sources
<p>Oktabr tuşumi 12,4 % ösdi<span class="fx-cite"><a class="fx-cite__pill" href="#src-1" aria-describedby="cite-1">1</a><span class="fx-cite__card" id="cite-1" role="tooltip"><span class="fx-cite__site"><span class="fx-cite__fav" aria-hidden="true">M</span>moliya.example.uz</span><span class="fx-cite__title">Oktabr oyi savdo hisoboti</span><span class="fx-cite__snippet">Onlayn kanal uluşi 38 % ga yetdi…</span></span></span>, asosiy hissa onlayn kanaldan<span class="fx-cite"><a class="fx-cite__pill" href="#src-2" aria-describedby="cite-2">2</a><span class="fx-cite__card" id="cite-2" role="tooltip"><span class="fx-cite__site"><span class="fx-cite__fav" aria-hidden="true">S</span>statistika.example.uz</span><span class="fx-cite__title">Elektron savdo: çoraklik şarh</span></span></span>.</p>
<details class="fx-sources">
<summary>Manbalar <span class="fx-sources__stack"><span class="fx-sources__fav" aria-hidden="true">M</span><span class="fx-sources__fav" aria-hidden="true">S</span></span> 2 ta <svg data-fx-icon="chev" class="fx-sources__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></summary>
<ol class="fx-sources__list">
<li class="fx-sources__item" id="src-1"><span class="fx-sources__num">1</span><a href="#src-1">Oktabr oyi savdo hisoboti</a><span class="fx-sources__domain">moliya.example.uz</span></li>
<li class="fx-sources__item" id="src-2"><span class="fx-sources__num">2</span><a href="#src-2">Elektron savdo: çoraklik şarh</a><span class="fx-sources__domain">statistika.example.uz</span></li>
</ol>
</details>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-fast --fx-motion-fast --fx-motion-shift-sm --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-shadow-lg --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary