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:
solidflatoutlinenone
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">