Kom igång

Så här lägger du till BlazorToolkit i din Blazor-app.

1. Lägg till paketreferens

.csproj

<PackageReference Include="BlazorToolkit.Components" Version="0.1.0" />

2. Lägg till CSS i App.razor

Tema-filen ger alla --btk-* variabler med defaults. Komponent-CSS:erna använder dem.

App.razor / head

<link rel="stylesheet" href="_content/BlazorToolkit.Components/blazortoolkit-theme.css" />
<link rel="stylesheet" href="_content/BlazorToolkit.Components/json-editor.css" />
<link rel="stylesheet" href="_content/BlazorToolkit.Components/document-viewer.css" />

3. Lägg till using-direktiv

I din _Imports.razor eller längst upp i enskilda sidor:

_Imports.razor

@using BlazorToolkit.Components.JsonEditor
@using BlazorToolkit.Components.JsonEditor.Models
@using BlazorToolkit.Schema
@using BlazorToolkit.Components.JsonViewer
@using BlazorToolkit.Components.XmlViewer
@using BlazorToolkit.Components.Shared.TreeView

4. Kompilera scheman (för JsonEditor)

JsonEditor kräver att scheman kompileras vid design-tid med CLI-verktyget BlazorToolkit.SchemaCompiler. Verktyget genererar .g.cs-filer som checkas in i källkoden.

Terminal — kompilera scheman

dotnet run --project src/BlazorToolkit.SchemaCompiler -- ./Schemas ./Generated MyApp.Schemas

Vid appstart registreras schemat utan asynkrona anrop eller fil-I/O:

Program.cs

using BlazorToolkit.Schema;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton(SchemaRegistryProvider.Create());

5. Teman

Alla komponenter ärver appens typsnitt via font-family: inherit. Färger och spacing styrs av --btk-* CSS-variabler.

Inbyggda teman: Default (ljust), Dark, Corporate, Warm.

Mappa till Bootstrap

:root {
    --btk-primary: var(--bs-primary);
    --btk-danger: var(--bs-danger);
    --btk-font-family: var(--bs-body-font-family);
    --btk-bg: var(--bs-body-bg);
    --btk-text: var(--bs-body-color);
    --btk-border: var(--bs-border-color);
}

Eller använd ett inbyggt tema

<link rel="stylesheet" href="_content/BlazorToolkit.Components/themes/btk-dark.css" />

6. Lokalisering

Alla UI-strängar är konfigurerbara via label-objekt. Default är engelska. Inbyggd svenska finns.

Razor

<JsonEditorComponent Labels="JsonEditorLabels.Swedish" ... />
<JsonViewerComponent Labels="DocumentViewerLabels.Swedish" ... />

Custom labels (franska)

var labels = new JsonEditorLabels
{
    VisualMode = "Formulaire",
    RawMode = "Brut",
    ValidationErrors = "Erreurs de validation",
    Add = "+ Ajouter",
    Remove = "Supprimer"
};