Mukautettu <devsite-nav-buttons> -elementti sallii ryhmän painikkeiden ladata nykyisen sivun uudelleen toisella kyselymerkkijonoparametrilla.
Demo
Java sample code
Käyttö
Voit käyttää sitä luomalla <devsite-nav-buttons> -elementin, jossa on name attribuutti, ja sijoittamalla siihen useita button , joilla on erilaiset value . Valitse jokaiselle painikeryhmälle yksi oletusarvo lisäämällä elementtiin default .
<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>
Varmista Markdown ( .md ) -tiedostossa, että mukautettu elementti on kääritty tavallisella HTML-elementillä, kuten section , div tai 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>
Voit sitten käyttää dynaamisia tunnisteita , jotka tutkivat kyselymerkkijonoparametreja määrittääksesi, mitä sisältöä käyttäjälle näytetään.
{% 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 %}Sivun sisäinen linkitys tunnuksella
Yleissääntönä on, että <devsite-nav-buttons> -elementti on parasta sijoittaa sivun yläreunaan, koska minkä tahansa sen painikkeen napsauttaminen ohjaa käyttäjät uuteen URL-osoitteeseen ja lataa sivun uudelleen. Jos käytät elementtiä sivun keskellä ja/tai haluat, että elementin sijainti sivulla on kirjanmerkillä, sinun tulee määrittää elementille yksilöllinen id , joka liittää URL-osoitteeseen nimetyn ankkurin ja vie sivun elementin sijaintiin, kun sivu latautuu.
<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-parametrivaihtoehdot
Oletusarvoisesti, kun käyttäjä napsauttaa jotakin painikkeista, painikkeen arvo tallennetaan paikalliseen tallennustilaan. Valittu arvo lisätään automaattisesti osoitepalkkiin URL-parametriksi muilla sivuilla, joilla on <devsite-nav-buttons> -elementtejä, jotka käyttävät samaa name ja value .
Poista oletuspainikkeen URL-parametri
Jos haluat ohittaa oletuskäytön ja poistaa URL-parametrin, kun default napsautetaan, lisää elementtiin 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>
Näytä aina URL-parametri oletuspainikkeelle
Kun käyttäjä vierailee sivulla, jossa on <devsite-nav-buttons> -elementti ensimmäistä kertaa, default on korostettuna, eikä osoitepalkki muutu, ennen kuin painiketta napsautetaan.
Jos haluat päivittää osoiterivin default URL-parametrilla ja varmistaa, että sivuilla, joissa on <devsite-nav-buttons> -elementti, on aina URL-parametri, lisää elementtiin 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>
Painikkeiden muotoilu
Oletuksena <devsite-nav-buttons> -elementin painikkeilla on "chip" -tyyli. Voit lisätä tai vähentää painikkeiden visuaalista vaikutusta lisäämällä type attribuutin, jonka arvo on filled tai text , joka muokkaa jokaisen button tyyliä.
Painikkeiden muotoilu type="filled" :llä:
<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>
Painikkeiden muotoilu type="text" :llä:
<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>