Skip to content

Proofreading fixes for GUI style doc #1941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 27, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 26 additions & 21 deletions doc/programming_guide/gui/style.rst
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,42 @@ GUI Style
---------


With arcade 3.0 a whole new styling mechanism for GUI widgets was introduced.
The new styling allows more type safe and clear styling while staying flexible.
Arcade 3.0 added a new approach for styling GUI widgets. It is flexible, yet also
improves clarity and type safety.

Following widgets support styling:

.. _gui_style_which_widgets:

Which Widgets Can I Style?
==========================

The following widgets support styling:

- :py:class:`~arcade.gui.UITextureButton`
- :py:class:`~arcade.gui.UIFlatButton`
- :py:class:`~arcade.gui.UISlider`

For an advanced description about the style system read the 'Advanced' section.

Basic Usage
===========

This section covers how to use the existing stylable widgets.
This section will style a :py:class:`~arcade.gui.UIFlatButton` as an example. You
can use the same general approach for other stylable widgets, but you may want to
check their documentation for additional values they may support.

In the following examples we will use the :py:class:`~arcade.gui.UIFlatButton` as the stylable widget,
you can do the same with any stylable widget listed above.
To create your own widgets, please see the 'Advanced' section.


Quickstart
```````````
``````````

The following example shows how to adjust the style.


.. code-block::

# create an own style
# Styles are dictionaries of UIStyle objects
new_style = {
# provide a style for each widget state
# You should provide a style for each widget state
"normal": UIFlatButton.UIStyle(), # use default values for `normal` state
"hover": UIFlatButton.UIStyle(
font_color=arcade.color.BLACK,
Expand All @@ -50,17 +55,20 @@ The following example shows how to adjust the style.
)
}

# Pass the style dictionary when creating a UI element
UIFlatButton(style=new_style)


Default style
``````````````
`````````````

Stylable widgets have a property which holds the default style for
the type of widget. For the :py:class:`~arcade.gui.UIFlatButton` this is `UIFlatButton.DEFAULT_STYLE`.
Each stylable widget class has a ``DEFAULT_STYLE`` class attribute to hold the
default style for that type of widget. For example, on
:py:class:`~arcade.gui.UIFlatButton`, you can access this attribute via
``UIFlatButton.DEFAULT_STYLE``.

This default style will be used if no other style is provided within the constructor.
The default style looks like this:
This default style will be used if no other style is provided when creating an instance
of the class.

.. code-block::

Expand Down Expand Up @@ -95,7 +103,7 @@ The default style looks like this:
}

Style attributes
`````````````````
````````````````

A UIStyle is a typed description of available style options.
For the UIFlatButton the supported attributes are:
Expand All @@ -116,7 +124,7 @@ The style attribute is a dictionary, which maps a state like 'normal, 'hover' et
to an instance of UIFlatButton.UIStyle.

Wellknown states
`````````````````
````````````````

======== ======================================================
Name Description
Expand Down Expand Up @@ -192,6 +200,3 @@ Your own stylable widget
# render
if color: # support for not setting a color at all
surface.clear(bg_color)