Appearance
In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core FloatingActionButton.
For a complete example, refer to the Appearance Demo of the FloatingActionButton.
Options
The FloatingActionButton component provides the following options for styling:
-
Size()—Configures the size of the component. -
FillMode()—Defines how the color is applied to the button. -
ThemeColor()—Sets the color applied to the component. -
Rounded()—Determines the border radius of the component.
Size
To control the size of the FloatingActionButton, configure the Size option with any of the following values:
Small-
Medium(the default size) LargeNone
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Size(FloatingActionButtonSize.Large)
.Icon("home")
.Text("Home")
)
<kendo-floatingactionbutton name="fab"
size="FloatingActionButtonSize.Large"
icon="home"
text="Home">
</kendo-floatingactionbutton>
FillMode
The FillMode() method specifies how the color is applied to the component. The default fill mode of the FloatingActionButton is Solid.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.FillMode(FloatingActionButtonFillMode.Solid)
.Icon("home")
.Text("Home")
)
<kendo-floatingactionbutton name="fab"
fill-mode="FloatingActionButtonFillMode.Solid"
icon="home"
text="Home">
</kendo-floatingactionbutton>
ThemeColor
The ThemeColor configuration provides a variety of colors that can be applied to the component. The available options are:
PrimarySecondaryTertiaryInfoSuccessWarningErrorDarkLightInverseNone
The default ThemeColor is Primary.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.ThemeColor(FloatingActionButtonThemeColor.Secondary)
.Icon("home")
.Text("Home")
)
<kendo-floatingactionbutton name="fab"
theme-color="FloatingActionButtonThemeColor.Secondary"
icon="home"
text="Home">
</kendo-floatingactionbutton>
Rounded
The border radius of the FloatingActionButton can be customized through the Rounded() method. The default option is Full.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Rounded(FloatingActionButtonRounded.Large)
.Icon("home")
.Text("Home")
)
<kendo-floatingactionbutton name="fab"
rounded="FloatingActionButtonRounded.Large"
icon="home"
text="Home">
</kendo-floatingactionbutton>
The following values are available for the Rounded option:
SmallMediumLargeFullNone
Rendering
Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the Components Rendering Overview article.
To review the latest rendering of the component, refer to the HTML specifications in the Kendo UI Themes Monorepo. The tests folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.
Best Practices
The Material Design guidelines dictate that:
When you configure the FloatingActionButton to display additional related actions (speed dial actions), you must configure only an icon for the button without a label. Use labels to display additional information for the related actions.
If the application requires an icon and a label for the FloatingActionButton, consider omitting the additional actions.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Icon("plus")
.Text("Add To Cart")
)
<kendo-floatingactionbutton name="fab"
icon="plus"
text="Add To Cart">
</kendo-floatingactionbutton>
Icons
The Icon() configuration option accepts a name of an icon. The specified icon must be available in the used Kendo UI theme. For more details on the available icons, refer to the Web Components Icons font.
@(Html.Kendo().FloatingActionButton()
.Name("fab")
.Icon("plus")
.Items(items=>{
items.Add().Icon("star").Label("Add Rating");
items.Add().Icon("pencil").Label("Add comment");
})
)
<kendo-floatingactionbutton name="fab" icon="plus">
<floatingactionbutton-items>
<floatingactionbutton-item label="Add Rating" icon="star"></floatingactionbutton-item>
<floatingactionbutton-item label="Add Comment" icon="edit"></floatingactionbutton-item>
</floatingactionbutton-items>
</kendo-floatingactionbutton>