diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md b/i18n/ru/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md new file mode 100644 index 000000000..6806acf1b --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/basics/user-interface/styling/container-queries.md @@ -0,0 +1,162 @@ +--- +id: container-queries +title: Контейнерные запросы +--- + +# Контейнерные запросы + +Контейнерные запросы позволяют активировать стили для элемента управления на основе размера предка, который выступает в роли контейнера. + +:::tip +Контейнерные запросы Avalonia похожи на контейнерные запросы CSS, но с более ограниченной функциональностью, подходящей для платформ и форм-факторов, поддерживаемых Avalonia. Они также могут вести себя как медиа-запросы, если Toplevel установлен как контейнер. +::: + +## Как это работает + +Контейнерные запросы основываются на том, что элемент управления-предок установлен как контейнер. Изменения размера контейнера активируют стили на основе запросов. Эти запросы могут проверять ширину или высоту контейнера, или и то, и другое. Любой элемент управления может быть контейнером, но элемент управления, установленный как контейнер, не может быть затронут стилями, размещенными в контейнерном запросе, связанном с ним. Когда запрос активируется, все стили, размещенные в запросе, также будут активированы на основе их селекторов. + +## Как использовать запросы + +### Объявление контейнерных запросов +Контейнерные запросы могут быть определены в XAML как прямой дочерний элемент свойства `Styles` элемента управления, следующим образом: + +```xml + + + + + + + +``` + +Они также могут быть частью стилей `ControlTheme`: + +```xml + + ... + + + + + ... + + + + + + + + + + +``` +Свойство `Name` определяет имя контейнера, к которому будет привязан запрос. Это не уникальный идентификатор, и несколько контейнерных запросов могут использовать одно и то же имя. +Свойство `Query` определяет правила для активации размера контейнера. См. [Запросы](#queries) ниже. + +Это делает их довольно простыми в использовании в темах, ориентированных на разные размеры экрана, или в темах, которые имеют разные формы в зависимости от доступного пространства в родительском элементе. Это сопровождается несколькими ограничениями. +1. Контейнерные запросы не могут быть размещены в элементе `Style`. + Следующее является недопустимым. +```xml + + + + + + + +``` +2. Стили, объявленные в запросах, не могут влиять на контейнер или его предков. Это отличается от обычных `Styles`, которые могут влиять на родительский элемент управления. Поскольку контейнерные запросы зависят от фактического размера контейнера, если контейнер будет затронут стилями, активированными его запросами, это может вызвать циклическое поведение, когда размер контейнера постоянно обновляется двумя или более запросами. + +### Объявление контейнеров +Контейнерные запросы работают только если элемент управления, являющийся потомком хоста `ContainerQuery`, объявлен как контейнер. Установка прикрепленных свойств `Container.Name` и `Container.Sizing` для любого элемента управления объявит этот элемент как контейнер, например так: + +```xml + // highlight-end ``` -

Ellipse Button

+

Эллиптическая кнопка

-## Interaction in Control Themes +## Взаимодействие в темах элементов управления -Like standard styles, control themes support [nested styles](../styling/styles.md#nesting-styles) which can be used to add interactions such as pointer-over and pressed states. +Как и стандартные стили, темы элементов управления поддерживают [вложенные стили](../styling/styles.md#nesting-styles), которые можно использовать для добавления взаимодействий, таких как состояния при наведении указателя и нажатии. -## Example: Round Button Hover State +## Пример: состояние наведения для круглой кнопки -Using nested styles we can make our button change color when the pointer is hovered over it: +Используя вложенные стили, мы можем сделать так, чтобы наша кнопка меняла цвет при наведении на неё указателя: ```xml title="App.axaml" ``` -## Control Theme Lookup +## Поиск темы элемента управления -There a two ways in which a control theme can be found: +Существует два способа, которыми может быть найдена тема элемента управления: -- If the control's `Theme` property is set, then that control theme will be used; otherwise -- Avalonia will search the upwards through the logical tree for a `ControlTheme` resource with an `x:Key` which matches the control's [style key](styles#style-key) +- Если свойство `Theme` элемента управления установлено, то будет использована эта тема элемента управления; в противном случае +- Avalonia будет искать вверх по логическому дереву ресурс `ControlTheme` с `x:Key`, соответствующим [ключу стиля](styles#style-key) элемента управления :::tip -If you're having trouble getting Avalonia to find your theme, make sure it's returning a [style key](styles#style-key) which matches the `x:Key` and `TargetType` of your control theme +Если у вас возникают проблемы с поиском вашей темы в Avalonia, убедитесь, что она возвращает [ключ стиля](styles#style-key), соответствующий `x:Key` и `TargetType` вашей темы элемента управления ::: -In effect this means that you have two choices for how to define your control theme: +По сути это означает, что у вас есть два варианта определения темы элемента управления: -- **If you want the control theme to apply to all instances of the control** then use an `{x:Type}` as the resource key. For example +- **Если вы хотите, чтобы тема элемента управления применялась ко всем экземплярам элемента управления**, используйте `{x:Type}` в качестве ключа ресурса. Например, `` -- **If you want the control theme to be applied to selected instances of the control** then use anything else as the resource key and look up this resource using `{StaticResource}`. Commonly this key will be a `string` +- **Если вы хотите, чтобы тема элемента управления применялась к выбранным экземплярам элемента управления**, используйте что-то другое в качестве ключа ресурса и ищите этот ресурс с помощью `{StaticResource}`. Обычно этот ключ будет `string` :::info -Notice that this means that only a single control theme can be applied to a control at any one time. +Обратите внимание, что это означает, что к элементу управления в любой момент времени может быть применена только одна тема элемента управления. ::: -## Example: Make all the Buttons Round +## Пример: сделать все кнопки круглыми -We can apply our new control theme to all of the buttons in the application by simply changing the `x:Key` of the control theme to match the `Button` type. +Мы можем применить нашу новую тему элемента управления ко всем кнопкам в приложении, просто изменив `x:Key` темы элемента управления, чтобы он соответствовал типу `Button`. ```xml title="App.axaml" ``` -## Pseudo Classes +## Псевдоклассы -Like in CSS, controls can have pseudo classes; these are classes that are defined in the control itself rather than by the user. The names of pseudo classes in a selector always start with a colon. +Как и в CSS, элементы управления могут иметь псевдоклассы; это классы, которые определены в самом элементе управления, а не пользователем. Имена псевдоклассов в селекторе всегда начинаются с двоеточия. -For example `:pointerover` pseudo class indicates that the pointer input is currently over (inside the bounds of) a control. (This is pseudo class is the similar to `:hover` in CSS.) +Например, псевдокласс `:pointerover` указывает, что указатель ввода в настоящее время находится над элементом управления (внутри его границ). (Этот псевдокласс аналогичен `:hover` в CSS.) -This is an example of a `:pointerover` pseudo class selector: +Вот пример селектора псевдокласса `:pointerover`: ```xml @@ -29,12 +29,12 @@ This is an example of a `:pointerover` pseudo class selector: - I will have red background when hovered. + У меня будет красный фон при наведении. ``` -In this example, the pseudo class selector changes properties inside a control template: +В этом примере селектор псевдокласса изменяет свойства внутри шаблона элемента управления: ```xml @@ -43,27 +43,27 @@ In this example, the pseudo class selector changes properties inside a control t - + ``` -Other pseudo classes include `:focus`, `:disabled`, `:pressed` for buttons, and `:checked` for checkboxes. +Другие псевдоклассы включают `:focus`, `:disabled`, `:pressed` для кнопок и `:checked` для флажков. :::info -For more detail about pseudo classes, see the reference [here](../../../reference/styles/pseudo-classes.md). +Для получения более подробной информации о псевдоклассах см. справочник [здесь](../../../reference/styles/pseudo-classes.md). ::: -## Conditional Classes +## Условные классы -If you need to add or remove a class using a bound condition, then you can use following special syntax: +Если вам нужно добавить или удалить класс, используя привязанное условие, вы можете использовать следующий специальный синтаксис: ```xml