Sign in Join
Wiki copytemporary

Material Design: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: Material Design

OldNewLine
1+# Material Design
2+
3+Material Design Components for Lazarus, painted with BGRABitmap. Licensed as LGPL v3. 2018 by Lainz.
4+
5+[Download](https://github.com/bgrabitmap/materialdesign)
6+
7+# MDButton
8+
9+This control can act as a normal button, toggle, toggle group, checkbox and radiobutton.
10+
11+## Getting Started
12+
13+Drop a MDButton from the Material Design component pallete. By default it has no animation and the colors of a basic Material Design button. You can set the properties you need, listed below.
14+
15+### Properties
16+
17+- **Animation**: show or not the ripple effect. Default value: false.
18+- **Checked**: used with any mode, it shows the button "down" state, and aditionally a glyph (radio button glyph or checkbox glyph). Default value: false.
19+- **Kind**: it allows you to select the behaviour of the control (normal, toggle, toggle group, checkbox, radiobutton and tab).
20+- **Style**: Normal, Hover, Active and Disabled colors for button and text.
21+
22+### Kind
23+
24+You can use this button with other control functionality like checkbox and radiobutton.
25+
26+#### CheckBox mode
27+
28+With this mode, you can select (Checked: true), unselect, invert selection and get selected controls in a group. It's better than you group in a regular TPanel all checkbox buttons.
29+
30+#### RadioButton mode
31+
32+Whit this mode, you can select (Checked: true) only one button at a time. You can get the selected control with the method GetSelected explained below. It's better than you group in a regular TPanel all radio buttons.
33+
34+#### Toggle mode
35+
36+Like CheckBox mode, but no glyph is added.
37+
38+#### Toggle Group mode
39+
40+Like RadioButton mode, but no glyph is added.
41+
42+#### Tab mode
43+
44+You can use it like a tab button, to choose only one at a time, and has an animation when you select it.
45+
46+### Methods
47+
48+These methods works when a set of MDButton are grouped (better on a Panel). Just call the method on any of the controls in the group. * **SelectAll**: set all controls Checked property to true. Used when "Kind" property is toggle group or checkbox. * **UnselectAll**: set all controls Checked property to false. Used when "Kind" property is toggle group or checkbox. * **InvertSelection**: set all controls Checked property to the opposite. Used when "Kind" property is toggle group or checkbox. * **GetSelected**: returns a TStringList containing the caption and the MDButton (Objects) that has the property Checked set to true.
49+
50+### Globals
51+
52+- **Animate only one button at a time**: with this define, you can limit the number of animations being played at the same time in the whole application for all MDButton controls. Enabled by default.
53+ ``` pascal
54+ {$DEFINE MDBUTTON_ANIMATEONLYONE}
55+ ```
56+- **CheckBox and RadioButton glyphs**: you can change in the source of MDButton or by code the next global variables. Notice that the font you use must have these glyphs in each target OS. Modern OS should already have them.
57+ ``` pascal
58+ var
59+ MDBUTTONBALLOTBOX: string = '✗';
60+ MDBUTTONBALLOTBOXWITHCHECK: string = '✓';
61+ MDBUTTONRADIOBUTTON: string = '🔘';
62+ MDBUTTONRADIOBUTTONCIRCLE: string = '◯';
63+ ```
64+
65+---
66+*From the Free Pascal wiki, page "Material Design", as it stood on 2020-05-06 after a change by FTurtle, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
67+Category: Components

Back to history