Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update UI alignment docs #10303

Merged
merged 4 commits into from
Oct 29, 2023
Merged

Update UI alignment docs #10303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fba7d58
Update documentation for ui alignment properties
CrumbsTrace Oct 29, 2023
6e06ba8
Fix some minor inconsistencies
CrumbsTrace Oct 29, 2023
49d7faa
Fix formatting
CrumbsTrace Oct 29, 2023
79d1f3f
Satisfy clippy's markdown issue
CrumbsTrace Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions crates/bevy_ui/src/layout/convert.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@ impl From<JustifyContent> for Option<taffy::style::JustifyContent> {
JustifyContent::FlexStart => taffy::style::JustifyContent::FlexStart.into(),
JustifyContent::FlexEnd => taffy::style::JustifyContent::FlexEnd.into(),
JustifyContent::Center => taffy::style::JustifyContent::Center.into(),
JustifyContent::Stretch => taffy::style::JustifyContent::Stretch.into(),
JustifyContent::SpaceBetween => taffy::style::JustifyContent::SpaceBetween.into(),
JustifyContent::SpaceAround => taffy::style::JustifyContent::SpaceAround.into(),
JustifyContent::SpaceEvenly => taffy::style::JustifyContent::SpaceEvenly.into(),
Expand Down
131 changes: 80 additions & 51 deletions crates/bevy_ui/src/ui_node.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,44 +216,50 @@ pub struct Style {
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio>
pub aspect_ratio: Option<f32>,

/// - For Flexbox containers, sets default cross-axis alignment of the child items.
/// Used to control how each individual item is aligned by default within the space they're given.
/// - For Flexbox containers, sets default cross axis alignment of the child items.
/// - For CSS Grid containers, controls block (vertical) axis alignment of children of this grid container within their grid areas.
///
/// This value is overridden if [`AlignSelf`] on the child node is set.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-items>
pub align_items: AlignItems,

/// - For Flexbox containers, this property has no effect. See `justify_content` for main-axis alignment of flex items.
/// Used to control how each individual item is aligned by default within the space they're given.
/// - For Flexbox containers, this property has no effect. See `justify_content` for main axis alignment of flex items.
/// - For CSS Grid containers, sets default inline (horizontal) axis alignment of child items within their grid areas.
///
/// This value is overridden if [`JustifySelf`] on the child node is set.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items>
pub justify_items: JustifyItems,

/// - For Flexbox items, controls cross-axis alignment of the item.
/// Used to control how the specified item is aligned within the space it's given.
/// - For Flexbox items, controls cross axis alignment of the item.
/// - For CSS Grid items, controls block (vertical) axis alignment of a grid item within its grid area.
///
/// If set to `Auto`, alignment is inherited from the value of [`AlignItems`] set on the parent node.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-self>
pub align_self: AlignSelf,

/// - For Flexbox items, this property has no effect. See `justify_content` for main-axis alignment of flex items.
/// Used to control how the specified item is aligned within the space it's given.
/// - For Flexbox items, this property has no effect. See `justify_content` for main axis alignment of flex items.
/// - For CSS Grid items, controls inline (horizontal) axis alignment of a grid item within its grid area.
///
/// If set to `Auto`, alignment is inherited from the value of [`JustifyItems`] set on the parent node.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self>
pub justify_self: JustifySelf,

/// - For Flexbox containers, controls alignment of lines if flex_wrap is set to [`FlexWrap::Wrap`] and there are multiple lines of items.
/// Used to control how items are distributed.
/// - For Flexbox containers, controls alignment of lines if `flex_wrap` is set to [`FlexWrap::Wrap`] and there are multiple lines of items.
/// - For CSS Grid containers, controls alignment of grid rows.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-content>
pub align_content: AlignContent,

/// Used to control how items are distributed.
/// - For Flexbox containers, controls alignment of items in the main axis.
/// - For CSS Grid containers, controls alignment of grid columns.
///
Expand Down Expand Up @@ -443,27 +449,31 @@ impl Default for Style {
}
}

/// How items are aligned according to the cross axis
/// Used to control how each individual item is aligned by default within the space they're given.
/// - For Flexbox containers, sets default cross axis alignment of the child items.
/// - For CSS Grid containers, controls block (vertical) axis alignment of children of this grid container within their grid areas.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-items>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum AlignItems {
/// The items are packed in their default position as if no alignment was applied.
Default,
/// Items are packed towards the start of the axis.
/// The items are packed towards the start of the axis.
Start,
/// Items are packed towards the end of the axis.
/// The items are packed towards the end of the axis.
End,
/// Items are packed towards the start of the axis, unless the flex direction is reversed;
/// The items are packed towards the start of the axis, unless the flex direction is reversed;
/// then they are packed towards the end of the axis.
FlexStart,
/// Items are packed towards the end of the axis, unless the flex direction is reversed;
/// The items are packed towards the end of the axis, unless the flex direction is reversed;
/// then they are packed towards the start of the axis.
FlexEnd,
/// Items are aligned at the center.
/// The items are packed along the center of the axis.
Center,
/// Items are aligned at the baseline.
/// The items are packed such that their baselines align.
Baseline,
/// Items are stretched across the whole cross axis.
/// The items are stretched to fill the space they're given.
Stretch,
}

Expand All @@ -477,21 +487,25 @@ impl Default for AlignItems {
}
}

/// How items are aligned according to the main axis
/// Used to control how each individual item is aligned by default within the space they're given.
/// - For Flexbox containers, this property has no effect. See `justify_content` for main axis alignment of flex items.
/// - For CSS Grid containers, sets default inline (horizontal) axis alignment of child items within their grid areas.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum JustifyItems {
/// The items are packed in their default position as if no alignment was applied.
Default,
/// Items are packed towards the start of the axis.
/// The items are packed towards the start of the axis.
Start,
/// Items are packed towards the end of the axis.
/// The items are packed towards the end of the axis.
End,
/// Items are aligned at the center.
/// The items are packed along the center of the axis
Center,
/// Items are aligned at the baseline.
/// The items are packed such that their baselines align.
Baseline,
/// Items are stretched across the whole main axis.
/// The items are stretched to fill the space they're given.
Stretch,
}

Expand All @@ -505,8 +519,11 @@ impl Default for JustifyItems {
}
}

/// How this item is aligned according to the cross axis.
/// Overrides [`AlignItems`].
/// Used to control how the specified item is aligned within the space it's given.
/// - For Flexbox items, controls cross axis alignment of the item.
/// - For CSS Grid items, controls block (vertical) axis alignment of a grid item within its grid area.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-self>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum AlignSelf {
Expand All @@ -522,11 +539,11 @@ pub enum AlignSelf {
/// This item will be aligned with the end of the axis, unless the flex direction is reversed;
/// then it will be aligned with the start of the axis.
FlexEnd,
/// This item will be aligned at the center.
/// This item will be aligned along the center of the axis.
Center,
/// This item will be aligned at the baseline.
Baseline,
/// This item will be stretched across the whole cross axis.
/// This item will be stretched to fill the container.
Stretch,
}

Expand All @@ -540,8 +557,11 @@ impl Default for AlignSelf {
}
}

/// How this item is aligned according to the main axis.
/// Overrides [`JustifyItems`].
/// Used to control how the specified item is aligned within the space it's given.
/// - For Flexbox items, this property has no effect. See `justify_content` for main axis alignment of flex items.
/// - For CSS Grid items, controls inline (horizontal) axis alignment of a grid item within its grid area.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum JustifySelf {
Expand All @@ -551,11 +571,11 @@ pub enum JustifySelf {
Start,
/// This item will be aligned with the end of the axis.
End,
/// This item will be aligned at the center.
/// This item will be aligned along the center of the axis.
Center,
/// This item will be aligned at the baseline.
Baseline,
/// This item will be stretched across the whole main axis.
/// This item will be stretched to fill the space it's given.
Stretch,
}

Expand All @@ -569,34 +589,35 @@ impl Default for JustifySelf {
}
}

/// Defines how each line is aligned within the flexbox.
/// Used to control how items are distributed.
/// - For Flexbox containers, controls alignment of lines if `flex_wrap` is set to [`FlexWrap::Wrap`] and there are multiple lines of items.
/// - For CSS Grid containers, controls alignment of grid rows.
///
/// It only applies if [`FlexWrap::Wrap`] is present and if there are multiple lines of items.
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/align-content>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum AlignContent {
/// The items are packed in their default position as if no alignment was applied.
Default,
/// Each line moves towards the start of the cross axis.
/// The items are packed towards the start of the axis.
Start,
/// Each line moves towards the end of the cross axis.
/// The items are packed towards the end of the axis.
End,
/// Each line moves towards the start of the cross axis, unless the flex direction is reversed; then the line moves towards the end of the cross axis.
/// The items are packed towards the start of the axis, unless the flex direction is reversed;
/// then the items are packed towards the end of the axis.
FlexStart,
/// Each line moves towards the end of the cross axis, unless the flex direction is reversed; then the line moves towards the start of the cross axis.
/// The items are packed towards the end of the axis, unless the flex direction is reversed;
/// then the items are packed towards the start of the axis.
FlexEnd,
/// Each line moves towards the center of the cross axis.
/// The items are packed along the center of the axis.
Center,
/// Each line will stretch to fill the remaining space.
/// The items are stretched to fill the container along the axis.
Stretch,
/// Each line fills the space it needs, putting the remaining space, if any,
/// between the lines.
/// The items are distributed such that the gap between any two items is equal.
SpaceBetween,
/// The gap between the first and last items is exactly the same as the gap between items.
/// The gaps are distributed evenly.
/// The items are distributed such that the gap between and around any two items is equal.
SpaceEvenly,
/// Each line fills the space it needs, putting the remaining space, if any,
/// around the lines.
/// The items are distributed such that the gap between and around any two items is equal, with half-size gaps on either end.
SpaceAround,
}

Expand All @@ -610,28 +631,36 @@ impl Default for AlignContent {
}
}

/// Defines how items are aligned according to the main axis
/// Used to control how items are distributed.
/// - For Flexbox containers, controls alignment of items in the main axis.
/// - For CSS Grid containers, controls alignment of grid columns.
///
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content>
#[derive(Copy, Clone, PartialEq, Eq, Debug, Serialize, Deserialize, Reflect)]
#[reflect(PartialEq, Serialize, Deserialize)]
pub enum JustifyContent {
/// The items are packed in their default position as if no alignment was applied.
Default,
/// Items are packed toward the start of the axis.
/// The items are packed towards the start of the axis.
Start,
/// Items are packed toward the end of the axis.
/// The items are packed towards the end of the axis.
End,
/// Pushed towards the start, unless the flex direction is reversed; then pushed towards the end.
/// The items are packed towards the start of the axis, unless the flex direction is reversed;
/// then the items are packed towards the end of the axis.
FlexStart,
/// Pushed towards the end, unless the flex direction is reversed; then pushed towards the start.
/// The items are packed towards the end of the axis, unless the flex direction is reversed;
/// then the items are packed towards the start of the axis.
FlexEnd,
/// Centered along the main axis.
/// The items are packed along the center of the axis.
Center,
/// Remaining space is distributed between the items.
/// The items are stretched to fill the container along the axis.
Stretch,
/// The items are distributed such that the gap between any two items is equal.
SpaceBetween,
/// Remaining space is distributed around the items.
SpaceAround,
/// Like [`JustifyContent::SpaceAround`] but with even spacing between items.
/// The items are distributed such that the gap between and around any two items is equal.
SpaceEvenly,
/// The items are distributed such that the gap between and around any two items is equal, with half-size gaps on either end.
SpaceAround,
}

impl JustifyContent {
Expand Down