JetBrains IDE-Plugin

Flexible for Mantine: Vervollständigung und Drag and Drop

Vervollständigen Sie Mantine-Props und ziehen Sie Komponenten aus einem Browser mit Live-Vorschau in Ihren Code. Die Imports erledigt das Plugin.

Auf dem Marketplace holen Preise ansehen

IntelliJ IDEA · PyCharm · WebStorm · CLion · + Alle JetBrains IDEs (2023.3+)

Props: Vervollständigung mit Typen und Enum-Werten
Browser: Drag and Drop mit Live-Vorschau
Imports: Automatisch eingefügt und zusammengeführt

Intelligente Vervollständigung

Drücken Sie Strg+Leertaste in einem Mantine-Tag, um Props mit Typen und Beschreibungen zu vervollständigen.

Enum-Werte: Tippen Sie variant=" und sehen Sie filled, light, outline, subtle, default, gradient und mehr
Mantine-Typen: MantineColor, MantineSize, MantineRadius und MantineSpacing
Compound-Komponenten wie Tabs.Tab, Menu.Item und Accordion.Panel
Import-Pfade: Tippen Sie from "@mantine/, um die Pakete und ihre Exporte zu sehen

Komponenten-Browser

Das Werkzeugfenster Mantine Components gruppiert alle Komponenten nach Funktion.

Suchen Sie über alle Komponenten und Hooks
Doppelklick oder Enter fügt eine Komponente am Cursor ein
Ziehen Sie eine Komponente in den geöffneten Editor
Nutzen Sie Copy Code und Copy Import für die Zwischenablage

Das Werkzeugfenster Mantine Components mit einer Suche nach card, der HoverCard-Komponente in der Vorschau und den Buttons Insert at Caret, Copy Code und Copy Import

Live-Vorschau und unterstützte Pakete

Jede Komponente hat eine Live-Vorschau mit Umschalter für Dark und Light Mode. Der Browser deckt diese Pakete ab:

@mantine/core, @mantine/hooks und @mantine/dates
@mantine/charts, @mantine/notifications und @mantine/spotlight
@mantine/carousel, @mantine/dropzone, @mantine/code-highlight und @mantine/tiptap

Ein Balkendiagramm aus dem Mantine-Charts-Paket in der dunklen Vorschau des Werkzeugfensters Mantine Components

Hover-Dokumentation

Drücken Sie Strg+Q (F1 auf macOS) oder fahren Sie über ein Mantine-Komponenten-Tag, um die Dokumentation zu sehen.

Der Browser zeigt für die gewählte Komponente dieselbe Props-Liste und ein Codebeispiel.

Eine Props-Tabelle mit Typ, Standardwert und erlaubten Werten
Ein Badge für das @mantine/*-Paket der Komponente
Ein Link zur offiziellen Seite auf mantine.dev

Die NavLink-Komponente im Browser ausgewählt, mit Props-Liste und Codebeispiel unter der Vorschau

Import-Verwaltung und Inspektionen

Imports landen nach dem letzten vorhandenen Import oder am Dateianfang. Fügen Sie Modal ein, obwohl import { Button } from "@mantine/core" schon da ist, entsteht import { Button, Modal } from "@mantine/core" statt einer zweiten Zeile. Type-Imports behandelt das Plugin getrennt von Wert-Imports.

Die Inspektion für unbekannte Props markiert falsch geschriebene oder nicht vorhandene Props. Sie überspringt Standard-React-Props wie className, style, id, key und ref. Passen Sie sie unter Settings > Editor > Inspections > Mantine an.

Einfache, transparente Preise

Flexible for Mantine ist ein Einmalkauf. Der Kauf erfolgt über den JetBrains Marketplace.

Einzelperson

Für Solo-Entwickler

$9.90einmalig

Einmalige Zahlung über den JetBrains Marketplace

Props- und Enum-Vervollständigung
Komponenten-Browser mit Drag and Drop
Imports automatisch ergänzt und zusammengeführt
Hover-Doku und Warnungen für unbekannte Props

Auf dem Marketplace holen

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

Auf dem Marketplace holen

Open-Source-Mitwirkende und Einzelentwickler: Kontaktieren Sie uns für Rabatte. Wir unterstützen die Community.

Wechseln Sie nicht mehr den Tab, um Mantine-Doku zu lesen.

Auf dem Marketplace holen