ווידג'טים: לחצני ניווט

הרכיב המותאם אישית <devsite-nav-buttons> מאפשר טעינה מחדש של קבוצת לחצנים הדף הנוכחי עם פרמטר querystring שונה.

הדגמה (דמו)

Java sample code

שימוש

כדי להשתמש בו, צריך ליצור רכיב <devsite-nav-buttons> עם המאפיין name להציב מספר רכיבי button עם מאפייני value שונים. לכל קבוצת לחצנים, צריך לבחור אחד כברירת המחדל על ידי הוספת 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> ליד החלק העליון של הדף, מכיוון שלחיצה על אחד מהלחצנים שלו מפנה את המשתמשים לכתובת אתר חדשה וטוען מחדש את הדף. אם משתמשים ברכיב באמצע הדף ו/או רוצים שמיקום הרכיב בדף יהיה ניתן לסימנייה, לציין id ייחודי באלמנט, שיוסיף עוגן בעל שם כתובת 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. הערך שנבחר יתווסף אוטומטית לסרגל הכתובות בתור פרמטר של כתובת אתר בדפים אחרים עם רכיבי <devsite-nav-buttons> שמשתמשים אותם שדות name ו-value.

צריך להסיר את הפרמטר של כתובת האתר מלחצן ברירת המחדל

כדי לשנות את התנהגות ברירת המחדל ולהסיר את הפרמטר של כתובת האתר כאשר בוצעה לחיצה על הלחצן 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>

להציג תמיד פרמטר של כתובת אתר עבור לחצן ברירת המחדל

כשמשתמש מבקר בדף שמכיל רכיב <devsite-nav-buttons> בפעם הראשונה הלחצן default מודגש ואין שינוי בכתובת. עד שלוחצים על לחצן.

כדי שסרגל הכתובות יתעדכן בפרמטר של כתובת האתר ללחצן default, ולוודא שתמיד יש פרמטר של כתובת אתר בדפים עם רכיב <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>