Flat Text Button Styled#

gui_flat_button_styled.py#
 1"""
 2Example code showing how to style UIFlatButtons.
 3
 4If Python and Arcade are installed, this example can be run from the command line with:
 5python -m arcade.examples.gui_flat_button_styled
 6"""
 7from __future__ import annotations
 8
 9import arcade
10import arcade.gui
11import arcade.gui.widgets.buttons
12import arcade.gui.widgets.layout
13from arcade.gui import UIFlatButton
14
15
16class MyView(arcade.View):
17    def __init__(self):
18        super().__init__()
19        # --- Required for all code that uses UI element,
20        # a UIManager to handle the UI.
21        self.ui = arcade.gui.UIManager()
22
23        # Render button
24        red_style = {
25            "normal": UIFlatButton.UIStyle(
26                font_size=12,
27                font_name=("calibri", "arial"),
28                font_color=arcade.color.WHITE,
29                bg=arcade.color.RED,
30                border=None,
31                border_width=0,
32            ),
33            "hover": UIFlatButton.UIStyle(
34                font_size=12,
35                font_name=("calibri", "arial"),
36                font_color=arcade.color.WHITE,
37                bg=arcade.color.REDWOOD,
38                border=arcade.color.RED,
39                border_width=2,
40            ),
41            "press": UIFlatButton.UIStyle(
42                font_size=12,
43                font_name=("calibri", "arial"),
44                font_color=arcade.color.WHITE,
45                bg=arcade.color.RED_BROWN,
46                border=arcade.color.REDWOOD,
47                border_width=2,
48            ),
49            "disabled": UIFlatButton.UIStyle(
50                font_size=12,
51                font_name=("calibri", "arial"),
52                font_color=arcade.color.WHITE,
53                bg=arcade.color.COOL_GREY,
54                border=arcade.color.ASH_GREY,
55                border_width=2,
56            )
57        }
58
59        # Create a vertical BoxGroup to align buttons
60        self.v_box = arcade.gui.widgets.layout.UIBoxLayout(space_between=20)
61
62        # Create the buttons
63        demo_button_1 = arcade.gui.widgets.buttons.UIFlatButton(
64            text="Demo 1", width=200, style=UIFlatButton.DEFAULT_STYLE
65        )
66        demo_button_2 = arcade.gui.widgets.buttons.UIFlatButton(
67            text="Demo 2", width=200, style=red_style
68        )
69
70        self.v_box.add(demo_button_1)
71        self.v_box.add(demo_button_2)
72
73        # Create a widget to hold the v_box widget, that will center the buttons
74        ui_anchor_layout = arcade.gui.widgets.layout.UIAnchorLayout()
75        ui_anchor_layout.add(child=self.v_box, anchor_x="center_x", anchor_y="center_y")
76
77        self.ui.add(ui_anchor_layout)
78
79    def on_show_view(self):
80        self.window.background_color = arcade.color.DARK_BLUE_GRAY
81        # Enable UIManager when view is shown to catch window events
82        self.ui.enable()
83
84    def on_hide_view(self):
85        # Disable UIManager when view gets inactive
86        self.ui.disable()
87
88    def on_draw(self):
89        self.clear()
90        self.ui.draw()
91
92
93if __name__ == '__main__':
94    window = arcade.Window(800, 600, "UIExample", resizable=True)
95    window.show_view(MyView())
96    window.run()