Skip to content

Commit

Permalink
Proofreading fixes for GUI style doc (#1941)
Browse files Browse the repository at this point in the history
* Improve phrasing in GUI style intro
  • Loading branch information
pushfoo committed Feb 27, 2024
1 parent 289fbad commit d1d7081
Showing 1 changed file with 26 additions and 21 deletions.
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)

0 comments on commit d1d7081

Please sign in to comment.