Zum Inhalt springen
SCHNELLSTART

Jetzt loslegen

In fünf Minuten startklar. RayCraft.Blazor ist jetzt auf NuGet verfügbar.

Einrichtungsschritte

  1. Ein Projekt anlegen
    Blazor Server, WebAssembly oder Auto auf .NET 10.
  2. Das Paket installieren
    Fügen Sie das NuGet-Paket RayCraft.Blazor hinzu und akzeptieren Sie auf Nachfrage die Lizenz (EULA).
  3. Die Dienste registrieren
    Rufen Sie AddRayCraft() in Program.cs auf, im Server- und im Client-Projekt.
  4. Stile und Skript einbinden
    Binden Sie Stylesheet und Skript in Ihre Seite ein. Die Bibliothek färbt den Seitenhintergrund nicht, legen Sie die Seitenfarben daher mit ihren Tokens fest.
  5. Ein Theme wählen
    Setzen Sie data-raycraft-theme auf dem html-Element als Start-Theme und wechseln Sie später mit RayCraft.setTheme('light') oder RayCraft.setTheme('dark'). Das Skript stellt die gespeicherte Wahl oder das System-Theme wieder her.
  6. Das erste Steuerelement hinzufügen
    Fügen Sie @using RayCraft.Blazor.Components zur Seite hinzu (nicht zu _Imports in der Standardvorlage, wo NavMenu doppelt vorkommt) und nutzen Sie das Steuerelement wie jede Razor-Komponente. Interaktive Steuerelemente brauchen einen interaktiven Render-Modus.
  7. Dialoge und Meldungen
    Nur wenn Sie Dialoge oder Snackbars nutzen, platzieren Sie DialogHost und SnackbarHost einmal in Ihrem Layout.
Dokumentation öffnen
dotnet add package RayCraft.Blazor

// Program.cs (server and client)
builder.Services.AddRayCraft();

<!-- App.razor -->
<html data-raycraft-theme="light">
<link rel="stylesheet" href="_content/RayCraft.Blazor/css/raycraft.css" />
<script src="_content/RayCraft.Blazor/raycraft.js"></script>

/* your own css */
body { background: var(--raycraft-bg); color: var(--raycraft-text); }

@* Counter.razor *@
@using RayCraft.Blazor.Components
@rendermode InteractiveServer

<Button OnClick="Increment">Clicked @count times</Button>

@code {
    private int count;
    private void Increment() => count++;
}

RayCraft Complete

RayCraft Complete kommt aus dem privaten RayCraft-Feed, nicht von nuget.org. Dafür brauchen Sie eine Lizenz (oder die 14-Tage-Testversion) und ein Download-Token aus Ihrem Konto.

  1. Lizenz und Token holen
    Melden Sie sich bei auth.raycraft.dev an, starten Sie die 14-Tage-Testversion (ohne Karte) oder kaufen Sie eine Lizenz, öffnen Sie dann Package access und erstellen Sie ein Token. Setzen Sie es als RAYCRAFT_FEED_TOKEN und RAYCRAFT_FEED_USER auf einen beliebigen nicht leeren Text.
  2. Den Feed hinzufügen
    Legen Sie die hier gezeigte nuget.config neben Ihre Solution. Die Source-Zuordnung sendet die Paketnamen von Complete nur an den RayCraft-Feed.
  3. Die Pakete installieren
    RayCraft.Blazor.Complete enthält die Steuerelemente. RayCraft.Blazor.Complete.Office ergänzt die Steuerelemente für Dokumente, Tabellen, Präsentationen und PDF.
  4. Texterkennung (optional)
    RayCraft.Blazor.Complete.Office.Ocr.Tesseract und sein .Data-Paket erkennen Text in gescannten PDF-Seiten. Sie funktionieren nur unter Windows.
  5. Nicht mit Free mischen
    RayCraft.Blazor (Free) und RayCraft.Blazor.Complete haben dieselben Assembly- und Namespace-Namen. Installieren Sie nie beide in einer Anwendung; tauschen Sie das Paket aus und behalten Sie AddRayCraft().
  6. Ihre eigene Lizenz, Ihre eigenen Versionen
    In Ihrem Code gibt es keinen Lizenzschlüssel. Nach dem Enddatum behalten Sie jede bis dahin veröffentlichte Version. Eine Erstattung ist innerhalb von 7 Tagen nach einem Kauf möglich.
Ihr Konto öffnen
<!-- nuget.config next to your solution -->
<configuration>
  <packageSources>
    <add key="nuget.org" value="https://api.nuget.org/v3/index.json" />
    <add key="raycraft" value="https://nuget.raycraft.dev/v3/index.json" />
  </packageSources>
  <packageSourceCredentials>
    <raycraft>
      <add key="Username" value="%RAYCRAFT_FEED_USER%" />
      <add key="ClearTextPassword" value="%RAYCRAFT_FEED_TOKEN%" />
    </raycraft>
  </packageSourceCredentials>
  <packageSourceMapping>
    <packageSource key="nuget.org"><package pattern="*" /></packageSource>
    <packageSource key="raycraft"><package pattern="RayCraft.Blazor.Complete*" /></packageSource>
  </packageSourceMapping>
</configuration>

dotnet add package RayCraft.Blazor.Complete
dotnet add package RayCraft.Blazor.Complete.Office