-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
aff0b93
commit a80fa35
Showing
17 changed files
with
488 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<Vec4>` | `None` | | ||
| | live | background_visible | Visibility of the background | `bool` | `true` | | ||
| | live | hover_color | Color of the button when hovered | `Option<Vec4>` | `None` | | ||
| | live | focus_color | Color of the button when focused | `Option<Vec4>` | `None` | | ||
| | live | shadow_color | Color of the shadow | `Option<Vec4>` | `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<Vec4>` | `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<MouseCursor>`| | | ||
| | 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<DVec2>` | `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` | | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<Vec4>` | `None` | | ||
| | live | stroke_hover_color | Stroke color on hover | `Option<Vec4>` | `None` | | ||
| | live | stroke_focus_color | Stroke color on focus | `Option<Vec4>` | `None` | | ||
| | live | stroke_width | Stroke width | `f32` | `1.0` | | ||
| | live | cursor | Icon cursor style | `Option<MouseCursor>`| `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<DVec2>` | `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<DrawGIconBase>`| `None` | | ||
| | live | icon_arrow | Arrow icon drawable | `Option<DrawGIconArrow>`| `None` | | ||
| | live | icon_code | Code icon drawable | `Option<DrawGIconCode>` | `None` | | ||
| | live | icon_emoji | Emoji icon drawable | `Option<DrawGIconEmoji>`| `None` | | ||
| | live | icon_fs | File system icon drawable | `Option<DrawGIconFs>` | `None` | | ||
| | live | icon_ui | UI icon drawable | `Option<DrawGIconUI>` | `None` | | ||
| | live | icon_person | Person icon drawable | `Option<DrawGIconPerson>`| `None` | | ||
| | live | icon_relation | Relation icon drawable | `Option<DrawGIconRelation>`| `None` | | ||
| | live | icon_state | State icon drawable | `Option<DrawGIconState>`| `None` | | ||
| | live | icon_time | Time icon drawable | `Option<DrawGIconTime>`| `None` | | ||
| | live | icon_tool | Tool icon drawable | `Option<DrawGIconTool>`| `None` | | ||
| | rust | draw_type | Controls the type of icon being drawn | `Option<DrawGIconType>`| `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<HeapLiveIdPath>`| `None` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<MouseCursor>|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<DVec2>` | `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<Texture> |None | | ||
| |live |event_key |Trigger events when true |bool |true | |
Oops, something went wrong.