Эффект Liquid Glass

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

{
  "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 и новее. На более ранних версиях элемент отрисовывается без эффекта, лэйаут при этом не меняется.

Параметры

Параметры

Описание

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. Опциональный параметр. Эффект сам определяет стиль оформления по контенту под собой, поэтому этот стиль может отличаться от стиля карточки. Используйте переменную, чтобы подобрать под него цвет контента поверх стекла.

Особенности работы

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

Подключение

DivKitComponents(
  ...
  extensionHandlers: [
    LiquidGlassExtensionHandler()
  ]
)

Пример

Карточка с несколькими вариантами эффекта
{
  "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
                  }
                }
              ]
            }
          ]
        }
      }
    ]
  }
}

Узнать больше

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

Репозиторий DivKit

Предыдущая
Эффект размытия
Следующая
Эффекты фона