Skip to content

Commit

Permalink
add gen ui lib
Browse files Browse the repository at this point in the history
  • Loading branch information
syf20020816 committed Jun 26, 2024
1 parent ba75978 commit 320bd17
Show file tree
Hide file tree
Showing 27 changed files with 1,012 additions and 0 deletions.
16 changes: 16 additions & 0 deletions src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- [QuickStart](./makepad/quickstart.md)
- [Project Structure](./makepad/structure/structure.md)
- [Code Guide](./makepad/code/code.md)
- [Static Page](./makepad/code/widgets/static_page.md)
- [Define Easy Component](./makepad/code/widgets/easy_component.md)
- [Define Easy Widget](./makepad/code/widgets/define.md)
- [Define Deref Widget](./makepad/code/widgets/define2.md)
Expand Down Expand Up @@ -152,6 +153,21 @@

# GenUI
---
- [GenUI](./gen/introduction.md)
- [Makepad-Plugin](./gen/makepad/plugin.md)
- [BuiltIn-UI Lib](./gen/makepad/ui_lib.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)
- [GenUI-Design](./gen/design/gen-ui-design.md)
- [Parser](./gen/design/parser/parser.md)
- [Result](./gen/design/parser/result.md)
Expand Down
1 change: 1 addition & 0 deletions src/gen/makepad/components.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Components
105 changes: 105 additions & 0 deletions src/gen/makepad/components/button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
# GButton

A customizable button widget with hover and press animations, configurable colors, cursor behavior, and text properties.

## Example
![](../../../static/gen/components/button.gif)
```rust
use makepad_widgets::*;

live_design! {
import makepad_widgets::base::*;
import makepad_widgets::theme_desktop_dark::*;
import gen_components::components::*;

GButtonExample = <ScrollYView>{
height: 200.0,
width: Fill,
flow: Down,
spacing: 10.0,
<Label>{
text: "GButton"
}
<GButton>{
text: "Default Button"
}
<GButton>{
theme: Dark,
text: "Theme Dark"
}
<GButton>{
theme: Success,
text: "Theme Success"
}
<GButton>{
theme: Warning,
text: "Theme Warning"
}
<GButton>{
theme: Error,
text: "Theme Error",
}
<GButton>{
theme: Error,
text: "unvisible button!",
visible: false,
}
<GButton>{
round: true,
text: "Round Button",
}
<GButton>{
height: 46,
width: 160,
theme: Success,
border_width: 1.4,
border_color: #FFF,
border_radius: 11.0,
text: "Rounded Button!",
}
<GButton>{
theme: Dark,
border_width: 1.2,
hover_color: #FF0000,
pressed_color: #00FF00,
text: "GButton!",
font_family: dep("E:/Rust/try/makepad/Gen-UI/examples/gen_widget_example/resources/GoNotoKurrent-Bold.ttf"),
font_size: 12.0,
color: #000,
}
}
}
```
## Props
|decorate|name|type|description|
|--|--|--|--|
|live|theme|`Themes`|The theme applied to the button.|
|live|background_color|`Option<Vec4>`|The background color of the button.|
|live|hover_color|`Option<Vec4>`|The color of the button when hovered.|
|live|pressed_color|`Option<Vec4>`|The color of the button when pressed.|
|live|border_color|`Option<Vec4>`|The border color of the button.|
|live|border_width|`f32`|The width of the button's border.|
|live|border_radius|`f32`|The radius of the button's border.|
|live|round|`bool`|Whether the button has rounded corners.|
|live|text|`RcStringMut`|The text displayed on the button.|
|live|font_size|`f64`|The font size of the button text.|
|live|color|`Option<Vec4>`|The color of the button text.|
|live|font_family|`LiveDependency`|The font family used for the button text.|
|live|cursor|`Option<MouseCursor>`|The cursor type when hovering over the button.|
|live|visible|`bool`|Whether the button is visible.|
|live|draw_text|`DrawText`|The component used for drawing the button text.|
|live|text_walk|`Walk`|The positioning properties for the button text.|
|live|grab_key_focus|`bool`|Whether the button grabs key focus when clicked.|
|animator|animator|`Animator`|The animation properties for the button.|
|redraw|draw_button|`DrawCard`|The component used for drawing the button.|
|walk|walk|`Walk`|The positioning properties for the button.|
|layout|layout|`Layout`|The layout properties for the button.|

## Event

|name|description|
|--|--|
|Hovered|Triggered when the button is hovered.|
|Clicked|Triggered when the button is clicked.|
|Released|Triggered when the button is released.|
|Pressed|Triggered when the button is pressed.|
172 changes: 172 additions & 0 deletions src/gen/makepad/components/card.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
# Card

A customizable card widget with hover and press animations, configurable colors, cursor behavior, and optional scroll bars.

## Example

![](../../../static/gen/components/card.png)

```rust
use makepad_widgets::*;

live_design! {
import makepad_widgets::base::*;
import makepad_widgets::theme_desktop_dark::*;
import gen_components::components::*;

GCardExample = <ScrollYView>{
height: 660.0,
width: Fill,
flow: Down,
spacing: 10.0,
<Label>{
text: "GCard",
}
<GCard>{
height: 30.0,
width: 30.0,
}
<GCard>{
theme: Dark,
height: 30.0,
width: 30.0,
}
<GCard>{
theme: Error,
height: 30.0,
width: 30.0,
}
<GCard>{
theme: Warning,
height: 30.0,
width: 30.0,
animator_key: true,
}
<GCard>{
theme: Success,
height: 30.0,
width: 160.0,
cursor: Help,
align: {x: 0.5, y: 0.5},
<GLabel>{
text: "cursor: Help",
}
}
<GCard>{
theme: Error,
height: Fit,
width: 180.0,
transparent: true,
border_width: 1.0,
border_radius: 0.0,
align: {x: 0.5, y: 0.5},
<GLabel>{
margin: 20.0,
text: "Transparent GCard",
}
}
<GCard>{
theme: Success,
height: 60.0,
width: 60.0,
border_color: #FF0000,
border_width: 1.0,
border_radius: 15.0,
}
<GCard>{
height: Fit,
width: 300,
flow: Down,
background_color: #FFFFFF,
spacing: 10.0,
<GLabel>{
text: "GCard flow Down",
color: #0,
margin: 10.0,
}
<GCard>{
theme: Error,
height: 30.0,
width: 30.0,
}
<GCard>{
theme: Warning,
height: 30.0,
width: 30.0,
}
<GButton>{
text: "hello"
}
}

<GCard>{
height: 100.0,
width: 300,
flow: Down,
background_color: #FF0000,
spacing: 10.0,
// transparent: true,
scroll_bars: <GScrollBars> {}
<GLabel>{
text: "Card can scroll",
color: #0,
margin: 10.0,
}
<GCard>{
theme: Error,
height: 30.0,
width: 30.0,
}
<GCard>{
theme: Warning,
height: 30.0,
width: 30.0,
}
<GButton>{
text: "hello"
}
}
}
}
```

## Props
|decorate|name|type|description|
|--|--|--|--|
|live|theme|`Themes`|The theme applied to the card.|
|live|background_color|`Option<Vec4>`|The background color of the card.|
|live|hover_color|`Option<Vec4>`|The color of the card when hovered.|
|live|pressed_color|`Option<Vec4>`|The color of the card when pressed.|
|live|border_color|`Option<Vec4>`|The border color of the card.|
|live|border_width|`f32`|The width of the card's border.|
|live|border_radius|`f32`|The radius of the card's border.|
|live|visible|`bool`|Whether the card is visible.|
|live|transparent|`bool`|Whether the card background is transparent.|
|live|cursor|`Option<MouseCursor>`|The cursor type when hovering over the card.|
|live|animator_key|`bool`|Whether the card uses an animation key.|
|live|scroll_bars|`Option<LivePtr>`|The optional scroll bars for the card.|
|rust|scroll_bars_obj|`Option<Box<ScrollBars>>`|The scroll bars object.|
|live|grab_key_focus|`bool`|Whether the card grabs key focus when clicked.|
|live|block_signal_event|`bool`|Whether the card blocks signal events.|
|live|draw_card|`DrawCard`|The component used for drawing the card.|
|walk|walk|`Walk`|The positioning properties for the card.|
|layout|layout|`Layout`|The layout properties for the card.|
|rust|draw_state|`DrawStateWrap<DrawState>`|The draw state of the card.|
|rust|children|`ComponentMap<LiveId, WidgetRef>`|The children components of the card.|
|rust|draw_order|`Vec<LiveId>`|The draw order of the card's children.|
|live|event_order|`EventOrder`|The event order for the card.|
|rust|defer_walks|`Vec<(LiveId, DeferWalk)>`|The deferred walks for the card.|
|animator|animator|`Animator`|The animation properties for the card.|

## Event

|name|description|
|--|--|
|KeyDown|Triggered when a key is pressed down.|
|KeyUp|Triggered when a key is released.|
|FingerDown|Triggered when a finger touches the card.|
|FingerMove|Triggered when a finger moves over the card.|
|FingerHoverIn|Triggered when a finger hovers over the card.|
|FingerHoverOver|Triggered when a finger moves while hovering over the card.|
|FingerHoverOut|Triggered when a finger stops hovering over the card.|
|FingerUp|Triggered when a finger is lifted from the card.|
Loading

0 comments on commit 320bd17

Please sign in to comment.