Appearance
In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET MVC TimePicker.
For a live example, visit the Appearance Demo of the TimePicker.
Options
The TimePicker supports the following styling options:
Size
—configures the overall size of the component.Rounded
—configures the border radius of the component.FillMode
—configures how the color is applied to the component.
Size
@(Html.Kendo().TimePicker()
.Name("timepicker")
.Size(ComponentSize.Medium)
)
The Size
option controls the size of the input of the TimePicker. The k-input-{size}
class, which is applied to the wrapping span element of the TimePicker, reflects the value of the Size
option.
The following values are available for the Size
option:
Small
—small size (applies thek-input-sm
class to the wrapping span element)Medium
—medium size (applies thek-input-md
class to the wrapping span element)Large
—large size (applies thek-input-lg
class to the wrapping span element)None
—unset.
The default size value is Medium
.
<span class="k-timepicker k-input k-input-md">
</span>
Rounded
@(Html.Kendo().TimePicker()
.Name("timepicker")
.Rounded(Rounded.Medium)
)
The Rounded
option controls the border radius of the TimePicker. The class that corresponds to the Rounded
option is k-rounded-{rounded}
.
The following values are available for the Rounded
option:
Small
—small border radius (applies thek-rounded-sm
class to the wrapping span element)Medium
—medium border radius (applies thek-rounded-md
class to the wrapping span element)Large
—large border radius (applies thek-rounded-lg
class to the wrapping span element)Full
—largest (ellipse-like) border radius (applies thek-rounded-full
class to the wrapping span element)None
—unset.
The default value is Medium
.
<span class="k-timepicker k-input k-rounded-md">
</span>
FillMode
@(Html.Kendo().TimePicker()
.Name("timepicker")
.FillMode(FillMode.Solid)
)
The FillMode
option controls how color is applied to the component. The structure of the class is k-input-{fillMode}
.
The following values are available for the FillMode
option:
Solid
—applies thek-input-solid
class to the wrapping span elementFlat
—applies thek-input-flat
class to the wrapping span elementOutline
—applies thek-input-outline
class to the wrapping span elementNone