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

## مثال

{{< tabs items="macOS,Linux,Windows" >}}

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

{{< /tabs >}}

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

### پیش‌فرض

```
{{</* tabs items="JSON,YAML,TOML" */>}}

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

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

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

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

```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}

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

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

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

{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}

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

{{< /tabs >}}


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

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

````
{{</* tabs items="JSON,YAML,TOML" */>}}

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

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

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

{{< tabs items="JSON,YAML,TOML" >}}

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

  {{< tab >}}
  ```yaml
  hello: world
  ```
  {{< /tab >}}

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

{{< /tabs >}}


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

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

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

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

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

```markdown
{{</* tabs items="A,B" */>}}

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

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

{{</* tabs items="A,B" */>}}

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

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