P11 Blazor UI Library – Bootstrap 5.3 Components

P11FontSpacing (Letter Spacing Adjuster)

The P11FontSpacing component provides users with an accessible way to adjust the base **letter spacing** (tracking) of the application's text. It operates by dynamically updating the root CSS variable --p11-letter-spacing via the injected IThemeService, ensuring a consistent application of the spacing adjustments across all dependent text elements.

This component is designed for **Two-Way-Binding** (@bind-Value) of a double value, which represents the current spacing in em units. Each click typically changes the spacing by 0.05em.

Application example and current letter spacing

Mit den folgenden Schaltflächen können Sie den Buchstabenabstand erhöhen oder verringern. Die Änderungen werden sofort auf das gesamte Element mit dem Selektor angewendet (dank der CSS-Variable --p11-letter-spacing ).

Component Configuration

Button Orientation

Current layout: Horizontal

P11FontSpacing Live Component

Current value (EM): 0.00em

Implementation

<h5 class="card-title mb-4">Component Configuration</h5>

<div class="row mb-4 g-4">
    <!-- Selection for ButtonOrientation -->
    <div class="col-md-6">
        <label for="orientationSelectSpacing" class="form-label fw-bold">Button Orientation</label>
        <select id="orientationSelectSpacing" 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" />

<!-- P11FontSpacing Component mit dynamischen Werten -->
<h5 class="mb-3">P11FontSpacing Live Component</h5>
<P11FontSpacing @bind-Value="_currentSpacingValue"
                ButtonOrientation="@_currentOrientation"
                ButtonVariant="@ButtonVariant.Primary"
                TitleIncrease="Increase Letter Spacing by 0.05em"
                TitleReduce="Reduce Letter Spacing by 0.05em"
                TitleReset="Reset Letter Spacing to 0.0em" />

<hr class="mt-4 mb-2" />
<div class="text-muted small">
    Current value (EM):
    <code class="fw-bold fs-5 text-success">@(_currentSpacingValue.ToString("F2", System.Globalization.CultureInfo.InvariantCulture))em</code>
</div>

@code {
    private double _currentSpacingValue = 0.0;

    private ButtonOrientation _currentOrientation = ButtonOrientation.Horizontal;
}

Component API (P11FontSpacing)

Parameter	Type	Default	Description
`Value` / `@bind-Value`	`double`	`MinSpacing` (e.g. 0.0)	The Two-Way-Bound model containing the current letter spacing value in `em`. This is automatically updated when a button is clicked.
`ValueChanged`	`EventCallback<double>`		Event callback that is triggered when the spacing value is changed by the user.
`IconClassIncrease`	`string`	`bi bi-plus-square-fill fs-3`	The optional CSS class for the Increase button icon.
`IconClassReduce`	`string`	`bi bi-dash-square-fill fs-3`	The optional CSS class for the Decrease button icon.
`IconClassReset`	`string`	`bi bi-arrow-clockwise`	The optional CSS class for the Reset button icon.
`TitleIncrease`	`string`	`"Abstand erhöhen (Letter Spacing)"`	Optional tooltip text for the Increase Letter Spacing button.
`TitleReduce`	`string`	`"Abstand verringern (Letter Spacing)"`	Optional tooltip text for the Decrease Letter Spacing button.
`TitleReset`	`string`	`"Abstand zurücksetzen"`	Optional tooltip text for the Reset to Default button.
`TextIncrease`	`string?`	`string.Empty`	Optional text label to display on the Increase button.
`TextReduce`	`string?`	`string.Empty`	Optional text label to display on the Decrease button.
`ButtonVariant`	`ButtonVariant`	`ButtonVariant.None`	The Bootstrap style/variant for the increase and decrease buttons.
`ButtonVariantReset`	`ButtonVariant`	`ButtonVariant.None`	The Bootstrap style/variant for the dedicated Reset button.
`ButtonOrientation`	`ButtonOrientation`	`ButtonOrientation.Horizontal`	Determines the layout of the buttons, either `Horizontal` (side-by-side) or `Vertical` (stacked).
`GapSize`	`int`	`2`	The spacing between the buttons, based on the Bootstrap gap utilities (e.g., `gap-2`). Range: 0-5.
`CssClass`	`string?`	`null`	Optional CSS class to be applied to the main wrapper `div` of the component for custom styling/layout overrides.