A <devsite-nav-buttons> egyéni elem lehetővé teszi, hogy egy gombcsoport újratöltse az aktuális oldalt egy másik lekérdezési karakterlánc-paraméterrel.
Demó
Java sample code
Használat
Használatához hozzon létre egy <devsite-nav-buttons> elemet name attribútummal, és helyezzen el több button különböző value . Minden gombcsoporthoz válasszon egyet alapértelmezettként úgy, hogy hozzáad egy default attribútumot az elemhez.
<devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Egy Markdown ( .md ) fájlban győződjön meg arról, hogy az egyéni elem egy szabványos HTML-elemmel van burkolva, például section , div vagy p :
<div> <devsite-nav-buttons name="language"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons> </div>
Ezután a lekérdezési karakterlánc paramétereit vizsgáló dinamikus címkék segítségével meghatározhatja, hogy melyik tartalmat jelenítse meg a felhasználó számára.
{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}Oldalon belüli linkelés azonosítóval
Általános szabály, hogy a legjobb, ha a <devsite-nav-buttons> elemet az oldal tetejéhez közel helyezi el, mivel bármelyik gombjára kattintva a felhasználók egy új URL-hez jutnak, és újratöltik az oldalt. Ha az elemet egy oldal közepén használja, és/vagy azt szeretné, hogy az elem helye az oldalon legyen könyvjelzővel ellátható, akkor egyedi id kell megadnia az elemnek, amely névvel ellátott horgonyt fűz az URL-hez, és görgeti az oldalt. az elem helyére az oldal betöltésekor.
<devsite-nav-buttons name="language" id="code-examples"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
URL-paraméter-beállítások
Alapértelmezés szerint, miután a felhasználó rákattint az egyik gombra, a gomb értéke a localStorage-ba kerül. A kiválasztott érték automatikusan hozzáadódik a címsorhoz URL-paraméterként azokon a <devsite-nav-buttons> elemekkel rendelkező oldalakon, amelyek ugyanazt name és value használják.
Távolítsa el az alapértelmezett gomb URL-paraméterét
Az alapértelmezett viselkedés felülírásához és az URL paraméter eltávolításához, amikor az default gombra kattintanak, adja hozzá param="reset" az elemhez:
<devsite-nav-buttons name="language" param="reset"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Mindig jelenítsen meg egy URL-paramétert az alapértelmezett gombhoz
Amikor a felhasználó először keres fel egy <devsite-nav-buttons> elemet tartalmazó oldalt, az default gomb kiemelésre kerül, és a címsor nem változik, amíg egy gombra nem kattint.
Ha a címsort az default gomb URL-paraméterével szeretné frissíteni, és biztosítani szeretné, hogy mindig legyen URL-paraméter a <devsite-nav-buttons> elemet tartalmazó oldalakon, adja hozzá param="always" értéket az elemhez:
<devsite-nav-buttons name="language" param="always"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Gombstílus
Alapértelmezés szerint a <devsite-nav-buttons> elemen belüli gombok "chip" stílusúak. A gombok vizuális hatásának növelése vagy csökkentése érdekében hozzáadhat egy type attribútumot filled vagy text értékkel, amely az egyes button stílusát módosítja.
Gombstílus type="filled" jelzéssel:
<devsite-nav-buttons name="language" type="filled"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>
Gombstílus type="text" segítségével:
<devsite-nav-buttons name="language" type="text"> <button value="java" default>Java example</button> <button value="python">Python example</button> <button value="go">Go example</button> </devsite-nav-buttons>