Home Docs

Params

BitParams lets you cascade shared parameter objects to compatible components so you can define common defaults once.

Usage

Basic
Use BitParams to share parameters between child components.

BitText with provided parameters

BitTag with provided parameters
<BitParams Parameters="basicParams">
    <BitCard>
        <BitText>BitText with provided parameters</BitText>
        <br />
        <BitTag>BitTag with provided parameters</BitTag>
    </BitCard>
</BitParams>
@code {
    private readonly List<IBitComponentParams> basicParams =
    [
        new BitCardParams { Background = BitColorKind.Tertiary, FullWidth = true, Style = "padding: 3rem" },
        new BitTagParams { Color = BitColor.Tertiary, Variant = BitVariant.Fill, Size = BitSize.Large },
        new BitTextParams { Typography = BitTypography.H5, Color = BitColor.Secondary, Gutter = true },
    ];
}
Overriding cascaded values
You can override cascaded parameters by setting them directly on the component.

BitText with provided and overriden parameters

BitTag with provided and overriden parameters 
<BitParams Parameters="basicParams">
    <BitCard Style="padding:1rem">
        <BitText Color="BitColor.Primary">
            BitText with provided and overriden parameters
        </BitText>
        <br />
        <BitTag Color="BitColor.Secondary">
            BitTag with provided and overriden parameters
        </BitTag>
    </BitCard>
</BitParams>
@code {
    private readonly List<IBitComponentParams> basicParams =
    [
        new BitCardParams { Background = BitColorKind.Tertiary, FullWidth = true, Style = "padding: 3rem" },
        new BitTagParams { Color = BitColor.Tertiary, Variant = BitVariant.Fill, Size = BitSize.Large },
        new BitTextParams { Typography = BitTypography.H5, Color = BitColor.Secondary, Gutter = true },
    ];
}
Changing parameter values
You can change provided cascading values at runtime.


BitText with provided parameters

BitTag with provided parameters
<BitToggle @bind-Value="useAltParameters" Text="Use alternate parameters" />

<BitParams Parameters="@(useAltParameters? altParams : basicParams)">
    <BitCard>
        <BitText>BitText with provided parameters</BitText>
        <br />
        <BitTag>BitTag with provided parameters</BitTag>
    </BitCard>
</BitParams>
@code {
    private bool useAltParameters;
    
    private readonly List<IBitComponentParams> basicParams =
    [
        new BitCardParams { Background = BitColorKind.Tertiary, FullWidth = true, Style = "padding: 3rem" },
        new BitTagParams { Color = BitColor.Tertiary, Variant = BitVariant.Fill, Size = BitSize.Large },
        new BitTextParams { Typography = BitTypography.H5, Color = BitColor.Secondary, Gutter = true },
    ];
    
    private readonly List<IBitComponentParams> altParams =
    [
        new BitCardParams { Background = BitColorKind.Tertiary, FullWidth = false, Style = "padding: 1rem" },
        new BitTagParams { Color = BitColor.Secondary, Variant = BitVariant.Outline, Size = BitSize.Small },
        new BitTextParams { Typography = BitTypography.H4, Color = BitColor.Primary, Gutter = true },
    ];
}
Nesting Params
Inner BitParams can override or extend outer defaults for a scoped area.

Outer defaults

These tags use the parent BitParams values.

Global
Team
Nested overrides

Inner BitParams changes colors and variants for this scope.

Alert
Highlight
<BitParams Parameters="nestedParentParams">
    <BitCard Style="padding:1rem">
        <BitText Typography="BitTypography.H6">Outer defaults</BitText>
        <BitText>These tags use the parent BitParams values.</BitText>
        <BitTag IconName="@BitIconName.Globe">Global</BitTag>
        <BitTag IconName="@BitIconName.People">Team</BitTag>

        <BitParams Parameters="nestedChildParams">
            <BitCard Style="margin-top: 0.75rem; padding: 0.75rem">
                <BitText Typography="BitTypography.H6">Nested overrides</BitText>
                <BitText>Inner BitParams changes colors and variants for this scope.</BitText>
                <BitTag IconName="@BitIconName.Warning">Alert</BitTag>
                <BitTag IconName="@BitIconName.FavoriteStar">Highlight</BitTag>
            </BitCard>
        </BitParams>
    </BitCard>
</BitParams>
@code {
    private readonly List<IBitComponentParams> nestedParentParams =
    [
        new BitCardParams { Background = BitColorKind.Tertiary, FullWidth = true, Style = "padding: 1rem" },
        new BitTagParams { Color = BitColor.Primary, Variant = BitVariant.Outline, Size = BitSize.Medium },
        new BitTextParams { Typography = BitTypography.Body2, Color = BitColor.PrimaryForeground }
    ];
    
    private readonly List<IBitComponentParams> nestedChildParams =
    [
        new BitCardParams { Background = BitColorKind.Secondary, FullWidth = true, Style = "padding: 0.75rem" },
        new BitTagParams { Color = BitColor.Warning, Variant = BitVariant.Fill, Size = BitSize.Small },
        new BitTextParams { Typography = BitTypography.Body2, Color = BitColor.Warning }
    ];
}

API

BitParams parameters
Name
Type
Default value
Description
ChildContent RenderFragment? null The content to which the values should be provided.
Parameters IEnumerable<IBitComponentParams>? null List of parameters to provide for the children components.
IBitComponentParams properties
Defines the contract for parameters that can be cascaded by BitParams.
Name
Type
Default value
Description
Name string Gets the name associated with the current instance of BitComponentParams.
BitComponentBaseParams properties
Base class shared by BitParams models to map BitComponentBase defaults.
Name
Type
Default value
Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
HtmlAttributes Dictionary<string, object>? null Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool? true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility? null Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page