Phần tử tuỳ chỉnh <devsite-nav-buttons> cho phép một nhóm các nút tải lại
trang hiện tại bằng tham số chuỗi truy vấn khác.
Bản minh hoạ
Java sample code
Cách sử dụng
Để sử dụng, hãy tạo phần tử <devsite-nav-buttons> có thuộc tính name và
đặt nhiều phần tử button có các thuộc tính value khác nhau bên trong.
Đối với mỗi nhóm nút, hãy chọn một nút làm mặc định bằng cách thêm một default
cho phần tử.
<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>
Trong tệp Markdown (.md), hãy đảm bảo phần tử tuỳ chỉnh được gói bằng một
phần tử HTML chuẩn, chẳng hạn như section, div hoặc 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>
Sau đó, bạn có thể sử dụng thẻ động kiểm tra các tham số chuỗi truy vấn để xác định nội dung nào sẽ hiển thị cho người dùng.
{% 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 %}
Liên kết trong trang bằng mã nhận dạng
Theo nguyên tắc chung, tốt nhất là bạn nên đặt phần tử <devsite-nav-buttons> gần
đầu trang vì thao tác nhấp vào nút bất kỳ sẽ đưa người dùng đến một URL mới
và tải lại trang. Nếu bạn đang sử dụng phần tử ở giữa trang
và/hoặc muốn vị trí của phần tử trên trang
có thể đánh dấu trang, bạn nên
chỉ định một id duy nhất trên phần tử. Phần tử này sẽ thêm một liên kết có tên vào phần tử
URL và làm cho trang cuộn đến vị trí của phần tử khi trang tải.
<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>
Tùy chọn tham số URL
Theo mặc định, sau khi người dùng nhấp vào một trong các nút, giá trị của nút đó sẽ được lưu
vào localStorage. Giá trị đã chọn sẽ được tự động thêm vào thanh địa chỉ dưới dạng
tham số URL trên các trang khác có phần tử <devsite-nav-buttons> sử dụng
cùng một trường name và value.
Xoá tham số URL cho nút mặc định
Để ghi đè hành vi mặc định và xoá tham số URL khi
Nhấp vào nút default, hãy thêm param="reset" vào phần tử:
<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>
Luôn hiển thị tham số URL cho nút mặc định
Khi người dùng truy cập vào một trang có phần tử <devsite-nav-buttons> cho phần tử đầu tiên
giờ, nút default được làm nổi bật và không có thay đổi đối với địa chỉ
cho đến khi nhấp vào một nút.
Để cập nhật thanh địa chỉ bằng tham số URL cho nút default,
và đảm bảo luôn có tham số URL trên các trang có
Phần tử <devsite-nav-buttons>, thêm param="always" vào phần tử:
<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>
Tạo kiểu nút
Theo mặc định, các nút trong phần tử <devsite-nav-buttons> có "khối"
tạo kiểu. Để tăng hoặc giảm tác động trực quan của các nút, bạn có thể thêm
thuộc tính type có giá trị filled hoặc text. Các giá trị này sẽ tạo kiểu cho mỗi thuộc tính
Phần tử button.
Tạo kiểu cho nút bằng 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>
Tạo kiểu cho nút bằng 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>