Dokumentace | Fubi — nástroj pro zpětnou vazbu a spolupráci na webu

Domů

Funkce

Ceník

Zabezpečení

Dokumentace

Select Language

Live demo

Začít zdarma

Select Language

Live demo

Začít zdarma

Začít

Dokumentace pro vývojáře

Fubi běží uvnitř Shadow DOM a ve výchozím stavu nezasahuje do vašeho webu. Na této stránce najdete dvě možnosti přizpůsobení: vzhled pomocí CSS proměnných a chování prvků pomocí data atributů.

CSS proměnné

Fubi používá custom CSS properties pro barvy zvýraznění. Protože se custom properties dědí i přes Shadow DOM, můžete je přepsat přímo ze své stránky.

Nastavte je na body, html nebo libovolném nadřazeném prvku.

Nastavte kteroukoli z těchto hodnot na prvek body, html nebo jakýkoli nadřazený prvek:

Proměnná

--fubi-hover-default-color

--fubi-hover-error-color

--fubi-hover-invisible-color

--fubi-hover-done-color

--fubi-hover-thread-color

--fubi-hover-not-allowed-color

--fubi-hover-isolation-color

Výchozí

#0ea5e9

#ef4444

#ea580c

#22c55e

#6366f1

#737373

#6366f1

Použití

Výchozí zvýraznění prvku

Zvýraznění chybového stavu

Skryté prvky / prvky s nulovou velikostí

Vyřešené/hotové prvky

Prvky s komentáři

Ignorované prvky

Obrys režimu izolace

body { 

--fubi-hover-default-color: #8b5cf6; 
--fubi-hover-thread-color: #f59e0b;
 }

body { 

--fubi-hover-default-color: #8b5cf6; 
--fubi-hover-thread-color: #f59e0b;
 }

body { 

--fubi-hover-default-color: #8b5cf6; 
--fubi-hover-thread-color: #f59e0b;
 }

Pokud je nenastavíte, použijí se vestavěné výchozí hodnoty.

Data atributy

Pomocí data atributů určíte, jak se Fubi chová ke konkrétním prvkům na stránce.

data-fubi-ignore

Zabraňuje výběru jednoho prvku. Na dotykových zařízeních zobrazuje Fubi indikátor „ignorováno“. Na zařízeních s kurzorem sleduje kurzor pouze sledovací bod – žádné zvýraznění prvku. Nemá vliv na podřízené prvky.

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

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

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

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

<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é -->
<

data-fubi-ignore-all

Stejné jako data-fubi-ignore, ale šíří se na všechny podřízené prvky. Funguje i přes hranice shadow DOM.

<nav data-fubi-ignore-all>
  <a href="/">Domů</a>
  <a href="/about">O nás</a>
  <div class="dropdown">
    <button>Nabídka</button>
    <!-- to také ignoruje všechny potomky -->
  </div>
</nav>

<nav data-fubi-ignore-all>
  <a href="/">Domů</a>
  <a href="/about">O nás</a>
  <div class="dropdown">
    <button>Nabídka</button>
    <!-- to také ignoruje všechny potomky -->
  </div>
</nav>

<nav data-fubi-ignore-all>
  <a href="/">Domů</a>
  <a href="/about">O nás</a>
  <div class="dropdown">
    <button>Nabídka</button>
    <!-- to také ignoruje všechny potomky -->
  </div>
</nav>