RouteLink

in namespace DotVVM.Framework.Controls.Bootstrap4

Extends the built-in RouteLink control to allow applying Bootstrap CSS classes to the link.

Usage & Scenarios

Extends the builtin RouteLink control to allow using Bootstrap button CSS classes.

https://getbootstrap.com/docs/4.3/components/buttons/

Sample 1: RouteLink Sizing

Use the Size property to set the size of the link.

<bs:RouteLink RouteName="RouteLink_sample1"
              Text="Button" />

<bs:RouteLink RouteName="RouteLink_sample1" 
              Text="Button" 
              Size="Large" />

<bs:RouteLink RouteName="RouteLink_sample1"
              Text="Button" 
              Size="Small" />

Sample 2: RouteLink Types

The Type property specifies the color of the link (using standard Bootstrap classes).

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Primary"
              Type="Primary" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Secondary"
              Type="Secondary" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Success"
              Type="Success" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Danger"
              Type="Danger" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Warning"
              Type="Warning" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Info"
              Type="Info" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Light"
              Type="Light" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Dark"
              Type="Dark" />

<bs:RouteLink RouteName="RouteLink_sample2"
              Text="Link"
              Type="Link" />

Sample 3: RouteLink VisualStyle

The VisualStyle property allows to switch between button with solid fill and outline buttons.

<bs:RouteLink RouteName="RouteLink_sample3"
                Text="Solid Fill"
                Type="Primary"
                VisualStyle="SolidFill" />

<bs:RouteLink RouteName="RouteLink_sample3"
                Text="Outline"
                Type="Primary"
                VisualStyle="Outline" />

Sample 4: Block RouteLink

To make the link behave like a block element, use the IsBlockButton property.

<bs:RouteLink RouteName="RouteLink_sample4"
              Text="Solid Fill"
              Type="Primary"
              IsBlockButton="true" />

Properties

Name Type Description Notes Default Value
property icon Enabled Boolean
attribute
inner element
static value
bindable
default
True
property icon IsBlockButton Boolean Gets or sets whether the button should be styled as a block element.
attribute
inner element
static value
bindable
default
False
property icon RouteName String Gets or sets the name of the route in the route table.
attribute
inner element
static value
bindable
default
null
property icon Size Size Gets or sets the size of the button.
attribute
inner element
static value
bindable
default
Default
property icon Text String Gets or sets the text of the hyperlink.
attribute
inner element
static value
bindable
default
property icon Type BootstrapButtonColor Gets or sets the color of the button.
attribute
inner element
static value
bindable
default
Primary
property icon UrlSuffix String Gets or sets the suffix that will be appended to the generated URL (e.g. query string or URL fragment).
attribute
inner element
static value
bindable
default
null
property icon VisualStyle ButtonVisualStyle Gets or sets whether the button has solid fill, or whether it is only an outline.
attribute
inner element
static value
bindable
default
SolidFill

HTML produced by the control