Unit: SmartCL.Components.pas

Hierarchy

TObject

TW3TagObj

TW3Component

TW3MovableControl

TW3CustomControl

Properties
BorderRadius
BoundsRect
CSSClasses
Enabled
Font
Height
StyleClass
Width
Zoom
Protected Methods
MouseDown
MouseMove
Methods
BringToFront
SendToBack
SetFocus
Events
OnClick
OnDblClick
OnGotFocus
OnKeyDown
OnLostFocus
OnMouseDown
OnResize

Properties

BorderRadius

Specifies borderRadius attribute (border-radius in CSS) of object â€" in pixels unit. This attribute “bevel” all borders of control by specified amount.

property BorderRadius: Integer read getBorderRadius write setBorderRadius;

Initial styling of some controls may include beveled borders (borderRadius > 0), but with this property it may be additionally adjusted.

Example:

BoundsRect

Determine control bounds (Left, Top, Width, Height) as TRect.

property BoundsRect: TRect read getBoundsRect;

CSSClasses

Provide access to additional class names that may be assigned to same control.

Example:

W3Panel1.CSSClasses.Add('button');W3Panel1.CSSClasses.Add('order');

Output:

<div id="OBJ5" class="TW3Panel button order" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 120px; width: 200px; height: 80px;"></div>

See also: TW3CSSClassStyleNames

Enabled

Specifies whether user actions (taps and keyboard input) on component are processed. Component may change appearance if value of property is False.

procedure SetEnabled(aValue: Boolean); virtual;

Font

Specifies font of control. This property is of TW3ControlFont type and include own class members.

property Font: TW3ControlFont read getFont;

Example:

W3Button1.Font.Name:= 'Verdana';
W3Button1.Font.Size:= 24; // in pixels
W3Button1.Font.Weight:= 'bold'; // font-weight value
W3Button1.Font.Color:= clRed;

See also: TW3CustomFont

Height

Specifies vertical size of control.

property Height: Integer read GetHeight write setHeight;

StyleClass

Specifies class attribute of DOM object.

property StyleClass: String read getStyleClass write setStyleClass;

By default every component set class attribute property with same value as class name (e.g. TW3Button), but with this property this can be changed.

<button id="OBJ4" class="TW3Button" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 16px; width: 128px; height: 32px;">W3Button</button>

Example:

W3Button1.StyleClass:= 'round-button';

Output:

<button id="OBJ4" class="round-button" style="visibility: visible; display: inline-block; position: absolute; overflow: hidden; left: 16px; top: 16px; width: 128px; height: 32px;">W3Button</button>

Width

Specifies horizontal size of control.

property Width: Integer read GetWidth write SetWidth;

Zoom

Specifies size multiplication for component (zoom property of DOM object).

property Zoom: Float read getZoom write setZoom;

Setting this property is not same as setting Width and Height properties of component, since all elements of component will be “zoomed” including borders, font, gradients etc.

Example:

W3Panel1.Zoom:= 0.75; // 75%
W3Panel1.Zoom:= 1.5; // 150%

Protected Methods

MouseDown

MouseMove

Methods

BringToFront

Puts the control in front of all other controls in its parent control. It set Control’s Z-index to be largest.

procedure BringToFront;

SendToBack

Puts the control behind of all other controls in its parent control. It set Control’s Z-index to be smallest.

procedure SendToBack;

SetFocus

Call focus() method of DOM object and set component in focused state. Some controls indicate focused state with different appearance.

procedure SetFocus;

See also: OnGotFocus

Events

OnClick

Occurs when user click (tap) on control.

property OnClick: TMouseClickEvent read FOnClick write _setMouseClick;

Remarks:

This event is triggered after onclick event of DOM object is invoked.

OnDblClick

Occur when user double click on control.

property OnDblClick: TMouseDblClickEvent read FOnDblClick write _setMouseDblClick;

Remarks:

This event is triggered after ondblclick event of DOM object is invoked.

It is important to remember that OnDblClick is called after OnClick occur and after small delay. OnClick will be called before each OnDblClick.

See also: OnClick

OnGotFocus

Occurs when control receive focus. Opposite of this event is OnLostFocus event.

property OnGotFocus: TGotFocusEvent read FOnGotFocus write _setGotFocus;

Remarks:

This event is triggered when onfocus event of DOM object is invoked.

See also: SetFocus, OnLostFocus

OnKeyDown

property OnKeyDown: TKeyDownEvent read FOnKeyDown write _setKeyDown;

OnLostFocus

Occurs when control lost focus. Control lose focus when some other control become focused (active).

property OnLostFocus: TLostFocusEvent read FOnLostFocus write _setLostFocus;

Remarks:

This event is triggered when onblur event of DOM object is invoked.

See also: SetFocus, OnGotFocus

OnMouseDown

Occurs when user press mouse button over control.

property OnMouseDown: TMouseDownEvent read FOnMouseDown write _setMouseDown;

This event is triggered when onmousedown event of DOM object is invoked.

OnResize

Occurs when control changed size.

property OnResize: TReSizeEvent read FOnResize write _setResize;

This event is triggered when onresize event of DOM object is invoked.