Pasirinktinis elementas <devsite-nav-buttons> leidžia mygtukų grupei iš naujo įkelti dabartinį puslapį su kitu užklausos eilutės parametru.
Demo
Java sample code
Naudojimas
Norėdami naudoti, sukurkite elementą <devsite-nav-buttons> su name atributu ir įdėkite kelis button elementus su skirtingais value atributais. Kiekvienai mygtukų grupei pasirinkite vieną kaip numatytąjį, prie elemento pridėdami default atributą.
<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>
Markdown ( .md ) faile įsitikinkite, kad tinkintas elementas yra apvyniotas standartiniu HTML elementu, pvz., section , div arba 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>
Tada galite naudoti dinamines žymas , kurios tiria užklausos eilutės parametrus, kad nustatytumėte, kurį turinį rodyti vartotojui.
{% 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 %}
Puslapio susiejimas su ID
Paprastai geriausia elementą <devsite-nav-buttons> įdėti į puslapio viršų, nes spustelėjus bet kurį jo mygtuką naudotojai nukreipiami į naują URL ir puslapis įkeliamas iš naujo. Jei naudojate elementą puslapio viduryje ir (arba) norite, kad elemento vieta puslapyje būtų žymima, turėtumėte nurodyti unikalų elemento id , kuris pridės pavadintą prieraišą prie URL ir privers puslapį slinkti. į elemento vietą, kai puslapis įkeliamas.
<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 parametrų parinktys
Pagal numatytuosius nustatymus, vartotojui spustelėjus vieną iš mygtukų, mygtuko reikšmė išsaugoma vietinėje saugykloje. Pasirinkta reikšmė automatiškai įtraukiama į adreso juostą kaip URL parametras kituose puslapiuose su <devsite-nav-buttons> elementais, kuriuose naudojami tie patys name ir value laukai.
Pašalinkite numatytojo mygtuko URL parametrą
Norėdami nepaisyti numatytosios elgsenos ir pašalinti URL parametrą spustelėjus default mygtuką, prie elemento pridėkite param="reset" :
<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>
Visada rodyti numatytojo mygtuko URL parametrą
Kai vartotojas pirmą kartą apsilanko puslapyje su elementu <devsite-nav-buttons> , default mygtukas paryškinamas ir adreso juosta nekeičiama, kol nepaspaudžiamas mygtukas.
Norėdami atnaujinti adreso juostą naudojant default mygtuko URL parametrą ir užtikrinti, kad puslapiuose su elementu <devsite-nav-buttons> visada būtų URL parametras, prie elemento pridėkite param="always" :
<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>
Mygtukų stilius
Pagal numatytuosius nustatymus mygtukai, esantys elemente <devsite-nav-buttons> , turi "lusto" stilių. Norėdami padidinti arba sumažinti vaizdinį mygtukų poveikį, galite pridėti type atributą su reikšme filled arba text , kuris sukurs kiekvieno button elemento stilių.
Mygtukų stilius su type="filled" :
<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>
Mygtukų stilius su type="text" :
<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>