Page tree
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

The DefaultButton component is your basic button. It can have a text and an icon, and both are optional (although having one or the other is important).

Creating buttons

A button can be created as follows:

add(new DefaultButton("Click me", FaIcon.faHeart, b ->, "Hi, I was clicked!")));

Rendering and styles

The DefaultButton component renders the following structure when both text and icon are present:

<button class="ui-button" type="button>
  <span class="ui-icon">
    <span class="fa fa-heart />
  <span class="ui-btntext">Click me</span>

The button class' rendering was modeled after Bulma's buttons, and the code and styling of the scss steals a lot from there:

There are a few problems to fix still, though:

  • The butons do not properly show navigational state (hover, active, focus mainly).

  • No labels