p11 UI
true-perfect-code
Version: 1.1.69

P11FontSize (font size adjuster)

The P11FontSize component provides users with an accessible way to adjust the base font bootstrap sizes of the entire application. It utilizes the injected IThemeService to dynamically update the root CSS bootstrap variables or font size properties of specific bootstrap classes, ensuring all components that rely on rem units 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 P11FontSizeModel variable.

Application examples and current bootstrap font sizes

Component Configuration
Current step size in rem: 0.05
Current layout: Horizontal
Minimum 1rem size: 0.80 rem. (Default: 0.8)
Maximum 1rem size: 1.50 rem. (Default: 1.5)
P11FontSize Live Component
Important: Clicking the buttons immediately updates the CSS variables via the injected theme service. This allows you to see the effects directly in the DOM of the entire page.

Available REM Properties and Current Values

Font (REM Property) Current Size (Calculated rem)
0.75rem 0.750rem
0.875rem 0.875rem
0.9rem 0.900rem
1rem (Base Size) 1.000rem
1.1rem 1.100rem
1.25rem 1.250rem
1.5rem 1.500rem
1.75rem 1.750rem
2rem 2.000rem
2.5rem 2.500rem

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

Implementation

<div class="card p-3 shadow my-4">
    <h5 class="card-title mb-4">@AppState!.T("Component Configuration")</h5>

    <div class="row mb-4 g-4">
        <!-- Input for OffsetFontSize -->
        <div class="col-md-6">
            <label for="offsetInput" class="form-label fw-bold">@AppState!.T("Adjustment Step (OffsetFontSize)")</label>
            <input type="number"
                   id="offsetInput"
                   class="form-control"
                   @bind-value="_currentOffset"
                   @bind-value:event="oninput"
                   step="0.01"
                   min="0.01"
                   max="1.0" />
            <div class="form-text">@AppState!.T("Current step size in rem: ") <code>@_currentOffset.ToString("0.00", System.Globalization.CultureInfo.InvariantCulture)</code></div>
        </div>

        <!-- Selection for ButtonOrientation -->
        <div class="col-md-6">
            <label for="orientationSelect" class="form-label fw-bold">@AppState!.T("Button Orientation")</label>
            <select id="orientationSelect" class="form-select" @bind="_currentOrientation">
                <option value="@ButtonOrientation.Horizontal">@AppState!.T("Horizontal (Default)")</option>
                <option value="@ButtonOrientation.Vertical">@AppState!.T("Vertical (Stacked)")</option>
            </select>
            <div class="form-text">@AppState!.T("Current layout: ") <code>@_currentOrientation.ToString()</code></div>
        </div>
    </div>

    <hr class="mt-0 mb-4" />

    <!-- P11FontSize Component mit dynamischen Werten -->
    <h5 class="mb-3">@AppState!.T("P11FontSize Live Component")</h5>

    <P11FontSize @bind-Value="_myLocalFontSizeModel"
                 OffsetFontSize="@_currentOffset"
                 ButtonOrientation="@_currentOrientation"
                 ButtonVariant="@ButtonVariant.OutlinePrimary"
                 TitleIncrease="@AppState!.T("Increase font size")"
                 TitleReduce="@AppState!.T("Reduce font size")"
                 TitleReset="@AppState!.T("Reset font sizes")" />

    <hr class="mt-4 mb-2" />

    <div class="text-muted small">
        @AppState!.T("Important: Clicking the buttons immediately updates the CSS variables via the injected theme service. This allows you to see the effects directly in the DOM of the entire page.")
    </div>
</div>

<section class="rem-properties-table mt-2">
    <h3 class="h4 mb-2">@AppState!.T("Available REM Properties and Current Values")</h3>
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>@AppState!.T("Font (REM Property)")</th>
                            <th>@AppState!.T("Current Size (Calculated rem)")</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>0.75rem</code></td>
                            <td>@_myLocalFontSizeModel._0_75_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>0.875rem</code></td>
                            <td>@_myLocalFontSizeModel._0_875_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>0.9rem</code></td>
                            <td>@_myLocalFontSizeModel._0_9_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>1rem</code> (Base Size)</td>
                            <td><strong>@_myLocalFontSizeModel._1_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</strong></td>
                        </tr>
                        <tr>
                            <td><code>1.1rem</code></td>
                            <td>@_myLocalFontSizeModel._1_1_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>1.25rem</code></td>
                            <td>@_myLocalFontSizeModel._1_25_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>1.5rem</code></td>
                            <td>@_myLocalFontSizeModel._1_5_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>1.75rem</code></td>
                            <td>@_myLocalFontSizeModel._1_75_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>2rem</code></td>
                            <td>@_myLocalFontSizeModel._2_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                        <tr>
                            <td><code>2.5rem</code></td>
                            <td>@_myLocalFontSizeModel._2_5_rem.ToString("0.000", System.Globalization.CultureInfo.InvariantCulture)rem</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <p class="text-muted small mt-2">@AppState!.T("These values are automatically updated when the font size adjuster above is used.")</p>
</section>            
@code {
    private FontSizeModel _myLocalFontSizeModel = new();

    private double _currentOffset = 0.05;
    private ButtonOrientation _currentOrientation = ButtonOrientation.Horizontal;
}

Component API (P11FontSize)

Parameter Type Default Description
Value / @bind-Value P11FontSizeModel *Required* The Two-Way-Bound model containing the current _1_rem value. This is automatically updated when a button is clicked.
OffsetFontSize double 0.05 Defines the step size in rem units for each increase or decrease action.
MinBaseRem double 0.8 The minimum allowed scale factor for the base 1rem font size. The scaling will stop when _1_rem reaches this value.
MaxBaseRem double 1.5 The maximum allowed scale factor for the base 1rem font size. The scaling will stop when _1_rem reaches this value.
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 Size button.
TitleReduce string? null Optional tooltip text for the Decrease Font Size 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.
An unhandled error has occurred. Reload 🗙