TimeDurationPicker Appearance
In this article, you will find information about the styling options of the Telerik UI TimeDurationPicker for ASP.NET MVC.
For a live example, visit the Appearance Demo of the TimeDurationPicker.
Options
The Telerik UI TimeDurationPicker for ASP.NET MVC supports the following styling options:
-
size
—Configures the overall size of the component. -
fillMode
—Configures how the color is applied to the component. -
rounded
—Configures the border radius of the component.
Size
The size
option controls how big or small the rendered input
looks. The structure of the class is k-input-{size}
.
The following values are available for the size
option:
-
sm
—Small size. -
md
—Medium size. -
lg
—Large size. -
none
—Unset.
The default size value is medium
and is applied to the wrapping span
element through the k-input-md
class.
<span class="k-timedurationpicker k-input k-input-md">
</span>
Rounded
The rounded
option controls the border radius of the rendered input
. The structure of the class is k-rounded-{size}
.
The following values are available for the rouned
option:
-
sm
—Small border radius. -
md
—Medium border radius. -
lg
—Large border radius. -
full
—Ellipse-like border radius. -
none
—Unset.
The structure of the class is k-rounded-{size}
.
The default rounded value is medium
and it is applied to the wrapping span
element through the k-rounded-md
class.
<span class="k-timedurationpicker k-input k-rounded-md">
FillMode
The fillMode
option controls the way the color is applied to the rendered input
. The structure of the class is k-input-{fillMode}
The following values are available for the fillMode
option:
solid
flat
outline
none
The default fillMode
value is solid
and it is applied to the wrapping span
element through the k-input-solid
class.
<span class="k-timedurationpicker k-input k-input-solid">