You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/basics/user-interface/styling/container-queries.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,15 +5,15 @@ title: Container Queries
5
5
6
6
# Container Queries <MinVersionversion="11.3" />
7
7
8
-
Container Queries allows styles to be activated for control based on the size of an ancestor, which acts as a container.
8
+
Container Queries allow styles to be activated for a control based on the size of an ancestor, which acts as a container.
9
9
10
10
:::tip
11
-
Avalonia's Container Queries are similar to CSS's Container Queries, with a more limited functionality to suit platforms and form factors Avalonia supports. They can also behave like media queries if the Toplevel is set as a container.
11
+
Avalonia's Container Queries are similar to CSS's Container Queries, with a more limited functionality to suit the platforms and form factors Avalonia supports. They can also behave like media queries if the Toplevel is set as a container.
12
12
:::
13
13
14
14
## How It Works
15
15
16
-
Container queries rely on there being an ancestor control being set as a container. Changes to the size of the container activate styles based on queries. Those queries can check either the width or height of the container, or both. Any control can be a container, but a control set as a container can not be affected by styles hosted by a container query linked to it. When a query is activated, all styles hosted in the query will also be activated based on their selectors.
16
+
Container queries rely on an ancestor control being set as a container. Changes to the size of the container activate styles based on queries. Those queries can check either the width or height of the container, or both. Any control can be a container, but a control set as a container can not be affected by styles hosted by a container query linked to it. When a query is activated, all styles hosted in the query will also be activated based on their selectors.
17
17
18
18
## How To Use Queries
19
19
@@ -65,7 +65,7 @@ They can also be part of a `ControlTheme`'s styles:
65
65
The `Name` property defines the name of the container it will attach to. This isn't a unique identifier, and multiple container queries can use the same name.
66
66
The `Query` defines the rules to activate the containing size. See [Queries](#queries) below.
67
67
68
-
This make them quite easy to use in themes targeting difference screen sizes, or themes thathave different forms depending on the space available in its parent. This comes with a few restrictions.
68
+
This makes them quite easy to use in themes targeting different screen sizes, or themes that have different forms depending on the space available in its parent. This comes with a few restrictions.
69
69
1. Container Queries can't be hosted in a `Style` element.
70
70
The following is invalid.
71
71
```xml
@@ -97,14 +97,14 @@ Container queries only work if a control that's a descendant of the `ContainerQu
97
97
98
98
`Container.Name` defines the name of the container. It isn't unique to that container, and multiple controls in the same scope can have the same container name, and they will all be affected by the same container queries.
99
99
100
-
`Container.Sizing` defines the sizing strategy of the container for queries. The container's final size depends on the value. Its an enum with the following values:
100
+
`Container.Sizing` defines the sizing strategy of the container for queries. The container's final size depends on the value. It's an enum with the following values:
101
101
102
102
*`Normal`: The container's size isn't queried. This is the default value. The control follows normal measurement and arrangement.
103
103
*`Width`: The container's width is queried. The container will use the maximum width allowed by its parent, and that value is used in all related container queries. In most cases, the final width is the max width allowed.
104
104
*`Height`: Same as `Width`, but only the container's height is queried.
105
105
*`WidthAndHeight`: Both width and height of the container is queried.
106
106
107
-
Depending on the sizing stratedy, the container will use the maximum avialable size as its desired size.
107
+
Depending on the sizing strategy, the container will use the maximum available size as its desired size.
108
108
109
109
### Queries
110
110
The following queries are available.
@@ -140,7 +140,7 @@ The following is an example of using multiple container queries with different q
140
140
</Style>
141
141
</ContainerQuery>
142
142
```
143
-
Multiple queries can be combine with `,` for OR combination, or `and` for AND combination.
143
+
Multiple queries can be combined with `,` for OR combination, or `and` for AND combination.
0 commit comments