Kom igang

Sa har lagger du till BlazorToolkit i din Blazor-app.

1. Lagg till paketreferens

.csproj

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

2. Lagg till CSS i App.razor

Tema-filen ger alla --btk-* variabler med defaults. Komponent-CSS:erna anvander 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. Lagg till using-direktiv

I din _Imports.razor eller langst upp i enskilda sidor:

_Imports.razor

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

4. Kompilera scheman (for JsonEditor)

JsonEditor kraver att scheman kompileras i ett separat steg, typiskt vid appstart. Kompilatorn laser alla *.schema.json-filer, genererar C#-klasser och returnerar en CompiledSchemaSet.

Program.cs

using BlazorToolkit.Components.JsonEditor.Services;

var builder = WebApplication.CreateBuilder(args);

var schemaPath = Path.Combine(builder.Environment.ContentRootPath, "Schemas");
var schemaSet = await SchemaCompiler.CompileDirectoryAsync(schemaPath);
builder.Services.AddSingleton(schemaSet);

Du kan ocksa kompilera ett enskilt schema fran en JSON-strang:

var schemaSet = await SchemaCompiler.CompileSchemaAsync("person", schemaJson);

5. Teman

Alla komponenter arver appens typsnitt via font-family: inherit. Farger 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 anvand ett inbyggt tema

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

6. Lokalisering

Alla UI-strangar ar konfigurerbara via label-objekt. Default ar 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"
};