@
Blazorise Addon component
Easily extend form controls by adding text, or buttons on either side of textual inputs, custom selects, and custom file inputs.
The <Addon>
component is the easiest way to add some structure to forms. Its purpose is to pair
form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as
visual (color) contextual state feedback.
<Addons>
<Addon>
To define addon location you have to set the AddonType
attribute:
.Start
will place addon on the left side..Body
will place it in the middle..End
will place it at the right side.
Static addon
<Addons> <Addon AddonType="AddonType.Start"> <AddonLabel>@@</AddonLabel> </Addon> <Addon AddonType="AddonType.Body"> <TextEdit Placeholder="Username" /> </Addon> </Addons>
With multiple addons
Addons are used to attach controls together.Start
End
<Addons> <Addon AddonType="AddonType.Start"> <AddonLabel>Start</AddonLabel> </Addon> <Addon AddonType="AddonType.Body"> <TextEdit Placeholder="Placeholder" /> </Addon> <Addon AddonType="AddonType.End"> <AddonLabel>End</AddonLabel> </Addon> </Addons>
Button addon
<Addons> <Addon AddonType="AddonType.Body"> <TextEdit Placeholder="Recipient's username" /> </Addon> <Addon AddonType="AddonType.End"> <Button Color="Color.Secondary">Button</Button> </Addon> </Addons>
Dropdown addon
<Addons> <Addon AddonType="AddonType.Start"> <Dropdown> <DropdownToggle Color="Color.Primary">Dropdown</DropdownToggle> <DropdownMenu> <DropdownItem>Action</DropdownItem> <DropdownItem>Another action</DropdownItem> <DropdownItem>Something else here</DropdownItem> <DropdownDivider /> <DropdownItem>Separated link</DropdownItem> </DropdownMenu> </Dropdown> </Addon> <Addon AddonType="AddonType.Body"> <TextEdit /> </Addon> </Addons>
Attributes
Addons
Name | Description | Type | Default |
---|---|---|---|
Size |
Addons size variations. | Size |
Default |
Addon
Name | Description | Type | Default |
---|---|---|---|
AddonType |
Defines the location and behavior of addon container. | AddonType |
Body |