中文

快速入门

本文档将讲述如何将GenUI Builtin Components使用与GenUI项目，我们会提供为每个组件提供易懂的使用文档。

TIP

您可能对其中使用的数据类型的写法并不了解，请参照: 数据

在这个文档中我们只会象征性的介绍label和button组件，若您想要学习更多组件请参照：组件

`label` 文本组件

label组件是一个可自定义的标签小部件，具有动画和事件处理功能。它允许通过各种属性、动画和事件进行悬停、聚焦和文本样式设置。

示例

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

属性

名称	说明	类型
`theme`	主题	`Themes`
`color`	颜色	`MakepadColor`
`stroke_hover_color`	悬停时字体颜色	`MakepadColor`
`stroke_focus_color`	获取焦点时字体颜色	`MakepadColor`
`font_size`	字体大小	`F64`
`cursor`	鼠标光标	`MouseCursor`
`line_spacing`	行间距	`F64`
`height_factor`	高度因子	`F64`
`wrap`	文本换行方式	`TextWrap`
`font_family`	字体类型	`LiveDependency`
`visible`	是否可见	`bool`
`height`	高度	`Size`
`width`	宽度	`Size`
`margin`	外边距	`Margin`
`padding`	内边距	`Padding`
`align`	对齐方式	`Align`
`text`	文本内容	`String`
`animation_key`	是否允许动画	`bool`
`event_key`	是否允许事件	`bool`
`grabKey_focus`	是否捕获键焦点	`bool`

事件回调

名称	说明	参数
`hover_in`	鼠标进入事件	`GLabelHoverParam`
`hover_out`	鼠标离开事件	`GLabelHoverParam`
`focus`	获取焦点事件	`GLabelFocusParam`
`focus_lost`	失去焦点事件	`GLabelFocusLostParam`

`button` 按钮组件

专为交互式 UI 元素设计的可自定义按钮。它支持悬停、聚焦和点击动画，并具有各种可配置的外观属性，包括背景颜色、阴影和边框样式。

属性

名称	说明	类型
`theme`	主题	`Themes`
`background_color`	背景颜色	`MakepadColor`
`background_visible`	背景是否可见	`bool`
`hover_color`	悬停颜色	`MakepadColor`
`focus_color`	聚焦颜色	`MakepadColor`
`shadow_color`	阴影颜色	`MakepadColor`
`spread_radius`	阴影扩展半径	`F32`
`blur_radius`	阴影模糊半径	`F32`
`shadow_offset`	阴影偏移	`Vec2`
`border_color`	边框颜色	`MakepadColor`
`border_width`	边框宽度	`F32`
`border_radius`	边框圆角半径	`F32`
`cursor`	鼠标指针	`MouseCursor`
`visible`	是否可见	`bool`
`grab_key_focus`	是否捕获键盘焦点	`bool`
`animation_key`	动画键	`bool`
`event_key`	事件键	`bool`
`abs_pos`	绝对位置	`DVec2`
`margin`	外边距	`Margin`
`width`	宽度	`Size`
`height`	高度	`Size`
`scroll`	滚动偏移	`DVec2`
`clip_x`	是否裁剪 X 轴	`bool`
`clip_y`	是否裁剪 Y 轴	`bool`
`padding`	内边距	`Padding`
`align`	对齐方式	`Align`
`flow`	流动方式	`Flow`
`spacing`	间距	`F64`

事件回调

名称	说明	参数
`hover_in`	鼠标进入事件	`GButtonHoverParam`
`hover_out`	鼠标离开事件	`GButtonHoverParam`
`clicked`	点击事件	`GButtonClickedParam`
`focus`	获取焦点事件	`GButtonFocusParam`
`focus_lost`	失去焦点事件	`GButtonFocusLostParam`

目录