PERGOLA LOGO

Buttons

View as standalone SVG

The configuration of a button gives full control over its aspect and functionality. You can override the default shape (<rect>) with a library shape, or any shape defined on the fly, with a <path> for example. Buttons can take symbols, images, text and quick-tips. Special buttons like ToolButton, DialogButton, CommandButton, and WindowTab are subclasses of pergola.Button and are shown in their respective examples.

The User Functions and Events mechanism implemented in all the low level component classes, together with the possibility of overriding properties and methods, allows the addition of accessibility extensions by developers with the right know how. They may also find interesting the possibility of defining a global accessibility skin.

HOW

In this example a <g> element is first defined as container for the buttons:

Instantiation of a simple button:

Note: the initial value of the inherited property parent is a reference to the pergola.user layer (system classes override it to pergola.system, a higher ranking layer).

In the code below you can see the use of the properties extra, an object where we can set properties (SVG attributes) not defined in the prototype, and text, a property that mutates to become a reference to the text element. Note how the SVG vocabulary and grammar is used for properties and sub-elements that have an equivalence, while only those objects/components which don't have an equivalence, like quickTip for example, have a proprietary specification. This approach is consistent throughout the library:

In the following example you can see the use of the properties image and symbol. The physical structure of a button consists of a <g> element containing two equal elements (<rect> by default) assigned to the mask and button properties, then the symbol and the image are stacked on top. The variety of effects is not just for fancy stuff, it can be controlled for accessibility: