Appearance
The DateInput
provides a predefined set of appearance options.
Apart from the default vision of the DateInput
, 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 DateInput
appearance through a configurator.
Size
The size of the DateInput
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 DateInput.
The following example demonstrates the usage of each size
option:
Roundness
The roundness of the DateInput
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 DateInput.
The following example demonstrates the usage of each rounded
option:
Fill Mode
The styling of the DateInput
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 DateInput.
The following example demonstrates the usage of each fillMode
option: