Document how padding and margin behave with percentage values (#7785)

# Objective

Add a comment explaining that percentage padding is calculated based on the width of the parent node.
This commit is contained in:
ickshonpe 2023-02-25 16:38:03 +00:00
parent af4b95c4e8
commit f420c518c0

View File

@ -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,