[English]

Examples(示例)

Get started(入门)

A very simple hello world label


A button with a label and react on click event


Create styles from scratch for buttons


Create a slider and write its value on a label


Styles(样式)

Size styles


Background styles


Border styles


Outline styles


Shadow styles


Image styles


Arc styles


Text styles


Line styles


Transition


Using multiple styles


Local styles


Add styles to parts and states


Extending the current theme


Opacity and Transformations


Animations(动画)

Start animation on an event


Playback animation


Animation timeline


Events(事件)

Button click event


Handle multiple events


Event bubbling


Draw event


Layouts(布局)

Flex

A simple row and a column layout with flexbox


Arrange items in rows with wrap and even spacing


Demonstrate flex grow


Demonstrate flex grow.


Demonstrate column and row gap style properties


RTL base direction changes order of the items


Grid

A simple grid


Demonstrate cell placement and span


Demonstrate grid's -free unit-


Demonstrate track placement


Demonstrate column and row gap


Demonstrate RTL direction on grid


Scrolling(滚动)

Nested scrolling


Snapping


Floating button


Styling the scrollbars


Right to left scrolling


Translate on scroll


Widgets(控件)

Base object(基础对象)

Base objects with custom styles


Make an object draggable


Arc(圆弧)

Simple Arc


Loader with Arc


Bar(进度条)

Simple Bar


Styling a bar


Temperature meter


Stripe pattern and range value


Bar with LTR and RTL base direction


Custom drawer to show the current value


Bar with opposite direction


Button(按钮)

Button matrix(矩阵按钮)

Calendar(日历)

Calendar with header


Canvas(画布)

Drawing on the Canvas and rotate


Transparent Canvas with chroma keying


Draw a rectangle to the canvas


Draw a label to the canvas


Draw an arc to the canvas


Draw an image to the canvas


Draw a line to the canvas


Draw a vector graphic to the canvas


Chart(图表)

Line Chart


Axis ticks and labels with scrolling


Show the value of the pressed points


Recolor bars based on their value


Faded area line chart with custom division lines


Show cursor on the clicked point


Scatter chart


Checkbox(复选框)

Simple Checkboxes


Checkboxes as radio buttons


Colorwheel(色轮)

Image(图像)

Image button(图像按钮)

Simple Image button


Keyboard(键盘)

Keyboard with text area


Keyboard with custom map


Label(标签)

Line wrap, recoloring and scrolling


Text shadow


Show LTR, RTL and Chinese texts


Draw label with gradient color


Customize circular scrolling animation


LED(指示灯)

LED with custom style


Line(线条)

Simple Line


List(列表)

Simple List


Sorting a List using up and down buttons


Menu(菜单)

Simple Menu


Simple Menu with root btn


Simple Menu with custom header


Simple Menu with floating btn to add new menu page


Complex Menu


Meter(仪表)

Message box(消息框)

Simple Message box


Roller(滚轮)

Simple Roller


Styling the roller


add fade mask to roller


Scale(标尺)






Slider(滑动条)

Simple Slider


Slider with custom style


Slider with extended drawer


Slider with opposite direction


Span(富文本)

Span with custom styles


Spinbox(微调框)

Simple Spinbox


Spinner(旋转弧)

Simple spinner


Switch(开关)

Simple Switch


Table(表格)

Simple table


Lightweighted list from table


Tabview(选项卡)

Simple Tabview


Tabs on the left, styling and no scrolling


Textarea(文本框)

Simple Text area


Text area with password field


Text auto-formatting


Tileview(平铺视图)

Tileview with content


Window(窗口)

Simple window