---
metadata:
  - name: generator
    content: Diplodoc Platform v5.70.0
alternate:
  - https://divkit.tech/docs/en/concepts/extensions/liquid-glass.md
  - https://divkit.tech/docs/ru/concepts/extensions/liquid-glass.md
  - href: https://divkit.tech/docs/ru/concepts/extensions/liquid-glass.md
    type: text/markdown
    title: Markdown version
  - href: https://divkit.tech/docs/ru/llms.txt?revision=r22102947
    rel: describedby
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/ru/llms.txt?revision=r22102947

# Эффект Liquid Glass

Чтобы добавить эффект Liquid Glass к элементу, используйте расширение `liquid_glass` (только для iOS):

```json translate=no
{
  "extensions": [
    {
      "id": "liquid_glass",
      "params": {
        "style": "regular",
        "is_interactive": true,
        "tint_color": "#80FF1744",
        "corner_style": {
          "type": "capsule",
          "max_radius": 16
        },
        "ui_style_variable": "ui_style"
      }
    }
  ]
}
```

Расширение работает на iOS 26 и новее. На более ранних версиях элемент отрисовывается без эффекта, лэйаут при этом не меняется.

## Параметры {#params}

#|
||
**Параметры**
|
**Описание**
||

||
`id`
|
Идентификатор расширения.
||

||
`is_enabled`
|
Включает эффект. Если задано значение `false`, элемент отрисовывается без него, размеры и положение элемента не меняются. Удобно для переключения эффекта выражением. По умолчанию: `true`.
||

||
`style`
|
Обязательный параметр. Стиль эффекта. Доступные значения:

- `regular` — обычное стекло;
- `clear` — прозрачное стекло.
||

||
`is_interactive`
|
Включает интерактивное поведение эффекта: стекло реагирует на нажатие. Опциональный параметр.
||

||
`tint_color`
|
Цвет тонирования эффекта. Опциональный параметр.
||

||
`corner_style`
|
Скругление углов эффекта. Опциональный параметр. Если не задан, используется скругление, выбранное системой. Доступные значения параметра `type`:

- `capsule` — углы скругляются в капсулу пропорционально размеру элемента. Необязательный параметр `max_radius` ограничивает радиус сверху;
- `corners` — фиксированные радиусы, задаются необязательными параметрами `top_left`, `top_right`, `bottom_left` и `bottom_right`. Незаданный угол не скругляется.
||

||
`ui_style_variable`
|
Имя переменной, в которую записывается `light` или `dark`. Опциональный параметр. Эффект сам определяет стиль оформления по контенту под собой, поэтому этот стиль может отличаться от стиля карточки. Используйте переменную, чтобы подобрать под него цвет контента поверх стекла.
||
|#

## Особенности работы {#behavior}

- Эффект отображается под элементом, поэтому фон самого элемента отрисовывается поверх эффекта — не задавайте элементу непрозрачный `background`.
- Все параметры поддерживают выражения, в том числе `is_enabled` и `style`.
- Если `style` не задан или содержит недопустимое значение, DivKit сообщает об ошибке построения блока и не применяет эффект.

## Подключение {#connect}

```swift translate=no
DivKitComponents(
  ...
  extensionHandlers: [
    LiquidGlassExtensionHandler()
  ]
)
```

## Пример {#example}

{% cut "Карточка с несколькими вариантами эффекта" %}

```json translate=no
{
  "templates": {
    "glass_label": {
      "type": "text",
      "font_size": 15,
      "font_weight": "medium",
      "text_alignment_horizontal": "center",
      "text_color": "#FFFFFFFF",
      "width": {
        "type": "match_parent"
      }
    }
  },
  "card": {
    "log_id": "liquid_glass_sample",
    "variables": [
      {
        "name": "is_enabled",
        "type": "boolean",
        "value": true
      },
      {
        "name": "ui_style",
        "type": "string",
        "value": "unknown"
      }
    ],
    "states": [
      {
        "state_id": 0,
        "div": {
          "type": "container",
          "orientation": "vertical",
          "height": {
            "type": "match_parent"
          },
          "paddings": {
            "left": 16,
            "right": 16,
            "top": 24,
            "bottom": 24
          },
          "background": [
            {
              "type": "gradient",
              "angle": 45,
              "colors": [
                "#FFFF3D00",
                "#FF00E676",
                "#FF2979FF"
              ]
            }
          ],
          "items": [
            {
              "type": "container",
              "orientation": "vertical",
              "content_alignment_vertical": "center",
              "height": {
                "type": "fixed",
                "value": 56
              },
              "margins": {
                "bottom": 16
              },
              "paddings": {
                "left": 20,
                "right": 20
              },
              "items": [
                {
                  "type": "glass_label",
                  "text": "clear + tint_color"
                }
              ],
              "extensions": [
                {
                  "id": "liquid_glass",
                  "params": {
                    "style": "clear",
                    "tint_color": "#80FF1744",
                    "corner_style": {
                      "type": "capsule",
                      "max_radius": 16
                    }
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "vertical",
              "content_alignment_vertical": "center",
              "height": {
                "type": "fixed",
                "value": 56
              },
              "margins": {
                "bottom": 16
              },
              "paddings": {
                "left": 20,
                "right": 20
              },
              "items": [
                {
                  "type": "glass_label",
                  "text": "is_enabled = @{is_enabled}"
                }
              ],
              "extensions": [
                {
                  "id": "liquid_glass",
                  "params": {
                    "style": "regular",
                    "is_enabled": "@{is_enabled}",
                    "corner_style": {
                      "type": "corners",
                      "top_left": 4,
                      "top_right": 24,
                      "bottom_left": 24,
                      "bottom_right": 4
                    }
                  }
                }
              ]
            },
            {
              "type": "container",
              "orientation": "vertical",
              "paddings": {
                "left": 16,
                "right": 16,
                "top": 16,
                "bottom": 16
              },
              "border": {
                "corner_radius": 16
              },
              "background": [
                {
                  "type": "solid",
                  "color": "#FF101010"
                }
              ],
              "items": [
                {
                  "type": "container",
                  "orientation": "vertical",
                  "content_alignment_vertical": "center",
                  "height": {
                    "type": "fixed",
                    "value": 56
                  },
                  "paddings": {
                    "left": 20,
                    "right": 20
                  },
                  "items": [
                    {
                      "type": "glass_label",
                      "text": "over dark content"
                    }
                  ],
                  "extensions": [
                    {
                      "id": "liquid_glass",
                      "params": {
                        "style": "regular",
                        "ui_style_variable": "ui_style",
                        "corner_style": {
                          "type": "capsule"
                        }
                      }
                    }
                  ]
                },
                {
                  "type": "text",
                  "text": "ui_style = @{ui_style}",
                  "font_size": 13,
                  "text_color": "#FFFFFFFF",
                  "margins": {
                    "top": 8
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
```

{% endcut %}

<!-- source: ru/_includes/index/troubleshooting.md -->
## Узнать больше {#troubleshooting}

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: [https://t.me/divkit_community_ru](https://t.me/divkit_community_ru).



[Репозиторий DivKit](https://github.com/divkit/divkit)




<!-- endsource: ru/_includes/index/troubleshooting.md -->