Core Component Features

Within the Blazor Library, a set of core features is shared across all components. This guide will provide you with a comprehensive understanding of how to effectively utilize these common features. Through this documentation, you will gain insights into the practical application of these shared functionalities, enabling you to harness their capabilities seamlessly.

Attach CSS classes

There are two primary methods for attaching CSS classes to a component: using the Variants parameter or the class HTML attribute. While the Variants parameter offers a dynamic way to add or remove specific CSS classes, the class HTML attribute provides a static yet straightforward method to attach a CSS class.

Attaching CSS Classes Using the Variants Parameter:

Let's consider a BlazorButton component as follows:

<BlazorButton type="button">My Button</BlazorButton>

Blazor Library will render:

<button class="btn" type="button">My Button</button>

The btn class represents the default variant of the BlazorButton. From here, you can attach a Primary variant to the BlazorButton to alter its appearance:

<BlazorButton Variants="new[] { BaseVariants.Primary }" type="button">My Button</BlazorButton>

Blazor Library will then render:

<button class="btn btn-primary" type="button">My Button</button>

Here, btn-primary is the CSS class associated with the BaseVariants.Primary variant.

Attaching CSS Classes Using the class HTML Attribute:

Alternatively, you can attach CSS classes to a component using the class HTML attribute. Consider the following example with a BlazorButton component:

<BlazorButton class="btn-primary" type="button">My Button</BlazorButton>

This will yield the same result as using the BaseVariants.Primary variant:

<button class="btn btn-primary" type="button">My Button</button>

Overriding Component CSS Classes

As you have learned, the BlazorButton component comes with the default btn CSS class. When you wish to forgo the default CSS class of the component, you can set the OverrideComponentCss parameter to true.

For instance, both of the following component tags will render the same result:

<BlazorButton class="my-class" OverrideComponentCss="true" type="button">My Button</BlazorButton>
<BlazorButton class="my-class" OverrideComponentCss="true" Variants="new[] { BaseVariants.Primary }" type="button">My Button</BlazorButton>

Both will render:

<button class="my-class" type="button">My Button</button>

Rendering a Component as Another HTML Tag

Each HTML tag carries its own semantic meaning. At times, you may find the need to render a component within a different HTML tag. If a component features a RenderAs parameter, you can employ it to specify the HTML tag you wish to use for rendering.

Consider a scenario where you desire to create a button link—a link that visually resembles a button while retaining link functionality. This can be achieved as demonstrated below:

<BlazorButton RenderAs="a" href="https://blazorschool.com" Variants="new[] { BaseVariants.Success }">Blazor School</BlazorButton>

Blazor Library will then render the following HTML:

<a href="https://blazorschool.com" class="btn btn-success">Blazor School</a>

In this example, the RenderAs parameter is utilized to render the BlazorButton component as an <a> (anchor) tag, resulting in a link that possesses the visual characteristics of a button while maintaining its hyperlink functionality.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙