diff --git a/src/SUMMARY.md b/src/SUMMARY.md index cb396f3..b6114fa 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -32,24 +32,24 @@ - [Makepad-Plugin](./gen/makepad/plugin.md) - [Dev Manual](./gen/makepad/dev/manual/index.md) - [Enum](./gen/makepad/dev/manual/enum.md) - - [BuiltIn-UI Lib](./gen/makepad/ui_lib.md) - - [Origins](./gen/makepad/origin/origin.md) - - [Root](./gen/makepad/origin/root.md) - - [Window](./gen/makepad/origin/window.md) - - [View](./gen/makepad/origin/view.md) - - [Label](./gen/makepad/origin/label.md) - - [Components](./gen/makepad/components.md) - - [Label](./gen/makepad/components/label.md) - - [Link](./gen/makepad/components/link.md) - - [Card](./gen/makepad/components/card.md) - - [VLayout](./gen/makepad/components/v_layout.md) - - [HLayout](./gen/makepad/components/h_layout.md) - - [Button](./gen/makepad/components/button.md) - - [Radio](./gen/makepad/components/radio.md) - - [CheckBox](./gen/makepad/components/checkbox.md) - - [Icon](./gen/makepad/components/icon.md) - - [Image](./gen/makepad/components/image.md) - - [Input](./gen/makepad/components/input.md) + - [BuiltIn-UI Lib](./gen/builtin/getting_start.md) + - [Install](./gen/builtin/install.md) + - [QuickStart](./gen/builtin/qs.md) + - [System Font](./gen/builtin/font.md) + - [Theme Color](./gen/builtin/theme.md) + - [Basic]() + - [Label](./gen/builtin/basic/label.md) + - [View](./gen/builtin/basic/view.md) + - [Button](./gen/builtin/basic/button.md) + - [Svg](./gen/builtin/basic/svg.md) + - [Image](./gen/builtin/basic/image.md) + - [Icon](./gen/builtin/basic/icon.md) + - [Divider](./gen/builtin/basic/divider.md) + - [Link](./gen/builtin/basic/link.md) + - [Scroll](./gen/builtin/basic/scroll.md) + - [Form]() + - [Radio](./gen/builtin/form/radio.md) + - [CheckBox](./gen/builtin/form/checkbox.md) - [Test-Plan](./gen/tests/test.md) - [Static](./gen/tests/static.md) - [Color](./gen/tests/color.md) diff --git a/src/gen/builtin/basic/button.md b/src/gen/builtin/basic/button.md new file mode 100644 index 0000000..d016eb9 --- /dev/null +++ b/src/gen/builtin/basic/button.md @@ -0,0 +1,65 @@ +# GButton Component + +The `GButton` component is a customizable button designed for interactive UI elements. It supports hover, focus, and click animations, with various configurable properties for appearance, including background color, shadow, and border styles. + +## Animation + +This component supports animations, particularly for hover and focus states. The default hover and focus animations are defined using the `animator` field: + +- **hover.off**: + - `draw_button.hover`: changes to `0.0` + - `draw_button.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.on**: + - `draw_button.hover`: changes to `1.0` + - `draw_button.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.focus**: + - `draw_button.hover`: changes to `0.0` + - `draw_button.focus`: changes to `1.0` + - Animation transition: uses `Forward` with a duration of `0.25s` + +## Event + +The `GButton` component supports the following events: + +- **HoverIn**: Triggered when the mouse hovers over the button. +- **HoverOut**: Triggered when the mouse leaves the button. +- **Clicked**: Triggered when the button is clicked. +- **Focus**: Triggered when the button receives focus (e.g., via a keyboard event). +- **FocusLost**: Triggered when the button loses focus. + +These events can be customized to trigger additional behaviors based on user interactions. + +## Props + +| macro | prop | description | type | default | +|--------|--------------------|-------------------------------------------|------------------|-----------| +| live | theme | Theme of the button | `Themes` | | +| live | background_color | Background color of the button | `Option` | `None` | +| live | background_visible | Visibility of the background | `bool` | `true` | +| live | hover_color | Color of the button when hovered | `Option` | `None` | +| live | focus_color | Color of the button when focused | `Option` | `None` | +| live | shadow_color | Color of the shadow | `Option` | `None` | +| live | spread_radius | Spread radius of the shadow | `f32` | `0.0` | +| live | blur_radius | Blur radius of the shadow | `f32` | `4.8` | +| live | shadow_offset | Offset of the shadow | `Vec2` | | +| live | border_color | Color of the border | `Option` | `None` | +| live | border_width | Width of the border | `f32` | `0.0` | +| live | border_radius | Radius of the border's corners | `f32` | `2.0` | +| live | cursor | Mouse cursor when hovering over the button| `Option`| | +| live | visible | Whether the button is visible | `bool` | `true` | +| live | grab_key_focus | Whether the button grabs keyboard focus | `bool` | `true` | +| animator | animator | Animation controller for the button | `Animator` | | +| walk | `abs_pos` | Absolute position for layout | `Option` | `None` | +| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` | +| walk | `width` | Width of the view | `Size` | `Size::default()` | +| walk | `height` | Height of the view | `Size` | `Size::default()` | +| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` | +| layout | `clip_x` | Clip content horizontally | `bool` | `true` | +| layout | `clip_y` | Clip content vertically | `bool` | `true` | +| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` | +| layout | `align` | Alignment for content | `Align` | `Align::default()` | +| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` | +| layout | `spacing` | Spacing between elements | `f64` | `0.0` | + diff --git a/src/gen/builtin/basic/divider.md b/src/gen/builtin/basic/divider.md new file mode 100644 index 0000000..d29c013 --- /dev/null +++ b/src/gen/builtin/basic/divider.md @@ -0,0 +1,16 @@ +# GDivider component +The `GDivider` component is used to create a simple dividing line between other UI elements. It can be horizontal or vertical based on the `direction` property. + +## Animation +The `GDivider` inherits animation properties from `GView`, but typically, animations are not the primary focus for dividers. Instead, animations should be handled within inner components. + +## Event +The `GDivider` inherits event handling from `GView`. However, since it functions mainly as a visual separator, its event handling is generally minimal. + +## Props +|macro |prop |description |type |default| +|------|---------------|--------------------------------------|-------------|-------| +|live |direction |Divider direction: horizontal (1.0) or vertical (0.0)|f32 |1.0| +|live |stroke_width |The width of the divider's stroke |f32 |1.4 | + +> Other Props see: [GView](./view.md) diff --git a/src/gen/builtin/basic/icon.md b/src/gen/builtin/basic/icon.md new file mode 100644 index 0000000..a38cbda --- /dev/null +++ b/src/gen/builtin/basic/icon.md @@ -0,0 +1,61 @@ +# GIcon component +The `GIcon` component is a customizable graphical icon with support for animations, events, and various properties to control its appearance and behavior. + +## Animation +The `GIcon` component provides built-in animations for hover and focus effects. These animations transition smoothly between states based on user interactions. + +- `hover`: + - **off**: Transitions to a state where the `hover` effect is disabled across all icons. + - **on**: Applies a `hover` effect to the icons, transitioning them to a highlighted state. + - **focus**: Applies a `focus` effect, transitioning the icons into focus mode. + +## Event +The `GIcon` component supports various interaction events, enabling developers to listen and respond to user actions. + +- `HoverIn(GIconHoverParam)`: Triggered when the icon is hovered over. +- `HoverOut(GIconHoverParam)`: Triggered when the hover effect is lost. +- `Focus(GIconFocusParam)`: Triggered when the icon gains focus. +- `Clicked(GIconClickedParam)`: Triggered when the icon is clicked. +- `FocusLost(GIconFocusLostParam)`: Triggered when the icon loses focus. + +## Props + +| macro | prop | description | type | default | +|--------|--------------------|---------------------------------------------------------|--------------------|---------| +| live | theme | Themes for styling the component | `Themes` | - | +| live | color | Icon color | `Option` | `None` | +| live | stroke_hover_color | Stroke color on hover | `Option` | `None` | +| live | stroke_focus_color | Stroke color on focus | `Option` | `None` | +| live | stroke_width | Stroke width | `f32` | `1.0` | +| live | cursor | Icon cursor style | `Option`| `None` | +| live | visible | Controls visibility of the icon | `bool` | `true` | +| live | grab_key_focus | Determines if the icon grabs key focus | `bool` | `true` | +| live | animation_key | Animation key control | `bool` | `false` | +| animator | animator | Manages icon animations | `Animator` | - | +| redraw | draw_icon | Handles redrawing the icon | `DrawQuad` | - | +| walk | `abs_pos` | Absolute position for layout | `Option` | `None` | +| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` | +| walk | `width` | Width of the view | `Size` | `Size::default()` | +| walk | `height` | Height of the view | `Size` | `Size::default()` | +| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` | +| layout | `clip_x` | Clip content horizontally | `bool` | `true` | +| layout | `clip_y` | Clip content vertically | `bool` | `true` | +| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` | +| layout | `align` | Alignment for content | `Align` | `Align::default()` | +| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` | +| layout | `spacing` | Spacing between elements | `f64` | `0.0` | +| live | icon_base | Base icon drawable | `Option`| `None` | +| live | icon_arrow | Arrow icon drawable | `Option`| `None` | +| live | icon_code | Code icon drawable | `Option` | `None` | +| live | icon_emoji | Emoji icon drawable | `Option`| `None` | +| live | icon_fs | File system icon drawable | `Option` | `None` | +| live | icon_ui | UI icon drawable | `Option` | `None` | +| live | icon_person | Person icon drawable | `Option`| `None` | +| live | icon_relation | Relation icon drawable | `Option`| `None` | +| live | icon_state | State icon drawable | `Option`| `None` | +| live | icon_time | Time icon drawable | `Option`| `None` | +| live | icon_tool | Tool icon drawable | `Option`| `None` | +| rust | draw_type | Controls the type of icon being drawn | `Option`| `None` | +| live | icon_type | Specifies the type of icon | `IconType` | - | +| live | event_key | Event key control | `bool` | `true` | +| rust | scope_path | Path to scope the icon | `Option`| `None` | diff --git a/src/gen/builtin/basic/image.md b/src/gen/builtin/basic/image.md new file mode 100644 index 0000000..894fd7a --- /dev/null +++ b/src/gen/builtin/basic/image.md @@ -0,0 +1,39 @@ +# GImage Component +The `GImage` component handles scalable images with adjustable rotation, scaling, and visibility, supporting event triggers such as hovering and clicking. + +## Animation +No animation is available for the `GImage` component. + +## Event +The `GImage` component can trigger various events in response to user interactions: +- `HoverIn(GImageHoverParam)`: Triggered when the mouse pointer enters the image area. +- `HoverOut(GImageHoverParam)`: Triggered when the mouse pointer leaves the image area. +- `Clicked(GImageClickedParam)`: Triggered when the image is clicked. + +## Props +|macro |prop |description |type |default | +|--------|-----------------|-------------------------------|-------------------|--------| +|live |visible |Visibility of the component |bool |true | +|live |grab_key_focus |Enable key focus grabbing |bool |true | +|live |opacity |Opacity level |f32 |1.0 | +|live |cursor |Mouse cursor when hovered |Option|None | +|live |scale |Scaling factor |f64 |1.0 | +|live |fit |Image fit type |ImageFit | | +|live |min_width |Minimum width of the image |i64 |16 | +|live |min_height |Minimum height of the image |i64 |16 | +|live |rotation |Rotation angle in radians |f32 |0.0 | +| walk | `abs_pos` | Absolute position for layout | `Option` | `None` | +| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` | +| walk | `width` | Width of the view | `Size` | `Size::default()` | +| walk | `height` | Height of the view | `Size` | `Size::default()` | +| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` | +| layout | `clip_x` | Clip content horizontally | `bool` | `true` | +| layout | `clip_y` | Clip content vertically | `bool` | `true` | +| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` | +| layout | `align` | Alignment for content | `Align` | `Align::default()` | +| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` | +| layout | `spacing` | Spacing between elements | `f64` | `0.0` | +|live |draw_image |The image drawing object |DrawGView | | +|live |src |Image source dependency |LiveDependency | | +|live |texture |Texture object |Option |None | +|live |event_key |Trigger events when true |bool |true | \ No newline at end of file diff --git a/src/gen/builtin/basic/label.md b/src/gen/builtin/basic/label.md new file mode 100644 index 0000000..4ff9f21 --- /dev/null +++ b/src/gen/builtin/basic/label.md @@ -0,0 +1,53 @@ +# GLabel component +The `GLabel` component is a customizable label widget with animation and event handling features. It allows for hover, focus, and text styling through various properties, animations, and events. + +## Animation +The `GLabel` component comes with built-in animations for hover and focus states. The following animations are provided: + +- **hover.off**: + - `draw_text.hover`: changes to `0.0` + - `draw_text.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.on**: + - `draw_text.hover`: changes to `1.0` + - `draw_text.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.focus**: + - `draw_text.hover`: changes to `0.0` + - `draw_text.focus`: changes to `1.0` + - Animation transition: uses `Forward` with a duration of `0.25s` + +Animations are controlled by the `Animator` property, which defines the behavior for transitions between hover and focus states. + +## Event +The `GLabel` component supports the following events: +- `HoverIn`: Triggered when a user hovers over the label. +- `HoverOut`: Triggered when the user moves the cursor away from the label. +- `Focus`: Triggered when the label is clicked or focused. +- `FocusLost`: Triggered when the label loses focus. + +These events allow interaction with the label and can be used to trigger actions or further animations in response to user input. + +## Props +| Macro | Prop | Description | Type | Default | +|---------|---------------------|--------------------------------------------------|-----------------|-------------| +| live | stroke_hover_color | The color of the text stroke when hovered | `Option` | `None` | +| live | stroke_focus_color | The color of the text stroke when focused | `Option` | `None` | +| live | color | The base color of the text | `Option` | `None` | +| live | font_size | The font size of the label text | `f64` | `9.0` | +| live | cursor | The cursor type when hovering over the label | `Option` | `None` | +| live | line_spacing | The line spacing between the label text | `f64` | `1.5` | +| live | height_factor | Factor controlling the height of the text | `f64` | `0.0` | +| live | wrap | Text wrapping behavior | `TextWrap` | `TextWrap::Word` | +| live | font_family | The font family used for the label | `LiveDependency` | N/A | +| live | visible | Whether the label is visible | `bool` | `true` | +| redraw | draw_text | Controls the drawing of the label's text | `DrawGText` | N/A | +| walk | walk | Defines the positioning of the label | `Walk` | N/A | +| live | align | Text alignment | `Align` | N/A | +| live | padding | The padding around the label | `Padding` | N/A | +| live | text | The text content of the label | `ArcStringMut` | N/A | +| animator| animator | Handles animation states for hover and focus | `Animator` | N/A | +| rust | area | Represents the area occupied by the label | `Area` | N/A | +| live | event_key | Controls the event triggering behavior | `bool` | `false` | +| live | grab_key_focus | Whether the label grabs keyboard focus | `bool` | `true` | +| rust | scope_path | The path scope for the label | `Option` | N/A | diff --git a/src/gen/builtin/basic/link.md b/src/gen/builtin/basic/link.md new file mode 100644 index 0000000..99a06eb --- /dev/null +++ b/src/gen/builtin/basic/link.md @@ -0,0 +1,64 @@ +# GLink component +A GLink component is used to create interactive, styled links with hover, focus, and click events. +It supports animations and various customizable properties like color, text, and visibility. + +## Animation +The GLink component supports hover and focus animations, transitioning between different visual states. +- **hover.off**: + - `draw_link.hover`: 0.0 and `draw_text.hover`: 0.0 + - `draw_link.focus`: 0.0 and `draw_text.focus`: 0.0 + - Animation transition: uses Forward with a duration of 0.25s +- **hover.on**: + - `draw_link.hover`: 1.0 and `draw_text.hover`: 1.0 + - `draw_link.focus`: 0.0 and `draw_text.focus`: 0.0 + - Animation transition: uses Forward with a duration of 0.25s +- **hover.focus**: + - `draw_link.hover`: 1.0 and `draw_text.hover`: 1.0 + - `draw_link.focus`: 1.0 and `draw_text.focus`: 1.0 + - Animation transition: uses Forward with a duration of 0.25s +## Event +GLink handles several user events such as hover and clicks. +- `HoverIn`: Triggered when the mouse starts hovering over the link. +- `HoverOut`: Triggered when the mouse stops hovering over the link. +- `Clicked`: Triggered when the link is clicked. +- `Focus`: Triggered when the link receives focus. +- `FocusLost`: Triggered when the link loses focus. + +## Props +|macro |prop |description |type |default | +|-------|------------------------|--------------------------------------------|------------------|-----------------------| +|live |theme | Theme of the link |`Themes` |`None` | +|live |background_color | Background color |`Option` |`None` | +|live |hover_color | Hover background color |`Option` |`None` | +|live |focus_color | Focus background color |`Option` |`None` | +|live |border_color | Border color |`Option` |`None` | +|live |underline_visible | Show underline when visible |`bool` |`true` | +|live |underline_color | Underline color |`Option` |`None` | +|live |underline_hover_color | Underline color when hovering |`Option` |`None` | +|live |underline_focus_color | Underline color when focused |`Option` |`None` | +|live |underline_width | Width of the underline |`f32` |`1.0` | +|live |border_radius | Border radius for rounding corners |`f32` |`4.0` | +|live |round | Make the link round |`bool` |`false` | +|live |background_visible | Toggle visibility of the background |`bool` |`false` | +|live |text | The text content of the link |`ArcStringMut` |`""` | +|live |font_size | Size of the font |`f64` |`10.0` | +|live |color | Text color |`Option` |`None` | +|live |text_hover_color | Text color when hovered |`Option` |`None` | +|live |text_focus_color | Text color when focused |`Option` |`None` | +|live |font_family | Font family for the text |`LiveDependency` |`None` | +|live |cursor | Cursor style when hovering over the link |`Option` |`None` | +|live |href | The URL for the link |`Option` |`None` | +|live |link_type | Type of link (internal, external, etc.) |`LinkType` |`None` | +|live |visible | Visibility of the link |`bool` |`true` | +|live |draw_text | Draw settings for text |`DrawGText` |`None` | +|walk |abs_pos | Absolute position for layout |`Option` |`None` | +|walk |margin | Margin size around the view |`Margin` |`Margin::default()` | +|walk |width | Width of the view |`Size` |`Size::default()` | +|walk |height | Height of the view |`Size` |`Size::default()` | +|layout |scroll | Scroll position for layout |`DVec2` |`(0.0, 0.0)` | +|layout |clip_x | Clip content horizontally |`bool` |`true` | +|layout |clip_y | Clip content vertically |`bool` |`true` | +|layout |padding | Padding within the view |`Padding` |`Padding::default()` | +|layout |align | Alignment for content |`Align` |`Align::default()` | +|layout |flow | Flow direction of the content |`Flow` |`Flow::default()` | +|layout |spacing | Spacing between elements |`f64` |`0.0` | \ No newline at end of file diff --git a/src/gen/builtin/basic/scroll.md b/src/gen/builtin/basic/scroll.md new file mode 100644 index 0000000..a12cc92 --- /dev/null +++ b/src/gen/builtin/basic/scroll.md @@ -0,0 +1 @@ +# Scroll diff --git a/src/gen/builtin/basic/svg.md b/src/gen/builtin/basic/svg.md new file mode 100644 index 0000000..3f75100 --- /dev/null +++ b/src/gen/builtin/basic/svg.md @@ -0,0 +1,53 @@ +# GSvg Component +The `GSvg` component is designed to handle scalable vector graphics (SVG) with hover and focus animations, supporting various visual properties such as stroke colors, scale, and cursor interactions. + +## Animation +The `GSvg` component utilizes an animator to handle hover and focus transitions, allowing smooth changes in visual states. Below are the animations defined for different states: + +- **hover.off**: + - `draw_svg.hover`: changes to `0.0` + - `draw_svg.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` + +- **hover.on**: + - `draw_svg.hover`: changes to `1.0` + - `draw_svg.focus`: remains `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` for both `hover` and `focus` states + +- **hover.focus**: + - `draw_svg.hover`: changes to `0.0` + - `draw_svg.focus`: changes to `1.0` + - Animation transition: uses `Forward` with a duration of `0.25s` + +## Event +The `GSvg` component can handle various events, allowing interaction with the user. It triggers events like `Clicked`, `HoverIn`, `HoverOut`, `Focus`, and `FocusLost` when corresponding actions occur. + +## Props +|macro |prop |description |type |default| +|-------|---------------------|-------------------------------|----------------|-------| +|live |theme |Theme settings |Themes | | +|live |brightness |Brightness level |f32 |1.0 | +|live |curve |Curve intensity |f32 |0.6 | +|live |linearize |Linearize factor |f32 |0.5 | +|live |src |SVG source dependency |LiveDependency | | +|live |scale |Scaling factor |f64 |1.0 | +|live |color |SVG fill color |Option |None | +|live |draw_depth |Drawing depth |f32 |1.0 | +|live |stroke_hover_color |Color on hover |Option |None | +|live |stroke_focus_color |Color on focus |Option |None | +|live |cursor |Mouse cursor when hovered |Option|None | +|live |grab_key_focus |Enable key focus grabbing |bool |true | +|live |visible |Visibility of the component |bool |true | +|live |animation_key |Triggers animation when true |bool |false | +|animator|animator |Handles animations |Animator | | +|walk |abs_pos |Absolute position |Option |None | +|walk |margin |Margin space |Margin | | +|walk |width |Component width |Size | | +|walk |height |Component height |Size | | +|layout |scroll |Scroll position |DVec2 | | +|layout |clip_x |Enable horizontal clipping |bool |true | +|layout |clip_y |Enable vertical clipping |bool |true | +|layout |padding |Padding around content |Padding | | +|layout |align |Alignment of content |Align | | +|layout |flow |Flow direction of content |Flow | | +|layout |spacing |Spacing between elements |f64 | | diff --git a/src/gen/builtin/basic/view.md b/src/gen/builtin/basic/view.md new file mode 100644 index 0000000..411edae --- /dev/null +++ b/src/gen/builtin/basic/view.md @@ -0,0 +1,65 @@ +# GView Component + +The `GView` component is designed for creating a custom graphical view with advanced layout, drawing, and event handling capabilities. It supports various graphical properties like background color, borders, shadows, and animations, providing flexibility in appearance and interaction. + +## Animation + +This component supports animations, particularly for hover and focus states. The default hover and focus animations are defined using the `animator` field: + +- **hover.off**: + - `draw_view.hover`: changes to `0.0` + - `draw_view.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.on**: + - `draw_view.hover`: changes to `1.0` + - `draw_view.focus`: changes to `0.0` + - Animation transition: uses `Forward` with a duration of `0.25s` +- **hover.focus**: + - `draw_view.hover`: changes to `0.0` + - `draw_view.focus`: changes to `1.0` + - Animation transition: uses `Forward` with a duration of `0.25s` + +Animations can be customized to control transitions between different states, ensuring smooth visual feedback for user interactions. + +## Event + +The `GView` component supports a variety of events for user interaction. It includes: +- **HoverIn**: Triggered when the mouse hovers into the component area. +- **HoverOut**: Triggered when the mouse leaves the component area. +- **Click**: Triggered when the component is clicked. +- **Drag**: Triggered when the component is dragged. +- **Key Events**: Handles `KeyDown` and `KeyUp` events for keyboard interactions. + +Each event is processed through methods like `handle_event`, where interactions are managed and animations are triggered in response to user actions. + +## Props + +| Macro | Prop | Description | Type | Default | +|--------|--------------------|--------------------------------------------------|--------------------|----------| +| live | `theme` | The visual theme (Dark or Light) | `Themes` | `Themes::Dark` | +| live | `background_color` | The background color of the view | `Option` | `None` | +| live | `hover_color` | The color of the view on hover | `Option` | `None` | +| live | `focus_color` | The color of the view on focus | `Option` | `None` | +| live | `border_color` | The color of the view’s border | `Option` | `None` | +| live | `border_width` | The width of the border | `f32` | `0.0` | +| live | `border_radius` | The radius for rounded corners | `f32` | `2.0` | +| live | `visible` | Controls the visibility of the component | `bool` | `true` | +| live | `background_visible`| Controls the visibility of the background | `bool` | `true` | +| live | `shadow_color` | The color of the shadow | `Option` | `None` | +| live | `spread_radius` | The radius of the shadow spread | `f32` | `4.8` | +| live | `blur_radius` | The radius of the shadow blur | `f32` | `4.8` | +| live | `shadow_offset` | The offset of the shadow | `Vec2` | `(0.0, 0.0)` | +| live | `cursor` | The cursor to display when hovering over the view| `Option` | `None` | +| live | `animation_key` | Boolean to enable animations | `bool` | `false` | +| walk | `abs_pos` | Absolute position for layout | `Option` | `None` | +| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` | +| walk | `width` | Width of the view | `Size` | `Size::default()` | +| walk | `height` | Height of the view | `Size` | `Size::default()` | +| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` | +| layout | `clip_x` | Clip content horizontally | `bool` | `true` | +| layout | `clip_y` | Clip content vertically | `bool` | `true` | +| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` | +| layout | `align` | Alignment for content | `Align` | `Align::default()` | +| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` | +| layout | `spacing` | Spacing between elements | `f64` | `0.0` | + diff --git a/src/gen/builtin/font.md b/src/gen/builtin/font.md new file mode 100644 index 0000000..54e9d8e --- /dev/null +++ b/src/gen/builtin/font.md @@ -0,0 +1 @@ +# System Font diff --git a/src/gen/builtin/form/checkbox.md b/src/gen/builtin/form/checkbox.md new file mode 100644 index 0000000..9a3aa6f --- /dev/null +++ b/src/gen/builtin/form/checkbox.md @@ -0,0 +1 @@ +# CheckBox diff --git a/src/gen/builtin/form/radio.md b/src/gen/builtin/form/radio.md new file mode 100644 index 0000000..aff240e --- /dev/null +++ b/src/gen/builtin/form/radio.md @@ -0,0 +1 @@ +# Radio diff --git a/src/gen/builtin/getting_start.md b/src/gen/builtin/getting_start.md new file mode 100644 index 0000000..8cae128 --- /dev/null +++ b/src/gen/builtin/getting_start.md @@ -0,0 +1,20 @@ +# GenUI Builtin Components (v0.1.0) + +- version: v0.1.0 +- update date: 2024-10-24 +- author: Will-YiFei Sheng +- makepad_widget version: v0.6.0 +- makepad branch: rik + +Github Repo: [GenUI Builtin Components](https://github.com/Privoce/GenUI/tree/components/gen/components) + +GenUI Builtin Components is a Makepad component library that can be directly integrated into Makepad projects. As the core component library of GenUI, it serves as the foundational building blocks within GenUI projects, accelerating the development process for both front-end and back-end developers. + + +**However, this is more than just a component library. It includes numerous built-in macros and system APIs that simplify development workflows and extend Makepad's current capabilities. It represents only one part of the many foundational modules in GenUI, functioning like the default HTML elements in JavaScript but designed with a more modern approach.** + +> You can get Doc exe in Builtin project + +## Doc Signs + +- N/A : `Default::default` exist in component prop \ No newline at end of file diff --git a/src/gen/builtin/install.md b/src/gen/builtin/install.md new file mode 100644 index 0000000..b2b9f0d --- /dev/null +++ b/src/gen/builtin/install.md @@ -0,0 +1,28 @@ +# Install + +## Crates.io (Comming Soon) + +## Github + +[GenUI Builtin Components](https://github.com/Privoce/GenUI/tree/components/gen/components) + +### 1. Add the following to your Cargo.toml file + +```toml +makepad-widgets = {git = "https://github.com/makepad/makepad.git", branch = "rik"} +gen_components = {git = "https://github.com/Privoce/GenUI.git/gen/components", branch = "components"} +``` + +### 2. Import into Live Design + +```rust +live_design!{ + import gen_components::components::*; +} +``` + +### 3. Register into LiveRegister + +```rust +crate::gen_components::live_design(cx); +``` \ No newline at end of file diff --git a/src/gen/builtin/qs.md b/src/gen/builtin/qs.md new file mode 100644 index 0000000..f6fa452 --- /dev/null +++ b/src/gen/builtin/qs.md @@ -0,0 +1 @@ +# QuickStart diff --git a/src/gen/builtin/theme.md b/src/gen/builtin/theme.md new file mode 100644 index 0000000..a5e983a --- /dev/null +++ b/src/gen/builtin/theme.md @@ -0,0 +1 @@ +# Theme Color