P11 Blazor UI Library – Bootstrap 5.3 Components

P11FontLineheight (Line Height Adjuster)

The P11FontLineheight component provides users with an accessible way to adjust the base **line height** (row spacing) of the application's text. It uses unitless values, which are the recommended standard for web accessibility. The changes dynamically update the root CSS variable --p11-line-height via the injected IThemeService.

This component is best used with the **Two-Way-Binding** feature (@bind-Value), which automatically synchronizes the component's internal state (a double unitless value) with the parent component.

Application example and current line height

Mit den folgenden Schaltflächen können Sie die Linienhöhe erhöhen oder verringern. Die Anpassung erfolgt über die CSS-Variable --p11-line-height , die die Zeilenhöhe des gesamten Textes im Dokument steuert.

Component Configuration

Button Orientation

Current layout: Horizontal

P11FontLineheight Live Component

Current Value (Unitless): 1.50

Implementation

<h5 class="card-title mb-4">Component Configuration</h5>

<div class="row mb-4 g-4">
    <div class="col-md-6">
        <label for="orientationSelectLineHeight" class="form-label fw-bold">Button Orientation</label>
        <select id="orientationSelectLineHeight" 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">P11FontLineheight Live Component</h5>
<P11FontLineheight @bind-Value="_currentLineHeightValue"
                    ButtonOrientation="@_currentOrientation"
                    ButtonVariant="@ButtonVariant.OutlinePrimary"
                    TitleIncrease="Increase Line Height"
                    TitleReduce="Decrease Line Height"
                    TitleReset="Reset Line Height" />

<hr class="mt-4 mb-2" />
<div class="text-muted small">
    Current Value (Unitless):
    <code class="fw-bold fs-5 text-primary">@(_currentLineHeightValue.ToString("F2", System.Globalization.CultureInfo.InvariantCulture))</code>
</div>

@code {
    private double _currentLineHeightValue = 1.5;

    private ButtonOrientation _currentOrientation = ButtonOrientation.Horizontal;
}

Component API (P11FontLineheight)

Parameter	Type	Default	Description
`Value` / `@bind-Value`	`double`	`DefaultLineHeight` (e.g. 1.5)	The Two-Way-Bound value containing the current unitless line height. This is automatically updated when a button is clicked.
`ValueChanged`	`EventCallback<double>`	N/A	Event callback that is triggered when the line height value is changed by the user.
`IconClassIncrease`	`string`	`bi bi-arrows-expand fs-3`	The optional CSS class for the Increase button icon (usually representing expansion).
`IconClassReduce`	`string`	`bi bi-arrows-collapse fs-3`	The optional CSS class for the Decrease button icon (usually representing compression).
`IconClassReset`	`string`	`bi bi-arrow-clockwise`	The optional CSS class for the Reset button icon.
`TitleIncrease`	`string`	`"Linienhöhe erhöhen (Line Height)"`	Optional tooltip text for the Increase Line Height button.
`TitleReduce`	`string`	`"Linienhöhe verringern (Line Height)"`	Optional tooltip text for the Decrease Line Height button.
`TitleReset`	`string`	`"Linienhöhe 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.