ابزارک ها: دکمه های ناو

عنصر سفارشی <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> را نزدیک بالای صفحه قرار دهید زیرا کلیک کردن بر روی هر یک از دکمه‌های آن، کاربران را به یک URL جدید می‌برد و صفحه را مجدداً بارگیری می‌کند. اگر از عنصری در وسط صفحه استفاده می‌کنید و/یا می‌خواهید مکان عنصر در صفحه قابل نشانک باشد، باید یک 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 ذخیره می شود. مقدار انتخاب شده به صورت خودکار به نوار آدرس به عنوان پارامتر 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>