วิดเจ็ต: ปุ่มนำทาง

องค์ประกอบที่กำหนดเองของ <devsite-nav-buttons> จะอนุญาตให้กลุ่มปุ่มโหลดซ้ำได้ หน้าปัจจุบันที่มีพารามิเตอร์สตริงการค้นหาต่างกัน

สาธิต

Java sample code

การใช้งาน

หากต้องการใช้ ให้สร้างองค์ประกอบ <devsite-nav-buttons> ที่มีแอตทริบิวต์ name และ วางเอลิเมนต์ button หลายรายการที่มีแอตทริบิวต์ value ที่ต่างกันอยู่ภายใน สำหรับปุ่มแต่ละกลุ่ม ให้เลือก 1 ปุ่มเป็นค่าเริ่มต้นโดยการเพิ่ม 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>

ในไฟล์ Markdown (.md) ให้ตรวจสอบว่าองค์ประกอบที่กำหนดเองถูกรวมด้วย องค์ประกอบ HTML มาตรฐาน เช่น section, div หรือ 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>

จากนั้นคุณสามารถใช้ แท็กแบบไดนามิก ที่ตรวจสอบพารามิเตอร์สตริงคำค้นหาเพื่อกำหนดเนื้อหาที่จะแสดง แก่ผู้ใช้ได้

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

การลิงก์ในหน้าเว็บด้วยรหัส

ตามกฎทั่วไป วิธีที่ดีที่สุดคือวางองค์ประกอบ <devsite-nav-buttons> ไว้ใกล้ ด้านบนของหน้า เนื่องจากการคลิกปุ่มใดๆ ในหน้าจะนำผู้ใช้ไปยัง URL ใหม่ และโหลดหน้าเว็บซ้ำ หากคุณกำลังใช้องค์ประกอบที่อยู่ตรงกลางหน้า และ/หรือต้องการให้สามารถบุ๊กมาร์กตำแหน่งองค์ประกอบบนหน้าเว็บได้ คุณควร ระบุ id ที่ไม่ซ้ำกันในองค์ประกอบ ซึ่งจะเพิ่ม Anchor ที่มีชื่อต่อท้าย URL และทำให้หน้าเว็บเลื่อนไปยังตำแหน่งขององค์ประกอบเมื่อโหลดหน้าเว็บ

<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

โดยค่าเริ่มต้น หลังจากที่ผู้ใช้คลิกปุ่มใดปุ่มหนึ่ง ระบบจะบันทึกค่าของปุ่มนั้น ไปยัง localStorage ระบบจะเพิ่มค่าที่เลือกลงในแถบที่อยู่โดยอัตโนมัติด้วย พารามิเตอร์ของ URL ในหน้าอื่นๆ ที่มีองค์ประกอบ <devsite-nav-buttons> ที่ใช้ ฟิลด์ name และ value เดียวกัน

นําพารามิเตอร์ของ URL สําหรับปุ่มเริ่มต้นออก

หากต้องการลบล้างลักษณะการทำงานเริ่มต้นและนำพารามิเตอร์ของ URL ออกเมื่อ คลิกปุ่ม default เพิ่ม 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>

แสดงพารามิเตอร์ของ URL สำหรับปุ่มเริ่มต้นเสมอ

เมื่อผู้ใช้เข้าชมหน้าเว็บที่มีองค์ประกอบ <devsite-nav-buttons> ของ ปุ่ม default จะถูกไฮไลต์ไว้ และไม่มีการเปลี่ยนแปลงกับที่อยู่ จนกว่าจะมีการคลิกปุ่ม

วิธีอัปเดตแถบที่อยู่ด้วยพารามิเตอร์ของ URL สำหรับปุ่ม default และดูให้แน่ใจว่ามีพารามิเตอร์ URL อยู่เสมอในหน้าที่มี องค์ประกอบ <devsite-nav-buttons> เพิ่ม 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>

การจัดรูปแบบปุ่ม

โดยค่าเริ่มต้น ปุ่มภายในองค์ประกอบ <devsite-nav-buttons> จะมี "ชิป" การจัดรูปแบบ หากต้องการเพิ่มหรือลดผลกระทบของปุ่ม คุณสามารถเพิ่ม แอตทริบิวต์ type ที่มีค่า filled หรือ text ซึ่งจะจัดรูปแบบแต่ละรายการ องค์ประกอบ button

การจัดรูปแบบปุ่มด้วย 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>

การจัดรูปแบบปุ่มด้วย 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>