P11 Blazor UI Library – Bootstrap 5.3 Components

P11FontWeight (font weight adjuster)

The P11FontWeight component provides users with an accessible way to adjust the base font weight of the entire application. It utilizes the injected IThemeService to dynamically update the root CSS variable --p11-font-weight and --bs-body-font-weight, ensuring all components and text elements that rely on the base font weight scale correctly.

This component is best used with the Two-Way-Binding feature (@bind-Value), which automatically synchronizes the component's internal state with the parent component's P11FontWeightModel variable.

Application example and current font weight

Component Configuration

Button Orientation

Current layout: Horizontal

P11FontWeight Live Component

Important: Clicking the buttons immediately updates the CSS variable '--p11-font-weight' (and '--bs-body-font-weight') via the theme service. This allows you to see the effects directly across the entire page.

Available Font-Weight Properties and Current Values

Weight Level	Current Value	CSS Class
Thin	100	`.fw-thin` (100)
Extra Light	200	`.fw-extralight` (200)
Light	300	`.fw-light` (300)
Normal (Base)	400	`.fw-normal` (400) / `body`
Medium	500	`.fw-medium` (500)
Semi Bold	600	`.fw-semibold` (600)
Bold	700	`.fw-bold` (700)
Extra Bold	800	`.fw-extrabold` (800)
Black	900	`.fw-black` (900)

These values are automatically updated when the font weight adjuster above is used.

Implementation

<div class="row mb-4 g-4">
    <div class="col-md-6">
        <label for="orientationSelectWeight" class="form-label fw-bold">Button Orientation</label>
        <select id="orientationSelectWeight" class="form-select" @bind="_currentOrientation">
            <option value="@ButtonOrientation.Horizontal">Horizontal (Default)</option>
            <option value="@ButtonOrientation.Vertical">Vertical (Stacked)</option>
        </select>
        <div class="form-text">Current layout: <code>@_currentOrientation.ToString()</code></div>
    </div>
</div>

<hr class="mt-0 mb-4" />

<h5 class="mb-3">P11FontWeight Live Component</h5>
<P11FontWeight @bind-Value="_myLocalFontWeightModel"
               ButtonOrientation="@_currentOrientation"
               ButtonVariant="@ButtonVariant.OutlinePrimary"
               TitleIncrease="Increase font weight"
               TitleReduce="Reduce font weight"
               TitleReset="Reset font weights" />

<hr class="mt-4 mb-2" />
<div class="text-muted small">
    Important: Clicking the buttons immediately updates the CSS variable '--p11-font-weight' (and '--bs-body-font-weight') via the theme service. This allows you to see the effects directly across the entire page.
</div>

@code {
    private FontWeightModel _myLocalFontWeightModel = new();
    private ButtonOrientation _currentOrientation = ButtonOrientation.Horizontal;
}

Component API (P11FontWeight)

Parameter	Type	Default	Description
`Value` / `@bind-Value`	`P11FontWeightModel`	Required	The Two-Way-Bound model containing the current font weight values. This is automatically updated when a button is clicked.
`ButtonVariant`	`ButtonVariant`	`ButtonVariant.Primary`	The Bootstrap style/variant for the increase and decrease buttons (e.g., Primary, OutlineSecondary, etc.).
`ButtonOrientation`	`ButtonOrientation`	`ButtonOrientation.Horizontal`	Determines the layout of the buttons, either `Horizontal` (side-by-side) or `Vertical` (stacked).
`GapSize`	`int`	`3`	The spacing between the buttons, based on the Bootstrap gap utilities (e.g., `gap-3`). Range: 0-5.
`TitleIncrease`	`string?`	`null`	Optional tooltip text for the Increase Font Weight button.
`TitleReduce`	`string?`	`null`	Optional tooltip text for the Decrease Font Weight button.
`TitleReset`	`string?`	`null`	Optional tooltip text for the Reset to Default button.
`ResetButtonIcon`	`string?`	`null`	The optional CSS class for the Reset button icon (e.g., `bi-arrow-counterclockwise`). If not provided, the reset button displays 'Reset'.
`ResetButtonVariant`	`ButtonVariant`	`ButtonVariant.Secondary`	The Bootstrap style/variant for the dedicated Reset button.
`CssClass`	`string?`	`null`	Optional CSS class to be applied to the main wrapper `div` of the component for custom styling/layout overrides.
Inherited Parameters
`Id`	`string?`	`null`	The optional unique ID for the component's root element.
`IsDisabled`	`bool`	`false`	When set to `true`, the component will be displayed in a disabled state, preventing user interaction.