---
title: تب‌ها
next: /docs/guide/deploy-site
---

## مثال

{{< tabs >}}

  {{< tab name="macOS" >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
  {{< tab name="Linux" >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}}
  {{< tab name="Windows" >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}

{{< /tabs >}}

## نحوه استفاده

### پیش‌فرض

```
{{</* tabs */>}}

  {{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
  {{</* tab name="YAML" */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
  {{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}

{{</* /tabs */>}}
```

### مشخص کردن ایندکس انتخاب شده

از ویژگی `selected` برای مشخص کردن تب انتخاب شده استفاده کنید.

```
{{</* tabs */>}}

  {{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
  {{</* tab name="YAML" selected=true */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
  {{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}

{{</* /tabs */>}}
```

تب `YAML` به طور پیش‌فرض انتخاب خواهد شد.

{{< tabs >}}

{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
{{< tab name="YAML" selected=true >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
{{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}

{{< /tabs >}}


### استفاده از Markdown

نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:

````
{{</* tabs */>}}

  {{</* tab name="JSON" */>}}
  ```json
  { "hello": "world" }
  ```
  {{</* /tab */>}}

  ... سایر تب‌ها را به همین ترتیب اضافه کنید

{{</* /tabs */>}}
````

{{< tabs >}}

  {{< tab name="JSON" >}}
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}

  {{< tab name="YAML" >}}
  ```yaml
  hello: world
  ```
  {{< /tab >}}

  {{< tab name="TOML" >}}
  ```toml
  hello = "world"
  ```
  {{< /tab >}}

{{< /tabs >}}


### همگام‌سازی تب‌ها

تب‌هایی که لیست `name` یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با `name` یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد.

به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:

```yaml {filename="hugo.yaml"}
params:
  page:
    tabs:
      sync: true
```

با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:

```markdown
{{</* tabs */>}}

  {{</* tab name="A" */>}}محتوای A{{</* /tab */>}}
  {{</* tab name="B" */>}}محتوای B{{</* /tab */>}}

{{</* /tabs */>}}

{{</* tabs */>}}

  {{</* tab name="A" */>}}محتوای دوم A{{</* /tab */>}}
  {{</* tab name="B" */>}}محتوای دوم B{{</* /tab */>}}

{{</* /tabs */>}}
```