themeColorString
(default: "primary")
Specifies the theme color of the component. Valid options are:
inherit
: no coloring will be applied to the badge. Useful when the badge needs to blend-in with the surrounding elements.default
: apply coloring based on surface theme color.primary
: apply coloring based on primary theme color.secondary
: apply coloring based on secondary theme color.tertiary
: apply coloring based on tertiary theme color.info
: apply coloring based on info theme color.success
: apply coloring based on success theme color.warning
:apply coloring based on warning theme color.error
: apply coloring based on error theme color.dark
: apply coloring based on dark theme color.light
: always coloring based on light theme color.inverse
: depending on the luminance of the theme, light or dark, inverted will be dark or light.
Example
<nav id="bottomnav"></nav>
<script>
$("#bottomnav").kendoBottomNavigation({
themeColor: "dark",
items: [
{ text: "Home", icon: "home" },
{ text: "Info", icon: "info-circle" },
{ text: "Contact", icon: "envelope" }
]
});
</script>
In this article