Skip to content

Commit

Permalink
Document how padding and margin behave with percentage values (be…
Browse files Browse the repository at this point in the history
…vyengine#7785)

# Objective

Add a comment explaining that percentage padding is calculated based on the width of the parent node.
  • Loading branch information
ickshonpe authored and Shfty committed Mar 19, 2023
1 parent 5f41317 commit ed7b3b6
Showing 1 changed file with 36 additions and 2 deletions.
38 changes: 36 additions & 2 deletions crates/bevy_ui/src/ui_node.rs
Original file line number Diff line number Diff line change
Expand Up @@ -237,9 +237,43 @@ pub struct Style {
pub justify_content: JustifyContent,
/// The position of the node as described by its Rect
pub position: UiRect,
/// The margin of the node
/// The amount of space around a node outside its border.
///
/// If a percentage value is used, the percentage is calculated based on the width of the parent node.
///
/// # Example
/// ```
/// # use bevy_ui::{Style, UiRect, Val};
/// let style = Style {
/// margin: UiRect {
/// left: Val::Percent(10.),
/// right: Val::Percent(10.),
/// top: Val::Percent(15.),
/// bottom: Val::Percent(15.)
/// },
/// ..Default::default()
/// };
/// ```
/// A node with this style and a parent with dimensions of 100px by 300px, will have calculated margins of 10px on both left and right edges, and 15px on both top and bottom egdes.
pub margin: UiRect,
/// The padding of the node
/// The amount of space between the edges of a node and its contents.
///
/// If a percentage value is used, the percentage is calculated based on the width of the parent node.
///
/// # Example
/// ```
/// # use bevy_ui::{Style, UiRect, Val};
/// let style = Style {
/// padding: UiRect {
/// left: Val::Percent(1.),
/// right: Val::Percent(2.),
/// top: Val::Percent(3.),
/// bottom: Val::Percent(4.)
/// },
/// ..Default::default()
/// };
/// ```
/// A node with this style and a parent with dimensions of 300px by 100px, will have calculated padding of 3px on the left, 6px on the right, 9px on the top and 12px on the bottom.
pub padding: UiRect,
/// The border of the node
pub border: UiRect,
Expand Down

0 comments on commit ed7b3b6

Please sign in to comment.