UI - HackMD

# Bundles ## `NodeBundle` ```rust pub struct NodeBundle { /// Describes the logical size of the node pub node: Node, /// Styles which control the layout (size and position) of the node and its children /// In some cases these styles also affect how the node drawn/painted. pub style: Style, /// The background color, which serves as a "fill" for this node pub background_color: BackgroundColor, /// The color of the Node's border pub border_color: BorderColor, /// The border radius of the node pub border_radius: BorderRadius, /// Whether this node should block interaction with lower nodes pub focus_policy: FocusPolicy, /// The transform of the node /// /// This component is automatically managed by the UI layout system. /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component. pub transform: Transform, /// The global transform of the node /// /// This component is automatically updated by the [`TransformPropagate`](`bevy_transform::TransformSystem::TransformPropagate`) systems. /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component. pub global_transform: GlobalTransform, /// Describes the visibility properties of the node pub visibility: Visibility, /// Inherited visibility of an entity. pub inherited_visibility: InheritedVisibility, /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering pub view_visibility: ViewVisibility, /// Indicates the depth at which the node should appear in the UI pub z_index: ZIndex, } ``` ## `ImageBundle` ```rust #[derive(Bundle, Debug, Default)] pub struct ImageBundle { /// Describes the logical size of the node pub node: Node, /// Styles which control the layout (size and position) of the node and its children /// In some cases these styles also affect how the node drawn/painted. pub style: Style, /// The calculated size based on the given image pub calculated_size: ContentSize, /// The image of the node. /// /// To tint the image, change the `color` field of this component. pub image: UiImage, /// The color of the background that will fill the containing node. pub background_color: BackgroundColor, /// The border radius of the node pub border_radius: BorderRadius, /// The size of the image in pixels /// /// This component is set automatically pub image_size: UiImageSize, /// Whether this node should block interaction with lower nodes pub focus_policy: FocusPolicy, /// The transform of the node /// /// This component is automatically managed by the UI layout system. /// To alter the position of the `ImageBundle`, use the properties of the [`Style`] component. pub transform: Transform, /// The global transform of the node /// /// This component is automatically updated by the [`TransformPropagate`](`bevy_transform::TransformSystem::TransformPropagate`) systems. pub global_transform: GlobalTransform, /// Describes the visibility properties of the node pub visibility: Visibility, /// Inherited visibility of an entity. pub inherited_visibility: InheritedVisibility, /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering pub view_visibility: ViewVisibility, /// Indicates the depth at which the node should appear in the UI pub z_index: ZIndex, } ``` ## `TextBundle` ```rust pub struct TextBundle { /// Describes the logical size of the node pub node: Node, /// Styles which control the layout (size and position) of the node and its children /// In some cases these styles also affect how the node drawn/painted. pub style: Style, /// Contains the text of the node pub text: Text, /// Cached cosmic buffer for layout pub buffer: CosmicBuffer, /// Text layout information pub text_layout_info: TextLayoutInfo, /// Text system flags pub text_flags: TextFlags, /// The calculated size based on the given image pub calculated_size: ContentSize, /// Whether this node should block interaction with lower nodes pub focus_policy: FocusPolicy, /// The transform of the node /// /// This component is automatically managed by the UI layout system. /// To alter the position of the `TextBundle`, use the properties of the [`Style`] component. pub transform: Transform, /// The global transform of the node /// /// This component is automatically updated by the [`TransformPropagate`](`bevy_transform::TransformSystem::TransformPropagate`) systems. pub global_transform: GlobalTransform, /// Describes the visibility properties of the node pub visibility: Visibility, /// Inherited visibility of an entity. pub inherited_visibility: InheritedVisibility, /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering pub view_visibility: ViewVisibility, /// Indicates the depth at which the node should appear in the UI pub z_index: ZIndex, /// The background color that will fill the containing node pub background_color: BackgroundColor, } ``` ## `ButtonBundle` ```rust pub struct ButtonBundle { /// Describes the logical size of the node pub node: Node, /// Marker component that signals this node is a button pub button: Button, /// Styles which control the layout (size and position) of the node and its children /// In some cases these styles also affect how the node drawn/painted. pub style: Style, /// Describes whether and how the button has been interacted with by the input pub interaction: Interaction, /// Whether this node should block interaction with lower nodes pub focus_policy: FocusPolicy, /// The color of the Node's border pub border_color: BorderColor, /// The border radius of the node pub border_radius: BorderRadius, /// The image of the node pub image: UiImage, /// The background color that will fill the containing node pub background_color: BackgroundColor, /// The transform of the node /// /// This component is automatically managed by the UI layout system. /// To alter the position of the `ButtonBundle`, use the properties of the [`Style`] component. pub transform: Transform, /// The global transform of the node /// /// This component is automatically updated by the [`TransformPropagate`](`bevy_transform::TransformSystem::TransformPropagate`) systems. pub global_transform: GlobalTransform, /// Describes the visibility properties of the node pub visibility: Visibility, /// Inherited visibility of an entity. pub inherited_visibility: InheritedVisibility, /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering pub view_visibility: ViewVisibility, /// Indicates the depth at which the node should appear in the UI pub z_index: ZIndex, } impl Default for ButtonBundle { fn default() -> Self { Self { focus_policy: FocusPolicy::Block, // everything else is Default } } } ``` ## `MaterialNodeBundle` ```rust pub struct MaterialNodeBundle<M: UiMaterial> { /// Describes the logical size of the node pub node: Node, /// Styles which control the layout (size and position) of the node and its children /// In some cases these styles also affect how the node drawn/painted. pub style: Style, /// The [`UiMaterial`] used to render the node. pub material: Handle<M>, /// Whether this node should block interaction with lower nodes pub focus_policy: FocusPolicy, /// The transform of the node /// /// This field is automatically managed by the UI layout system. /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component. pub transform: Transform, /// The global transform of the node /// /// This field is automatically managed by the UI layout system. /// To alter the position of the `NodeBundle`, use the properties of the [`Style`] component. pub global_transform: GlobalTransform, /// Describes the visibility properties of the node pub visibility: Visibility, /// Inherited visibility of an entity. pub inherited_visibility: InheritedVisibility, /// Algorithmically-computed indication of whether an entity is visible and should be extracted for rendering pub view_visibility: ViewVisibility, /// Indicates the depth at which the node should appear in the UI pub z_index: ZIndex, } ``` ## Combined Proposal 1: Conservative Port (no major reworks) (Selected) ```rust #[derive(Component)] #[require( Style, BackgroundColor, BorderColor, BorderRadius, FocusPolicy, Transform, Visibility, ZIndex )] pub struct Node; /// Consider a rename, but not necessary for this port (ex: Img) #[derive(Component)] #[require(Node, ContentSize, UiImageSize)] pub struct UiImage; /// This will be informed by: https://github.com/bevyengine/bevy/issues/14854 #[derive(Component)] #[require( Node, CosmicBuffer, TextLayoutInfo, ContentSize, TextFlags, )] pub struct Text(String); #[derive(Component)] #[require( Node, FocusPolicy(FocusPolicy::Block), Interaction, // We might be able to get away with not including this by default UiImage, )] pub struct Button; ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.