Dokumentace pro vývojáře

Fubi vám nepřekáží – vykresluje se v Shadow DOMu a do vaší stránky zasahuje pouze tam, kde je to nezbytné. Zde je přehled toho, co přidává a co můžete přepsat.

CSS proměnné

Fubi používá pro barvy zvýraznění CSS proměnné, takže je můžete snadno přepsat. Pokud tak neučiníte, použijí se výchozí hodnoty.

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Výchozí zvýraznění prvku */
  --fubi-hover-error-color: #ef4444;       /* Zvýraznění chybového stavu */
  --fubi-hover-invisible-color: #ea580c;   /* Skryté prvky / prvky s nulovou velikostí */
  --fubi-hover-done-color: #22c55e;        /* Vyřešené/dokončené prvky */
  --fubi-hover-thread-color: #6366f1;      /* Prvky s vlákny komentářů */
  --fubi-hover-not-allowed-color: #737373; /* Ignorované prvky */
  --fubi-hover-isolation-color: #6366f1;   /* Obrys režimu izolace */
}

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Výchozí zvýraznění prvku */
  --fubi-hover-error-color: #ef4444;       /* Zvýraznění chybového stavu */
  --fubi-hover-invisible-color: #ea580c;   /* Skryté prvky / prvky s nulovou velikostí */
  --fubi-hover-done-color: #22c55e;        /* Vyřešené/dokončené prvky */
  --fubi-hover-thread-color: #6366f1;      /* Prvky s vlákny komentářů */
  --fubi-hover-not-allowed-color: #737373; /* Ignorované prvky */
  --fubi-hover-isolation-color: #6366f1;   /* Obrys režimu izolace */
}

:root {
  --fubi-hover-default-color: #0ea5e9;     /* Výchozí zvýraznění prvku */
  --fubi-hover-error-color: #ef4444;       /* Zvýraznění chybového stavu */
  --fubi-hover-invisible-color: #ea580c;   /* Skryté prvky / prvky s nulovou velikostí */
  --fubi-hover-done-color: #22c55e;        /* Vyřešené/dokončené prvky */
  --fubi-hover-thread-color: #6366f1;      /* Prvky s vlákny komentářů */
  --fubi-hover-not-allowed-color: #737373; /* Ignorované prvky */
  --fubi-hover-isolation-color: #6366f1;   /* Obrys režimu izolace */
}

Data atributy

Použijte datové atributy k označení prvků, které má Fubi ignorovat. Můžete je použít na jeden konkrétní prvek, nebo je nechat dědit na všechny podřízené prvky.

<!-- data-fubi-ignore: přeskočí jeden prvek, potomci jsou stále volitelní -->
<button data-fubi-ignore>Toto nelze vybrat</button>

<nav>
  <a href="/" data-fubi-ignore>Domů</a>   <!-- ignorováno -->
  <a href="/about">O nás</a>              <!-- stále volitelné -->
</nav>

<!-- data-fubi-ignore-all: přeskočí prvek i všechny potomky, prochází i shadow DOM -->
<nav data-fubi-ignore-all>
  <a href="/">Domů</a>
  <a href="/about">O nás</a>
  <div class="dropdown">
    <button>Menu</button>                 <!-- všichni potomci jsou také ignorováni -->
  </div>
</nav>

<!-- data-fubi-ignore: přeskočí jeden prvek, potomci jsou stále volitelní -->
<button data-fubi-ignore>Toto nelze vybrat</button>

<nav>
  <a href="/" data-fubi-ignore>Domů</a>   <!-- ignorováno -->
  <a href="/about">O nás</a>              <!-- stále volitelné -->
</nav>

<!-- data-fubi-ignore-all: přeskočí prvek i všechny potomky, prochází i shadow DOM -->
<nav data-fubi-ignore-all>
  <a href="/">Domů</a>
  <a href="/about">O nás</a>
  <div class="dropdown">
    <button>Menu</button>                 <!-- všichni potomci jsou také ignorováni -->
  </div>
</nav>

<button data-fubi-ignore>Toto nelze vybrat</button>

<nav>
  <a href="/" data-fubi-ignore>Domů</a>             
<!-- ignorováno -->
  <a href="/about">O nás</a>.              
<!-- stále volitelné -->
<

Sledujte nás na sociálních sítích

Získejte přehled o novinkách, aktualizacích a nových verzích Fubi.

Jsme online

Potřebujete pomoct? Kontaktujte nás na

support@fubi.dev

Funkce

Ceník

Zabezpečení

Dokumentace

Live demo

Začít

Zásady ochrany osobních údajů

Obchodní podmínky

DPA

Zásady používání souborů cookie