विजेट: नेविगेशन बटन

<devsite-nav-buttons> कस्टम एलिमेंट की मदद से, बटन के ग्रुप को फिर से लोड किया जा सकता है किसी अलग क्वेरी स्ट्रिंग पैरामीटर के साथ मौजूदा पेज.

डेमो

Java sample code

इस्तेमाल

इस्तेमाल करने के लिए, name एट्रिब्यूट के साथ <devsite-nav-buttons> एलिमेंट बनाएं और कई 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) फ़ाइल में, पक्का करें कि कस्टम एलिमेंट स्टैंडर्ड एचटीएमएल एलिमेंट, जैसे कि 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 तय करें, जो यूआरएल डालें और पेज लोड होने पर एलिमेंट की जगह तक स्क्रोल करने के लिए कहें.

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

यूआरएल पैरामीटर के विकल्प

डिफ़ॉल्ट रूप से, जब कोई उपयोगकर्ता किसी बटन पर क्लिक करता है, तो उस बटन की वैल्यू सेव हो जाती है localStorage में बदल जाता है. चुनी गई वैल्यू, पता बार में अपने-आप इस खाते से जुड़ जाती है दूसरे पेजों पर मौजूद यूआरएल पैरामीटर जिसमें <devsite-nav-buttons> एलिमेंट शामिल हैं, जो वही name और value फ़ील्ड.

डिफ़ॉल्ट बटन के लिए यूआरएल पैरामीटर हटाएं

डिफ़ॉल्ट व्यवहार को बदलने और 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>

डिफ़ॉल्ट बटन के लिए हमेशा यूआरएल पैरामीटर दिखाएं

जब कोई उपयोगकर्ता ऐसे पेज पर आता है जिसमें पहली बार <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> एलिमेंट में मौजूद बटन में "चिप" होता है स्टाइलिंग. बटन के विज़ुअल इफ़ेक्ट को बढ़ाने या घटाने के लिए, filled या text की वैल्यू वाला type एट्रिब्यूट, जो हर एट्रिब्यूट के लिए अलग-अलग स्टाइल में काम करेगा 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>