Neugierig, warum ich mich für die Entwicklung von CoreUI entschieden habe? Bitte lesen Sie diesen Artikel: Alleskönner, Meister in nichts. Warum Bootstrap-Admin-Vorlagen scheiße sind.
CoreUI bietet 6 Versionen: Bootstrap, Angular, Laravel, React.js, Vue.js und Vue.js + Laravel.
CoreUI soll der UX-Game-Changer sein. Reiner und transparenter Code enthält keine redundanten Komponenten, sodass die App leicht genug ist, um ein ultimatives Benutzererlebnis zu bieten. Damit sind auch mobile Geräte gemeint, bei denen die Navigation genauso einfach und intuitiv ist wie auf einem Desktop oder Laptop. Mit der CoreUI-Layout-API können Sie Ihr Projekt für fast jedes Gerät anpassen – sei es Mobil, Web oder WebApp – CoreUI deckt sie alle ab!
Versionen
CoreUI Pro
Admin-Vorlagen, die auf CoreUI Pro basieren
Installation
Verwendung
Merkmale
Schöpfer
Gemeinschaft
Gemeinschaftsprojekte
Lizenz
Unterstützen Sie die CoreUI-Entwicklung
CoreUI basiert auf Bootstrap 4 und unterstützt gängige Frameworks.
CoreUI Kostenlose Bootstrap-Admin-Vorlage
Kostenlose CoreUI-Angular-Admin-Vorlage
Kostenlose CoreUI-Laravel-Administratorvorlage
CoreUI Kostenlose React.js Admin-Vorlage
CoreUI Kostenlose Vue.js Admin-Vorlage
CoreUI Kostenlose Vue.js + Laravel Admin-Vorlage
CoreUI Pro Bootstrap-Admin-Vorlage
CoreUI Pro Angular Admin-Vorlage
CoreUI Pro Laravel Admin-Vorlage
CoreUI Pro React Admin-Vorlage
CoreUI Pro Vue Admin-Vorlage
CoreUI Pro Vue + Laravel Admin-Vorlage
Standardthema | Legacy-Thema | Dunkles Layout |
---|---|---|
# das Repo klonen $ git clone https://github.com/coreui/coreui-free-laravel-admin-template.git my-project # in das Verzeichnis der App gehen $ cd my-project # Abhängigkeiten der App installieren $ Composer Install # installieren Abhängigkeiten der App$ npm install
# Datenbank erstellen$ touchdatabase/database.sqlite
Kopieren Sie die Datei „.env.example“ und ändern Sie ihren Namen in „.env“. Ersetzen Sie dann in der Datei „.env“ diese Datenbankkonfiguration:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
Dazu:
DB_CONNECTION=SQLite
DB_DATABASE=/path_to_your_project/database/database.sqlite
Installieren Sie PostgreSQL
Benutzer erstellen
$ sudo -u postgres createuser --interactive Geben Sie den Namen der hinzuzufügenden Rolle ein: Laravel Soll die neue Rolle ein Superuser sein (j/n) n Darf die neue Rolle eine Datenbank erstellen (j/n) n Darf die neue Rolle weitere neue Rollen erstellen (j/n) n
Benutzerpasswort festlegen
$ sudo -u postgres psql postgres= ALTER USER laravel WITH ENCRYPTED PASSWORD 'password';postgres= q
Datenbank erstellen
$ sudo -u postgres erstelltb laravel
Kopieren Sie die Datei „.env.example“ und ändern Sie ihren Namen in „.env“. Ersetzen Sie dann in der Datei „.env“ diese Datenbankkonfiguration:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
Dazu:
DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=Passwort
Kopieren Sie die Datei „.env.example“ und ändern Sie ihren Namen in „.env“. Dann vervollständigen Sie in der Datei „.env“ diese Datenbankkonfiguration:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=
Wenn Ihre Projekt-URL wie folgt aussieht: example.com/sub-folder Dann gehen Sie zu
my-project/.env
und ändern Sie diese Zeile:
APP_URL =
Damit es so aussieht:
APP_URL = http://example.com/sub-folder
# in Ihrem App-Verzeichnis# generieren Sie Laravel APP_KEY$ php artisan key:generate# führen Sie die Datenbankmigration aus und starten Sie $ php artisan migrate:refresh --seed# generieren Sie das Mischen$ npm führen Sie dev aus# und wiederholen Sie das Generieren des Mischens$ npm führen Sie dev aus
# Lokalen Server starten$ php artisan Serve# test$ php seller/bin/phpunit
Öffnen Sie Ihren Browser mit der Adresse: localhost:8000
Klicken Sie im Seitenleistenmenü auf „Anmelden“ und melden Sie sich mit Ihren Anmeldeinformationen an:
E-Mail: [email protected]
Passwort: Passwort
Dieser Benutzer hat die Rollen: Benutzer und Administrator
Anweisungen nur für die CoreUI Free Laravel-Administratorvorlage. Für die Versionen Pro und Vue.js gibt es separate Anweisungen.
my-project/database/seeds/MenusTableSeeder.php
Fügen Sie in der Funktion run()
insertLink()
hinzu:
$id = $this->insertLink( $rolesString, $visibleName, $href, $iconString);
$rolesString
– eine Zeichenfolge mit einer Liste der Benutzerrollen, die für dieses Menüelement verfügbar sind, z. B. "guest,user,admin"
$visibleName
– eine in der Seitenleiste sichtbare Zeichenfolgenbeschriftung
$href
– ein href, z. /homepage
oder http://example.com
$iconString
– eine Zeichenfolge, die einen gültigen CoreUI-Symbolnamen (Kebab-Fall) enthält, z. B. cil-speedometer
oder cil-pencil
Um der Seitenleiste einen Titel hinzuzufügen, verwenden Sie die Funktion insertTitle()
:
$id = $this->insertTitle( $rolesString, $title );
$rolesString
– eine Zeichenfolge mit einer Liste der Benutzerrollen, die für dieses Menüelement verfügbar sind, z. B. "guest,user,admin"
$title
– eine in der Seitenleiste sichtbare Zeichenfolgenbeschriftung
Um der Seitenleiste ein Dropdown -Menü hinzuzufügen, verwenden Sie die Funktion beginDropdown()
:
$id = $this->beginDropdown( $rolesString, $visibleName, $iconString);
$rolesString
– eine Zeichenfolge mit einer Liste der Benutzerrollen, die für dieses Menüelement verfügbar sind, z. B. "guest,user,admin"
$visibleName
– eine in der Seitenleiste sichtbare Zeichenfolgenbeschriftung
$iconString
– eine Zeichenfolge, die einen gültigen CoreUI-Symbolnamen (Kebab-Fall) enthält. Zum Beispiel: cil-speedometer
oder cil-pencil
Um den Dropdown-Bereich zu beenden, verwenden Sie die Funktion endDropdown()
.
Um einen Link zum Dropdown -Aufruf hinzuzufügen, rufen Sie die Funktion insertLink()
zwischen den Funktionsaufrufen beginDropdown()
und endDropdown()
. Beispiel:
$id = $this->beginDropdown('guest,user,admin', 'Some dropdown', 'cil-puzzle');$id = $this->insertLink('guest,user,admin', 'Dropdown name' , 'http://example.com');$this->endDropdown();
WICHTIG – Rufen Sie am Ende der run()
-Funktion die Funktion joinAllByTransaction()
auf:
$this->joinAllByTransaction();
Sobald Sie mit der Bearbeitung der Seed-Datei fertig sind, führen Sie Folgendes aus :
$ php artisan migrate:refresh --seed# Dieser Befehl führt auch ein Rollback der Datenbank durch und migriert sie erneut.
Notizen
Benutzer
Verwaltung von Menüs
Menüpunkte verwalten
Rollenmanagement
Management der Medien
BROT
E-Mail-Vorlagen
Es ist ein Beispiel für die Datenpräsentation in einer Paginierungstabelle und die CRUD-Funktionalität.
Es ist ein einfaches Beispiel für die Verwaltung registrierter Benutzer.
Es handelt sich um ein System, mit dem Sie ein neues Menü erstellen und vorhandene Menüs bearbeiten können. Um in einer beliebigen Ansicht ein neues Menü mit dem Namen „Neu“ zu platzieren, verwenden Sie diesen Code:
<?phpuse the AppMenuBuilderFreelyPositionedMenus;if(isset($appMenus['new'])){ FreelyPositionedMenus::render( $appMenus['new'] , '', 'your-css-class-of-ul-element'); }?>
Ermöglicht das Hinzufügen, Bearbeiten und Löschen von Menüelementen. Um dem Menü einen neuen Menüpunkt hinzuzufügen, müssen Sie:
Geben Sie an, zu welchem Menü Sie das Element hinzufügen.
Geben Sie die Rollen der Benutzer an, für die das Element sichtbar sein soll
Benennen Sie den Artikel
Typ (zur Auswahl: Link, Titel und Dropdown)
Href, die Adresse, auf die sich der Artikel beziehen soll,
Übergeordnetes Element (Um das Element im Dropdown-Menü zu verschachteln)
CORUI-Symbole
Ermöglicht das Erstellen, Bearbeiten, Löschen und Neuanordnen von Benutzerrollen. Wenn ein Benutzer mehr als eine Rolle hat, wird die höchste hierarchische Rolle verwendet, um ein Menü für ihn zu erstellen.
Es ermöglicht:
Erstellen Sie virtuelle Medienordner.
Senden Sie Medien an Anwendungen.
Medien zwischen Ordnern verschieben,
Bilder ausschneiden,
BREAD steht für: Durchsuchen, Lesen, Bearbeiten, Hinzufügen, Löschen. Mit unserem BREAD-System können Sie aus der Datenbank einfach und schnell für jeden Tisch ein einfaches BREAD generieren. Um ein neues BREAD zu erstellen, geben Sie einfach einen Tabellennamen aus der Datenbank ein. Geben Sie dann einen Namen für das Formular ein. Geben Sie die Anzahl der Zeilen in der Suchtabelle ein. Wählen Sie aus, ob die Suchtabelle Schaltflächen enthalten soll: „Anzeigen“, „Bearbeiten“, „Hinzufügen“, „Löschen“. Weisen Sie Benutzern Rollen zu, die das fertige BREAD verwenden können. Füllen Sie dann jede Spalte der Tabelle einzeln aus:
der für den Benutzer sichtbare Spaltenname,
den Eingabetyp für die Spalte. Der letzte Schritt besteht darin, die entsprechenden Kontrollkästchen zu aktivieren:
Durchsuchen (ermöglicht die Anzeige der Spalte in der Datentabelle),
lesen (ermöglicht die Anzeige der Spalte in der Show-Ansicht)
Bearbeiten (ermöglicht Spaltenbearbeitung)
add (ermöglicht das Vervollständigen der Spaltendaten beim Hinzufügen eines Datensatzes. Erforderlich, wenn die Spalte nicht nullbar ist). Es ist auch möglich, Beziehungen zu einer anderen Tabelle abzuwickeln. Wenn es sich bei der Spalte um einen Fremdschlüssel handelt, sollte dieser angegeben werden: im Feld „Optionaler Tabellenname der Relation“ – Tabellenname, auf den sich der Fremdschlüssel bezieht, im Feld „Optionaler Spaltenname in Relationstabelle – zum Ausdrucken“ – der Name von die Spalte, die in der anzuzeigenden Beziehungstabelle enthalten ist. Wählen Sie abschließend einen der beiden „Feldtypen“ aus, die sich auf die Relation beziehen: „Relation Select“ oder „Relation Radio“.
Es handelt sich um ein Beispiel für die Verwaltung von E-Mail-Vorlagen. Ermöglicht das Erstellen, Bearbeiten und Löschen von Vorlagen. Außerdem können Sie eine E-Mail an eine ausgewählte Adresse senden.
Łukasz Holeczek
https://twitter.com/lukaszholeczek
https://github.com/mrholek
Andrzej Kopański
https://github.com/xidedix
Marcin Michałek
https://github.com/rakieta2015
Erhalten Sie Updates zur Entwicklung von CoreUI und chatten Sie mit den Projektbetreuern und Community-Mitgliedern.
Folgen Sie @core_ui auf Twitter.
Lesen und abonnieren Sie den CoreUI-Blog.
CoreUI-Symbole sind wunderschön gestaltete Symbole für häufige Aktionen und Gegenstände. Sie können sie in Ihren digitalen Produkten für Web oder mobile Apps verwenden. Gebrauchsfertige Schriftarten und Stylesheets, die mit Ihren bevorzugten Frameworks funktionieren.
https://coreui.io/icons/
Copyright 2020 creativeLabs Łukasz Holeczek. Code unter der MIT-Lizenz veröffentlicht. Es gibt nur eine Einschränkung: Sie können die CoreUI nicht als Lagerbestand weitergeben. Dies ist nicht möglich, wenn Sie die CoreUI ändern. In der Vergangenheit hatten wir einige Probleme mit Personen, die versuchten, CoreUI-basierte Vorlagen zu verkaufen.
CoreUI ist ein MIT-lizenziertes Open-Source-Projekt und die Nutzung ist völlig kostenlos. Allerdings ist der Aufwand, der für die Wartung und Entwicklung neuer Funktionen für das Projekt erforderlich ist, ohne angemessene finanzielle Unterstützung nicht tragbar. Sie können die Entwicklung unterstützen, indem Sie über PayPal spenden, die CoreUI Pro-Version kaufen oder eine unserer Premium-Admin-Vorlagen kaufen.
Derzeit prüfe ich die Möglichkeit, Vollzeit an CoreUI zu arbeiten. Wenn Sie ein Unternehmen sind, das Kernprodukte mit CoreUI entwickelt, bin ich auch offen für Gespräche über individuelle Sponsoring-/Beratungsvereinbarungen. Nehmen Sie Kontakt auf Twitter auf.