JetBrains IDE-Plugin
Flexible for Base UI: Vervollständigung und Live-Vorschau
Vervollständigen Sie Base-UI-Komponenten und Subkomponenten in JSX und TSX, mit Auto-Import, Hover-Doku und einem Komponenten-Browser mit Live-Vorschau.
IntelliJ IDEA · PyCharm · WebStorm · CLion · + Alle JetBrains IDEs (2023.3+)
- 37
- Komponenten und 4 Utilities im Browser
- Auto-Import
- Bei jeder übernommenen Vervollständigung
- Hover
- Props, Subkomponenten und Beispiele
01
Intelligente Vervollständigung und Auto-Import
Tippen Sie
< in einer JSX- oder TSX-Datei und vervollständigen Sie jede Base-UI-Komponente und Subkomponente. Punkt-Namen wie Accordion.Root, Select.Trigger und Dialog.Portal funktionieren ebenfalls.- Beim Übernehmen einer Vervollständigung ergänzt oder aktualisiert das Plugin den Import aus
@base-ui-components/react - Funktioniert in
.tsx-,.jsx-,.ts- und.js-Dateien
02
Komponenten-Browser
Ein visueller Browser in der rechten Seitenleiste listet alle 37 Komponenten und 4 Utilities.
- Filtern Sie nach Kategorie: Form/Input, Navigation/Layout, Display/Overlay, Data Display
- Filtern Sie per Live-Suche nach Namen
- Ziehen Sie eine Komponente in den Editor, und der Import wird ergänzt
- Kopieren Sie den Code-Schnipsel mit einem Klick
03
Live-Vorschau
Sehen Sie eine gerenderte Vorschau jeder Komponente im Werkzeugfenster. Wechseln Sie zwischen hellem und dunklem Vorschau-Theme. Die Vorschau aktualisiert sich, wenn Sie eine andere Komponente wählen.
04
Hover-Dokumentation und Props
Fahren Sie über ein Base-UI-Tag oder drücken Sie F1 oder Strg+Q für die volle Dokumentation. Klicken Sie im Browser auf eine Komponente, um dieselben Details in einem Panel zu sehen.
- Jede Prop mit Typ, Pflicht- oder optionalem Status und Standardwert
- Alle Subkomponenten der Komponente
- Typische Verwendungsbeispiele
- Ein Link zur offiziellen Seite auf base-ui.com
05
Gutter-Symbole und Einstellungen
Neben Base-UI-Imports erscheinen Symbole im Editor-Gutter. Ein Klick öffnet die offizielle Dokumentation der Komponente im Browser.
Konfigurieren Sie das Plugin unter Settings > Tools > Flexible For Base UI. Sie schalten Vervollständigung, Dokumentation, Line Markers und Live-Vorschau einzeln ein oder aus oder deaktivieren das ganze Plugin mit einem Schalter.
Einfache, transparente Preise
Flexible for Base UI ist ein Einmalkauf. Der Kauf erfolgt über den JetBrains Marketplace.
Einzelperson
Für Solo-Entwickler
$9.90einmalig
Einmalige Zahlung über den JetBrains Marketplace
- Base-UI-Komponenten und Subkomponenten vervollständigen
- Auto-Import bei jeder Vervollständigung
- Hover-Doku mit Props und Beispielen
- Komponenten-Browser mit Live-Vorschau
TEAMS
Organisation
Für Teams und Unternehmen
$19.90einmalig
Einmalige Zahlung über den JetBrains Marketplace
- Alles aus Einzelperson
- Für Teams und Unternehmen
- Einmalkauf ohne Abo
- Kauf über den JetBrains Marketplace
Open-Source-Mitwirkende und Einzelentwickler: Kontaktieren Sie uns für Rabatte. Wir unterstützen die Community.