Appearance
The TimePicker
provides a predefined set of appearance options.
Apart from the default vision of the TimePicker
, these alternative styling options enable you to configure each individual aspect of the component's appearance.
The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:
Configurator demo
The following example demonstrates configuring different aspects of a TimePicker
appearance through a configurator.
Size
The size of the TimePicker
is controlled through its size
property. The values we can pass to the property are as follows:
small
— Sets thepadding
to2px
and8px
.medium
(Default) — Sets thepadding
to4px
and8px
.large
— Sets thepadding
to6px
and8px
.null
— Passingnull
to thesize
property gives us the option to define acustom CSS class
that sets thepadding
of the TimePicker.
The following example demonstrates the usage of each size
option:
Roundness
The roundness of the TimePicker
is controlled through its rounded
property. The values we can pass to the property are as follows:
small
— Sets theborder radius
to1px
.medium
(Default) — Sets theborder radius
to2px
.
large
— Sets theborder radius
to4px
.
full
— Sets theborder radius
to9999px
.null
— Passingnull
to therounded
property gives us the option to define acustom CSS class
that defines theborder-radius
of the TimePicker.
The following example demonstrates the usage of each rounded
option:
Fill Mode
The styling of the TimePicker
is controlled through its fillMode
property. The values we can pass to the property are as follows:
solid
(Default) — Sets abackground
color andsolid borders
.flat
— Setstransparent background and borders
in default state, andbackground color
in focused state.outline
— Sets atransparent background
andsolid borders
.null
— Passingnull
to thefillMode
property gives us the option to define acustom CSS class
that defines thebackground
andborder
of the TimePicker.
The following example demonstrates the usage of each fillMode
option: