> ## Documentation Index
> Fetch the complete documentation index at: https://ziva.zeleza.ru/llms.txt
> Use this file to discover all available pages before exploring further.

# Стили и макет

> Как переопределять стили Ziva и интегрировать собственные элементы оформления

# Стили и макет Ziva

Интерфейс формируется с помощью Lip Gloss. Библиотека экспортирует готовые стили, которые можно использовать как есть или модифицировать.

## Готовые стили

```go theme={null}
ziva.ErrorStatusStyle
ziva.CancelStyle
ziva.SelectionStyle
ziva.ActiveTitleStyle
ziva.SuccessLabelStyle
```

Каждый — это объект `lipgloss.Style`. Его можно клонировать и изменить под свои нужды:

```go theme={null}
customSelection := ziva.SelectionStyle.Copy().Foreground(lipgloss.Color("#22D3EE"))
```

Используйте новые стили в собственных компонентах (например, в кастомных `FuncTask` или дополнительном выводе после очереди).

## Настройка заголовка

```go theme={null}
queue := ziva.NewQueue("Профили")
queue.WithAppName("Provisioning CLI")
queue.WithAppNameColor(ziva.CyanBright, true)
queue.WithTitleColor(lipgloss.Color("#FDE68A"), true)
```

## Управление шириной

`ziva.CalculateLayoutWidth()` помогает подобрать ширину вывода, чтобы контент выглядел аккуратно на разных размерах терминала.

```go theme={null}
width := ziva.CalculateLayoutWidth(terminalWidth)
fmt.Println("Рекомендуемая ширина:", width)
```

<Info>
  Для расчёта `terminalWidth` можно использовать `lipgloss.Width()` или `github.com/muesli/termenv`. Если ширина неизвестна, Ziva использует значение по умолчанию.
</Info>

## Дополнительные подсказки

* **Используйте единый стиль для списков.** Подсказки в `SingleSelectTask` и `MultiSelectTask` проще читать, если продолжать одну цветовую схему.
* **Учитывайте переносы строк.** Если нужно вывести длинное сообщение об ошибке, используйте `task.WithNewLinesInErrors(true)` на задачах, где доступен этот метод (через базовый интерфейс).
* **Локализуйте текст.** Подписи берите из собственных словарей, а не меняйте стили ради перевода.
* **Тестируйте на узких терминалах.** Viewport в списковых задачах помогает избежать «ломающегося» интерфейса.

## Создание собственных элементов

Вы можете добавить дополнительный вывод до или после `queue.Run()` с использованием тех же стилей:

```go theme={null}
banner := ziva.ActiveTitleStyle.Copy().
    Margin(1, 0).
    Padding(0, 2).
    Render("⚙ Настройка инфраструктуры")

fmt.Println(banner)
```

## Полезные ссылки

* [Документация Lip Gloss](https://github.com/charmbracelet/lipgloss)
* [Цветовые схемы](/ru/customization/colors)
* [Режимы для встроенных систем](/ru/customization/embedded-systems)