<devsite-nav-buttons> özel öğesi, bir grup düğmenin yeniden yüklenmesini sağlıyor
geçerli sayfayı farklı bir querystring parametresiyle değiştirin.
Demo
Java sample code
Kullanım
Kullanmak için name özelliğine sahip bir <devsite-nav-buttons> öğesi oluşturun ve
içine farklı value özelliklerine sahip birden çok button öğesi yerleştirin.
default ekleyerek her bir düğme grubu için birini varsayılan olarak seçin
özelliğinin değeri.
<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) dosyasında, özel öğenin
section, div veya p gibi standart HTML öğesi:
<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>
Ardından dinamik etiketler hangi içeriğin gösterileceğini belirlemek için sorgu dizesi parametrelerini inceleyen kullanıcıya gösterir.
{% 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 %}
Bir kimlik ile sayfa içi bağlantı oluşturma
Genel bir kural olarak, <devsite-nav-buttons> öğesini yakın bir yere yerleştirmek en iyisidir
sayfanın üst kısmında, çünkü düğmelerin herhangi birini tıklayan kullanıcılar yeni bir URL'ye
ve sayfayı yeniden yükler. Öğeyi bir sayfanın ortasında kullanıyorsanız
ve/veya öğenin sayfadaki konumunun yer işareti olarak belirlenebilir olmasını istiyorsanız
öğede, benzersiz bir id belirtin. Bu,
URL'yi ekleyin ve sayfa yüklendiğinde sayfanın öğenin konumuna doğru kaymasını sağlayın.
<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 parametresi seçenekleri
Varsayılan olarak, kullanıcı düğmelerden birini tıkladıktan sonra düğmenin değeri kaydedilir
localStorage'a geri yükleyebilirsiniz. Seçilen değer otomatik olarak adres çubuğuna
kullanan ve <devsite-nav-buttons> öğeleri içeren diğer sayfalardaki bir URL parametresinden
aynı name ve value alanlarında kullanabilirsiniz.
Varsayılan düğmenin URL parametresini kaldırma
Şu durumlarda varsayılan davranışı geçersiz kılmak ve URL parametresini kaldırmak için:
default düğmesi tıklandı. Öğeye param="reset" ekleyin:
<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>
Varsayılan düğme için her zaman bir URL parametresi göster
Kullanıcı ilk öğe için <devsite-nav-buttons> öğesi olan bir sayfayı ziyaret ettiğinde
default düğmesi vurgulanır ve adreste değişiklik yapılmamıştır
düğmesini tıklayın.
Adres çubuğunun default düğmesinin URL parametresiyle güncellenmesi için
ve
<devsite-nav-buttons> öğesi, öğeye param="always" ekleyin:
<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>
Düğme stili
Varsayılan olarak <devsite-nav-buttons> öğesindeki düğmelerde "çip" bulunur.
görünüm. Düğmelerin görsel etkisini artırmak veya azaltmak için
her birinin stilini belirleyecek filled veya text değerine sahip bir type özelliği
button öğesi.
type="filled" ile düğme stili :
<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>
type="text" ile düğme stili :
<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>