Skip to content

Commit a80fa35

Browse files
syf20020816syf20020816
committed
builtin basic finish
1 parent aff0b93 commit a80fa35

File tree

17 files changed

+488
-18
lines changed

17 files changed

+488
-18
lines changed

‎src/SUMMARY.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,24 @@
3232
- [Makepad-Plugin](./gen/makepad/plugin.md)
3333
- [Dev Manual](./gen/makepad/dev/manual/index.md)
3434
- [Enum](./gen/makepad/dev/manual/enum.md)
35-
- [BuiltIn-UI Lib](./gen/makepad/ui_lib.md)
36-
- [Origins](./gen/makepad/origin/origin.md)
37-
- [Root](./gen/makepad/origin/root.md)
38-
- [Window](./gen/makepad/origin/window.md)
39-
- [View](./gen/makepad/origin/view.md)
40-
- [Label](./gen/makepad/origin/label.md)
41-
- [Components](./gen/makepad/components.md)
42-
- [Label](./gen/makepad/components/label.md)
43-
- [Link](./gen/makepad/components/link.md)
44-
- [Card](./gen/makepad/components/card.md)
45-
- [VLayout](./gen/makepad/components/v_layout.md)
46-
- [HLayout](./gen/makepad/components/h_layout.md)
47-
- [Button](./gen/makepad/components/button.md)
48-
- [Radio](./gen/makepad/components/radio.md)
49-
- [CheckBox](./gen/makepad/components/checkbox.md)
50-
- [Icon](./gen/makepad/components/icon.md)
51-
- [Image](./gen/makepad/components/image.md)
52-
- [Input](./gen/makepad/components/input.md)
35+
- [BuiltIn-UI Lib](./gen/builtin/getting_start.md)
36+
- [Install](./gen/builtin/install.md)
37+
- [QuickStart](./gen/builtin/qs.md)
38+
- [System Font](./gen/builtin/font.md)
39+
- [Theme Color](./gen/builtin/theme.md)
40+
- [Basic]()
41+
- [Label](./gen/builtin/basic/label.md)
42+
- [View](./gen/builtin/basic/view.md)
43+
- [Button](./gen/builtin/basic/button.md)
44+
- [Svg](./gen/builtin/basic/svg.md)
45+
- [Image](./gen/builtin/basic/image.md)
46+
- [Icon](./gen/builtin/basic/icon.md)
47+
- [Divider](./gen/builtin/basic/divider.md)
48+
- [Link](./gen/builtin/basic/link.md)
49+
- [Scroll](./gen/builtin/basic/scroll.md)
50+
- [Form]()
51+
- [Radio](./gen/builtin/form/radio.md)
52+
- [CheckBox](./gen/builtin/form/checkbox.md)
5353
- [Test-Plan](./gen/tests/test.md)
5454
- [Static](./gen/tests/static.md)
5555
- [Color](./gen/tests/color.md)

‎src/gen/builtin/basic/button.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# GButton Component
2+
3+
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.
4+
5+
## Animation
6+
7+
This component supports animations, particularly for hover and focus states. The default hover and focus animations are defined using the `animator` field:
8+
9+
- **hover.off**:
10+
- `draw_button.hover`: changes to `0.0`
11+
- `draw_button.focus`: changes to `0.0`
12+
- Animation transition: uses `Forward` with a duration of `0.25s`
13+
- **hover.on**:
14+
- `draw_button.hover`: changes to `1.0`
15+
- `draw_button.focus`: changes to `0.0`
16+
- Animation transition: uses `Forward` with a duration of `0.25s`
17+
- **hover.focus**:
18+
- `draw_button.hover`: changes to `0.0`
19+
- `draw_button.focus`: changes to `1.0`
20+
- Animation transition: uses `Forward` with a duration of `0.25s`
21+
22+
## Event
23+
24+
The `GButton` component supports the following events:
25+
26+
- **HoverIn**: Triggered when the mouse hovers over the button.
27+
- **HoverOut**: Triggered when the mouse leaves the button.
28+
- **Clicked**: Triggered when the button is clicked.
29+
- **Focus**: Triggered when the button receives focus (e.g., via a keyboard event).
30+
- **FocusLost**: Triggered when the button loses focus.
31+
32+
These events can be customized to trigger additional behaviors based on user interactions.
33+
34+
## Props
35+
36+
| macro | prop | description | type | default |
37+
|--------|--------------------|-------------------------------------------|------------------|-----------|
38+
| live | theme | Theme of the button | `Themes` | |
39+
| live | background_color | Background color of the button | `Option<Vec4>` | `None` |
40+
| live | background_visible | Visibility of the background | `bool` | `true` |
41+
| live | hover_color | Color of the button when hovered | `Option<Vec4>` | `None` |
42+
| live | focus_color | Color of the button when focused | `Option<Vec4>` | `None` |
43+
| live | shadow_color | Color of the shadow | `Option<Vec4>` | `None` |
44+
| live | spread_radius | Spread radius of the shadow | `f32` | `0.0` |
45+
| live | blur_radius | Blur radius of the shadow | `f32` | `4.8` |
46+
| live | shadow_offset | Offset of the shadow | `Vec2` | |
47+
| live | border_color | Color of the border | `Option<Vec4>` | `None` |
48+
| live | border_width | Width of the border | `f32` | `0.0` |
49+
| live | border_radius | Radius of the border's corners | `f32` | `2.0` |
50+
| live | cursor | Mouse cursor when hovering over the button| `Option<MouseCursor>`| |
51+
| live | visible | Whether the button is visible | `bool` | `true` |
52+
| live | grab_key_focus | Whether the button grabs keyboard focus | `bool` | `true` |
53+
| animator | animator | Animation controller for the button | `Animator` | |
54+
| walk | `abs_pos` | Absolute position for layout | `Option<DVec2>` | `None` |
55+
| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` |
56+
| walk | `width` | Width of the view | `Size` | `Size::default()` |
57+
| walk | `height` | Height of the view | `Size` | `Size::default()` |
58+
| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` |
59+
| layout | `clip_x` | Clip content horizontally | `bool` | `true` |
60+
| layout | `clip_y` | Clip content vertically | `bool` | `true` |
61+
| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` |
62+
| layout | `align` | Alignment for content | `Align` | `Align::default()` |
63+
| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` |
64+
| layout | `spacing` | Spacing between elements | `f64` | `0.0` |
65+

‎src/gen/builtin/basic/divider.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# GDivider component
2+
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.
3+
4+
## Animation
5+
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.
6+
7+
## Event
8+
The `GDivider` inherits event handling from `GView`. However, since it functions mainly as a visual separator, its event handling is generally minimal.
9+
10+
## Props
11+
|macro |prop |description |type |default|
12+
|------|---------------|--------------------------------------|-------------|-------|
13+
|live |direction |Divider direction: horizontal (1.0) or vertical (0.0)|f32 |1.0|
14+
|live |stroke_width |The width of the divider's stroke |f32 |1.4 |
15+
16+
> Other Props see: [GView](./view.md)

‎src/gen/builtin/basic/icon.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# GIcon component
2+
The `GIcon` component is a customizable graphical icon with support for animations, events, and various properties to control its appearance and behavior.
3+
4+
## Animation
5+
The `GIcon` component provides built-in animations for hover and focus effects. These animations transition smoothly between states based on user interactions.
6+
7+
- `hover`:
8+
- **off**: Transitions to a state where the `hover` effect is disabled across all icons.
9+
- **on**: Applies a `hover` effect to the icons, transitioning them to a highlighted state.
10+
- **focus**: Applies a `focus` effect, transitioning the icons into focus mode.
11+
12+
## Event
13+
The `GIcon` component supports various interaction events, enabling developers to listen and respond to user actions.
14+
15+
- `HoverIn(GIconHoverParam)`: Triggered when the icon is hovered over.
16+
- `HoverOut(GIconHoverParam)`: Triggered when the hover effect is lost.
17+
- `Focus(GIconFocusParam)`: Triggered when the icon gains focus.
18+
- `Clicked(GIconClickedParam)`: Triggered when the icon is clicked.
19+
- `FocusLost(GIconFocusLostParam)`: Triggered when the icon loses focus.
20+
21+
## Props
22+
23+
| macro | prop | description | type | default |
24+
|--------|--------------------|---------------------------------------------------------|--------------------|---------|
25+
| live | theme | Themes for styling the component | `Themes` | - |
26+
| live | color | Icon color | `Option<Vec4>` | `None` |
27+
| live | stroke_hover_color | Stroke color on hover | `Option<Vec4>` | `None` |
28+
| live | stroke_focus_color | Stroke color on focus | `Option<Vec4>` | `None` |
29+
| live | stroke_width | Stroke width | `f32` | `1.0` |
30+
| live | cursor | Icon cursor style | `Option<MouseCursor>`| `None` |
31+
| live | visible | Controls visibility of the icon | `bool` | `true` |
32+
| live | grab_key_focus | Determines if the icon grabs key focus | `bool` | `true` |
33+
| live | animation_key | Animation key control | `bool` | `false` |
34+
| animator | animator | Manages icon animations | `Animator` | - |
35+
| redraw | draw_icon | Handles redrawing the icon | `DrawQuad` | - |
36+
| walk | `abs_pos` | Absolute position for layout | `Option<DVec2>` | `None` |
37+
| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` |
38+
| walk | `width` | Width of the view | `Size` | `Size::default()` |
39+
| walk | `height` | Height of the view | `Size` | `Size::default()` |
40+
| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` |
41+
| layout | `clip_x` | Clip content horizontally | `bool` | `true` |
42+
| layout | `clip_y` | Clip content vertically | `bool` | `true` |
43+
| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` |
44+
| layout | `align` | Alignment for content | `Align` | `Align::default()` |
45+
| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` |
46+
| layout | `spacing` | Spacing between elements | `f64` | `0.0` |
47+
| live | icon_base | Base icon drawable | `Option<DrawGIconBase>`| `None` |
48+
| live | icon_arrow | Arrow icon drawable | `Option<DrawGIconArrow>`| `None` |
49+
| live | icon_code | Code icon drawable | `Option<DrawGIconCode>` | `None` |
50+
| live | icon_emoji | Emoji icon drawable | `Option<DrawGIconEmoji>`| `None` |
51+
| live | icon_fs | File system icon drawable | `Option<DrawGIconFs>` | `None` |
52+
| live | icon_ui | UI icon drawable | `Option<DrawGIconUI>` | `None` |
53+
| live | icon_person | Person icon drawable | `Option<DrawGIconPerson>`| `None` |
54+
| live | icon_relation | Relation icon drawable | `Option<DrawGIconRelation>`| `None` |
55+
| live | icon_state | State icon drawable | `Option<DrawGIconState>`| `None` |
56+
| live | icon_time | Time icon drawable | `Option<DrawGIconTime>`| `None` |
57+
| live | icon_tool | Tool icon drawable | `Option<DrawGIconTool>`| `None` |
58+
| rust | draw_type | Controls the type of icon being drawn | `Option<DrawGIconType>`| `None` |
59+
| live | icon_type | Specifies the type of icon | `IconType` | - |
60+
| live | event_key | Event key control | `bool` | `true` |
61+
| rust | scope_path | Path to scope the icon | `Option<HeapLiveIdPath>`| `None` |

‎src/gen/builtin/basic/image.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# GImage Component
2+
The `GImage` component handles scalable images with adjustable rotation, scaling, and visibility, supporting event triggers such as hovering and clicking.
3+
4+
## Animation
5+
No animation is available for the `GImage` component.
6+
7+
## Event
8+
The `GImage` component can trigger various events in response to user interactions:
9+
- `HoverIn(GImageHoverParam)`: Triggered when the mouse pointer enters the image area.
10+
- `HoverOut(GImageHoverParam)`: Triggered when the mouse pointer leaves the image area.
11+
- `Clicked(GImageClickedParam)`: Triggered when the image is clicked.
12+
13+
## Props
14+
|macro |prop |description |type |default |
15+
|--------|-----------------|-------------------------------|-------------------|--------|
16+
|live |visible |Visibility of the component |bool |true |
17+
|live |grab_key_focus |Enable key focus grabbing |bool |true |
18+
|live |opacity |Opacity level |f32 |1.0 |
19+
|live |cursor |Mouse cursor when hovered |Option<MouseCursor>|None |
20+
|live |scale |Scaling factor |f64 |1.0 |
21+
|live |fit |Image fit type |ImageFit | |
22+
|live |min_width |Minimum width of the image |i64 |16 |
23+
|live |min_height |Minimum height of the image |i64 |16 |
24+
|live |rotation |Rotation angle in radians |f32 |0.0 |
25+
| walk | `abs_pos` | Absolute position for layout | `Option<DVec2>` | `None` |
26+
| walk | `margin` | Margin size around the view | `Margin` | `Margin::default()` |
27+
| walk | `width` | Width of the view | `Size` | `Size::default()` |
28+
| walk | `height` | Height of the view | `Size` | `Size::default()` |
29+
| layout | `scroll` | Scroll position for layout | `DVec2` | `(0.0, 0.0)` |
30+
| layout | `clip_x` | Clip content horizontally | `bool` | `true` |
31+
| layout | `clip_y` | Clip content vertically | `bool` | `true` |
32+
| layout | `padding` | Padding within the view | `Padding` | `Padding::default()` |
33+
| layout | `align` | Alignment for content | `Align` | `Align::default()` |
34+
| layout | `flow` | Flow direction of the content | `Flow` | `Flow::default()` |
35+
| layout | `spacing` | Spacing between elements | `f64` | `0.0` |
36+
|live |draw_image |The image drawing object |DrawGView | |
37+
|live |src |Image source dependency |LiveDependency | |
38+
|live |texture |Texture object |Option<Texture> |None |
39+
|live |event_key |Trigger events when true |bool |true |

0 commit comments

Comments
 (0)