Für Anwendungsentwickler
React und Next.js
Verwenden Sie den Provider und die Hooks, um eine Laufzeit zu abonnieren. Als nächstes werden die Standardwerte CSS und Bootstrap in die Erstlackierung HTML eingefügt.Montieren Sie einen Anbieter
tsx
import { OriaThemeProvider } from "@oriatheme/react";
import { oriaPresetThemes } from "@oriatheme/presets";
export function Providers({ children }: { children: React.ReactNode }) {
return (
<OriaThemeProvider config={{
presets: oriaPresetThemes,
defaultThemeId: "oria-default",
}}>
{children}
</OriaThemeProvider>
);
}Lesen Sie einen Schnappschuss und ändern Sie Ihre Präferenzen mit Hooks
tsx
import { useOriaTheme, useThemeSnapshot } from "@oriatheme/react";
export function ThemeControls() {
const { setAppearance, setTheme } = useOriaTheme();
const activeId = useThemeSnapshot((snapshot) => snapshot.preference.activeThemeId);
return <button onClick={() => setTheme(activeId === "oria-ocean" ? "oria-default" : "oria-ocean")}>
Switch theme
</button>;
}useThemeSnapshot dient zum Abonnieren eines stabilen Slice; Erstellen Sie keine Laufzeit neu und kopieren Sie ihren Status nicht innerhalb von Komponenten.
Next.js: erster Paint- und On-Demand-Editor
Geben Sie den vertrauenswürdigen Standardwert CSS und ein Bootstrap-Skript in einem Serverkomponentenkopf aus und platzieren Sie dann den Anbieter in einer Clientkomponente. Laden Sie einen geschlossenen lokalen ThemeEditor mit „dynamic(..., { ssr: false })“ und rendern Sie ihn erst, nachdem der Benutzer ihn geöffnet hat.
Weiter: Vue-Integration