وجیٹس: نیوی بٹن

<devsite-nav-buttons> کسٹم عنصر بٹنوں کے ایک گروپ کو موجودہ صفحہ کو ایک مختلف سوالیہ پیرامیٹر کے ساتھ دوبارہ لوڈ کرنے کی اجازت دیتا ہے۔

ڈیمو

Java sample code

استعمال

استعمال کرنے کے لیے، name خصوصیت کے ساتھ ایک <devsite-nav-buttons> عنصر بنائیں اور اس کے اندر مختلف value خصوصیات کے ساتھ متعدد button عناصر رکھیں۔ بٹنوں کے ہر گروپ کے لیے، عنصر میں ایک 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>

مارک ڈاؤن ( .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 %}

صفحہ میں ایک ID کے ساتھ لنک کرنا

عام اصول کے طور پر، <devsite-nav-buttons> عنصر کو صفحہ کے اوپری حصے کے قریب رکھنا بہتر ہے کیونکہ اس کے کسی بھی بٹن پر کلک کرنے سے صارفین ایک نئے URL پر جاتے ہیں اور صفحہ کو دوبارہ لوڈ کر دیتے ہیں۔ اگر آپ صفحہ کے بیچ میں عنصر استعمال کر رہے ہیں اور/یا چاہتے ہیں کہ صفحہ پر عنصر کا مقام بُک مارک کے قابل ہو، تو آپ کو عنصر پر ایک منفرد 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>

URL پیرامیٹر کے اختیارات

پہلے سے طے شدہ طور پر، صارف کے کسی ایک بٹن پر کلک کرنے کے بعد، بٹن کی قدر لوکل سٹوریج میں محفوظ ہو جاتی ہے۔ منتخب کردہ قدر خود بخود ایڈریس بار میں URL پیرامیٹر کے طور پر دوسرے صفحات پر <devsite-nav-buttons> عناصر کے ساتھ شامل ہو جاتی ہے جو ایک ہی name اور value فیلڈز استعمال کرتے ہیں۔

ڈیفالٹ بٹن کے لیے URL پیرامیٹر کو ہٹا دیں۔

پہلے سے طے شدہ رویے کو اوور رائیڈ کرنے اور default بٹن پر کلک کرنے پر URL پیرامیٹر کو ہٹانے کے لیے، عنصر میں 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 بٹن نمایاں ہوجاتا ہے اور جب تک بٹن پر کلک نہیں کیا جاتا ایڈریس بار میں کوئی تبدیلی نہیں ہوتی۔

ایڈریس بار کو default بٹن کے لیے URL پیرامیٹر کے ساتھ اپ ڈیٹ کرنے کے لیے، اور یقینی بنائیں کہ <devsite-nav-buttons> عنصر والے صفحات پر ہمیشہ URL پیرامیٹر موجود ہے، عنصر میں 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> عنصر کے اندر موجود بٹنوں میں "chip" اسٹائل ہوتا ہے۔ بٹنوں کے بصری اثر کو بڑھانے یا کم کرنے کے لیے، آپ 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>