Widget: Tombol Navigasi

Elemen kustom <devsite-nav-buttons> memungkinkan grup tombol dimuat ulang halaman saat ini dengan parameter {i>querystring<i} yang berbeda.

Demo

Java sample code

Penggunaan

Untuk menggunakannya, buat elemen <devsite-nav-buttons> dengan atribut name dan menempatkan beberapa elemen button dengan atribut value yang berbeda di dalamnya. Untuk setiap grup tombol, pilih satu tombol sebagai default dengan menambahkan default ke elemen.

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

Dalam file Markdown (.md), pastikan elemen kustom digabungkan dengan elemen HTML standar, seperti section, div, atau 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>

Anda kemudian dapat menggunakan tag dinamis yang memeriksa parameter {i>string<i} kueri untuk menentukan konten mana yang akan ditampilkan kepada pengguna.

{% 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 %}

Penautan dalam halaman dengan ID

Sebagai aturan umum, sebaiknya tempatkan elemen <devsite-nav-buttons> di dekat bagian atas halaman karena mengklik salah satu tombolnya akan membawa pengguna ke URL baru dan memuat ulang halaman. Jika Anda menggunakan elemen di tengah halaman dan/atau ingin lokasi elemen pada halaman dapat di-bookmark, Anda harus menentukan id unik pada elemen, yang akan menambahkan anchor bernama ke URL dan membuat halaman men-scroll ke lokasi elemen saat halaman dimuat.

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

Opsi parameter URL

Secara {i>default<i}, setelah pengguna mengklik salah satu tombol, nilai tombol disimpan ke localStorage. Nilai yang dipilih secara otomatis ditambahkan ke kolom URL sebagai parameter URL di halaman lain dengan elemen <devsite-nav-buttons> yang menggunakan kolom name dan value yang sama.

Menghapus parameter URL untuk tombol default

Untuk mengganti perilaku default dan menghapus parameter URL saat Tombol default diklik, tambahkan param="reset" ke elemen:

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

Selalu menampilkan parameter URL untuk tombol default

Saat pengguna mengunjungi halaman dengan elemen <devsite-nav-buttons> untuk yang pertama waktu, tombol default disorot dan tidak ada perubahan pada alamat hingga tombol diklik.

Agar kolom URL diperbarui dengan parameter URL untuk tombol default, dan pastikan selalu ada parameter URL pada halaman dengan <devsite-nav-buttons>, tambahkan param="always" ke elemen:

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

Gaya tombol

Secara default, tombol dalam elemen <devsite-nav-buttons> memiliki "chip" gaya visual. Untuk menambah atau mengurangi dampak visual tombol, Anda dapat menambahkan atribut type dengan nilai filled atau text, yang masing-masing akan mengatur gaya elemen button.

Gaya tombol dengan 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>

Gaya tombol dengan 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>