English

Quick Start

This document will describe how to use GenUI Builtin Components with GenUI projects. We will provide easy-to-understand usage documentation for each component.

TIP

You may not understand the writing of the data types used in it, please refer to: Data

In this document, we will only introduce the label and button components symbolically. If you want to learn more components, please refer to: Components

`label`

The label component is a customizable label widget with animation and event handling capabilities. It allows hovering, focusing, and text styling through various properties, animations, and events.

Example

1<label text="'Hello World'" font_size="16.0" color="#FFF"> </label>

Properties

Name	Description	Type
`theme`	Theme	`Themes`
`color`	Color	`MakepadColor`
`stroke_hover_color`	Font color when hovering	`MakepadColor`
`stroke_focus_color`	Font color when getting focus	`MakepadColor`
`font_size`	Font size	`F64`
`cursor`	Mouse cursor	`MouseCursor`
`line_spacing`	Line spacing	`F64`
`height_factor`	Height factor	`F64`
`wrap`	Text wrapping method	`TextWrap`
`font_family`	Font type	`LiveDependency`
`visible`	Visible or not	`bool`
`height`	height	`Size`
`width`	width	`Size`
`margin`	margin	`Margin`
`padding`	padding	`Padding`
`align`	alignment	`Align`
`text`	text content	`String`
`animation_key`	whether to allow animation	`bool`
`event_key`	whether to allow events	`bool`
`grabKey_focus`	whether to capture key focus	`bool`

Event callback

Name	Description	Parameters
`hover_in`	mouse enter event	`GLabelHoverParam`
`hover_out`	mouse leave event	`GLabelHoverParam`
`focus`	get focus event	`GLabelFocusParam`
`focus_lost`	Focus lost event	`GLabelFocusLostParam`

`button`

A customizable button designed for interactive UI elements. It supports hover, focus, and click animations, and has various configurable appearance properties, including background color, shadow, and border style.

Example

Basic Usage

1<button>
2  <label as_prop="slot" text="'Hello'"></label>
3</button>

Define inner

1<button>
2  <view as_prop="slot">
3    <label text="'Hello'"></label>
4    <label text="'World'"></label>
5  </view>
6</button>

Properties

Name	Description	Type
`theme`	Theme	`Themes`
`background_color`	Background color	`MakepadColor`
`background_visible`	Is the background visible	`bool`
`hover_color`	Hover color	`MakepadColor`
`focus_color`	Focus color	`MakepadColor`
`shadow_color`	Shadow color	`MakepadColor`
`spread_radius`	Shadow spread radius	`F32`
`blur_radius`	Shadow blur radius	`F32`
`shadow_offset`	Shadow offset	`Vec2`
`border_color`	Border color	`MakepadColor`
`border_width`	Border width	`F32`
`border_radius`	Border radius	`F32`
`cursor`	Mouse pointer	`MouseCursor`
`visible`	Visible or not	`bool`
`grab_key_focus`	Grab keyboard focus or not	`bool`
`animation_key`	Animation key	`bool`
`event_key`	Event key	`bool`
`abs_pos`	Absolute position	`DVec2`
`margin`	Margin	`Margin`
`width`	Width	`Size`
`height`	Height	`Size`
`scroll`	Scroll offset	`DVec2`
`clip_x`	Clip X axis or not	`bool`
`clip_y`	Clip Y axis or not	`bool`
`padding`	Padding	`Padding`
`align`	Alignment	`Align`
`flow`	Flow	`Flow`
`spacing`	Spacing	`F64`

Event callback

Name	Description	Parameters
`hover_in`	Mouse enter event	`GButtonHoverParam`
`hover_out`	Mouse leave event	`GButtonHoverParam`
`clicked`	Click event	`GButtonClickedParam`
`focus`	Get focus event	`GButtonFocusParam`
`focus_lost`	Lose focus event	`GButtonFocusLostParam`

Table of Contents

#Quick Start

#label

#Example

#Properties

#Event callback

#button

#Example

#Basic Usage

#Define inner

#Properties

#Event callback

Quick Start

`label`

Example

Properties

Event callback

`button`

Example

Basic Usage

Define inner

Properties

Event callback