```eval_rst .. include:: /header.rst :github_url: |github_link_base|/examples.md ``` # Examples ## Get started ### 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 ### Text styles ### Line styles ### Transition ### Using multiple styles ### Local styles ### Add styles to parts and states ### Extending the current theme ## Animations ### Start animation on an event ### Playback animation ## Events ### Button click event ### Handle multiple events ### Event bubbling ## 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 RTL and RTL base direction #### Custom drawr to show the current value ### Button #### Simple Buttons #### Styling buttons #### Gummy button ### Button matrix #### Simple Button matrix #### Custom buttons #### Pagination ### Calendar #### Calendar with header ### Canvas #### Drawing on the Canvas and rotate #### Transparent Canvas with chroma keying ### Chart #### Line Chart #### Faded area line chart with custom division lines #### Axis ticks and labels with scrolling #### Show the value of the pressed points #### Display 1000 data points with zooming and scrolling #### Show cursor on the clicked point #### Scatter chart ### Checkbox #### Simple Checkboxes ### Colorwheel #### Simple Colorwheel ### Dropdown #### Simple Drop down list #### Drop down in four directions #### Menu ### Image #### Image from variable and symbol #### Image recoloring #### Rotate and zoom #### Image offset and styling ### Image button #### Simple Image button ### Keyboard #### Keyboard with text area ### Label #### Line wrap, recoloring and scrolling #### Text shadow #### Show LTR, RTL and Chinese texts ### LED #### LED with custom style ### Line #### Simple Line ### List #### Simple List ### Meter #### Simple meter #### A meter with multiple arcs #### A clock from a meter #### Pie chart ### Message box #### Simple Message box ### Roller #### Simple Roller #### Styling the roller #### add fade mask to roller ### Slider #### Simple Slider #### Slider with custom style #### Slider with extended drawer ### 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 ### Tabview #### Tileview with content ### Window #### Simple window