Komponenten Laraknife: Unterschied zwischen den Versionen

Aus Vokabulabor
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: „= Links = * Laraknife * Kochbuch Laraknife = Zielsetzung = Hier werden die vordefinierten Komponenten beschrieben. Komponenten sind HTML-ähnliche Elemente, die in Views verwendet werden können. = Formularfelder = == Panels (Gruppierungen von Feldern) == === Für Modul Create (Erzeugen) === <pre> <x-laraknife.create-panel title="{{ $title }}"> ... </x-laraknife.show-panel> </pre> Parameter: * "title": Dieser Titel wird in als Überschrift ange…“)
 
Keine Bearbeitungszusammenfassung
Zeile 10: Zeile 10:
=== Für Modul Create (Erzeugen) ===
=== Für Modul Create (Erzeugen) ===
<pre>
<pre>
<x-laraknife.create-panel title="{{ $title }}">
<x-laraknife.panels.create title="{{ $title }}">
...
...
</x-laraknife.show-panel>
</x-laraknife.panels.create>
</pre>  
</pre>  
Parameter:
Parameter:
Zeile 18: Zeile 18:
=== Für Modul edit (Ändern) ===
=== Für Modul edit (Ändern) ===
<pre>
<pre>
<x-laraknife.edit-panel title="{{ $title }}">
<x-laraknife.panels.edit title="{{ $title }}">
...  
...  
</x-laraknife.show-panel/>
</x-laraknife.panels.edit/>
</pre>
</pre>
Parameter:
Parameter:
Zeile 26: Zeile 26:
=== Für Modul Index (Übersicht) ===
=== Für Modul Index (Übersicht) ===
<pre>
<pre>
<x-laraknife.index-panel title="{{ $title }}">
<x-laraknife.panels.index title="{{ $title }}">
...  
...  
</x-laraknife.show-panel>
</x-laraknife.panels.index>
</pre>
</pre>
Parameter:
Parameter:
Zeile 35: Zeile 35:
=== Für Modul Show (Anzeigen/Löschen) ===
=== Für Modul Show (Anzeigen/Löschen) ===
<pre>
<pre>
<x-laraknife.show-panel title="{{ $title }}">
<x-laraknife.panels.show title="{{ $title }}">
...  
...  
</x-laraknife.show-panel>
</x-laraknife.panels.show>
</pre>  
</pre>  
Parameter:
Parameter:
Zeile 44: Zeile 44:
Dieses Panel wird normalerweise in Modul Index (Übersicht) verwendet.
Dieses Panel wird normalerweise in Modul Index (Übersicht) verwendet.
<pre>
<pre>
<x-laraknife.filter-panel legend="{{ $l }}">  
<x-laraknife.panels.filter legend="{{ $l }}">  
...  
...  
</x-laraknife.filter-panel>
</x-laraknife.panels.filter>
</pre>
</pre>
Parameter:
Parameter:
Zeile 66: Zeile 66:
=== Einzeiliges Textfeld ===
=== Einzeiliges Textfeld ===
<pre>
<pre>
<x-laraknife.text position="first" name="id" label="Id" value="{{ $context->model->id }}" />
<x-laraknife.forms.string position="first" name="id" label="Id" value="{{ $context->model->id }}" />
</pre>
</pre>
Attribute:
Attribute:
Zeile 73: Zeile 73:
=== Mehrzeiliger Text ===
=== Mehrzeiliger Text ===
<pre>
<pre>
<x-laraknife.bigtext name="id" label="Id" value="{{ $context->model->id }}" />  
<x-laraknife.forms.text name="id" label="Id" value="{{ $context->model->id }}" />  
</pre>  
</pre>  
Attribute:
Attribute:
Zeile 82: Zeile 82:
Der eingegebene Text wird nur als mit Sternchen angezeigt.
Der eingegebene Text wird nur als mit Sternchen angezeigt.
<pre>
<pre>
<x-laraknife.password  name="password" label="Password" value="{{ $context->model->id }}" />
<x-laraknife.forms.password  name="password" label="Password" value="{{ $context->model->id }}" />
</pre>
</pre>
Attribute:
Attribute:
Zeile 89: Zeile 89:
=== Auswahlbox (Combobox) ===
=== Auswahlbox (Combobox) ===
<pre>
<pre>
<x-laraknife.combobox name="role" label="Role" :options="$roleOptions" class="lkn-autoupdate" />
<x-laraknife.forms.combobox name="role" label="Role" :options="$roleOptions" class="lkn-autoupdate" />
</pre>
</pre>
Attribute:
Attribute:
Zeile 99: Zeile 99:
Wenn kein Feld benutzt werden kann, um "position" zu setzen, dann schließt dieses Element die Zelle:
Wenn kein Feld benutzt werden kann, um "position" zu setzen, dann schließt dieses Element die Zelle:
<pre>
<pre>
<x-laraknife.setposition position="last" />
<x-laraknife.layout.set-position position="last" />
</pre>
</pre>


=== Leere Zelle ===
=== Leere Zelle ===
<pre>
<pre>
<x-laraknife.col-empty width="3" />
<x-laraknife.layout.col-empty width="3" />
</pre>
</pre>
Attribut:
Attribut:
Zeile 111: Zeile 111:
=== Leere Zeile ===
=== Leere Zeile ===
<pre>
<pre>
<x-laraknife.row-empty />
<x-laraknife.layout.row-empty />
</pre>
</pre>


Zeile 117: Zeile 117:
=== Allgemeiner Button ===
=== Allgemeiner Button ===
<pre>
<pre>
<x-laraknife.button name="btn-run" />
<x-laraknife.buttons.button name="btnAssign" label="{{ __('Assign Roles')}}" width1="0" width2="6"  />
<x-laraknife.buttons.button-position position="last" name="btnLogin" label="{{ __('Login') }}" />
</pre>
</pre>


=== Vordefinierte Buttons ===
=== Vordefinierte Buttons ===
<pre>
<pre>
<x-laraknife.btn-cancel width2="3" />
<x-laraknife.buttons.btn-cancel width2="3" />
<x-laraknife.btn-delete width2="3" />
<x-laraknife.buttons.delete width2="3" />
<x-laraknife.btn-new width2="3" />
<x-laraknife.buttons.new width2="3" />
<x-laraknife.btn-search width2="3" />
<x-laraknife.buttons.search width2="3" />
<x-laraknife.btn-store width2="3" />
<x-laraknife.button.store width2="3" />
<!-- definiert den Button, der von JS-Scripts verwendet wird.
<!-- definiert unter anderem den Button, der von JS-Scripts verwendet wird.
<x-laraknife.hidden-button />
<x-laraknife.forms.hidden-elements />
</pre>
 
=== Icons ===
Bootstrap bietet ca. 1000 Icons an, die mit UTF-Zeichen realisiert werden.
 
<pre>
 
<change.blade.php  change-record.blade.php  delete.blade.php  delete-record.blade.php  down.blade.php  edit.blade.php  icon-as-link.blade.php  up.blade.phpx-laraknife.buttons.btn-cancel width2="3" />
</pre>
 
==== Icons in der Übersicht (module-index) ====
In der Tabelle können der Bleistift ("Ändern") und der Papierkorb ("Löschen") eingebunden werden:
<pre>
<td><x-laraknife.icons.change-record module="sproperty" no="{{ $sproperty->id }}" /></td>
...
<td><x-laraknife.icons.delete-record module="sproperty" key="{{ $sproperty->id }}" /></td>
</pre>
* Diese Icons bilden mittels Javascript einen Button nach, der die Identifikation (Kombination von Modulnamen und Nummer) im verborgenen  Feld "_lknAction" zurückliefert.
* Die Auswertung übernimmt die Routine <code> function ViewHelper::numberOfButton(array $fields, string $name): ?int</code>.
<pre>
if (($no = ViewHelper::numberOfButton($fields, 'insert')) != null){
  log($no);
}
</pre>
</pre>

Version vom 13. Februar 2024, 17:52 Uhr

Links

Zielsetzung

Hier werden die vordefinierten Komponenten beschrieben. Komponenten sind HTML-ähnliche Elemente, die in Views verwendet werden können.

Formularfelder

Panels (Gruppierungen von Feldern)

Für Modul Create (Erzeugen)

<x-laraknife.panels.create title="{{ $title }}">
...
</x-laraknife.panels.create>

Parameter:

  • "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul edit (Ändern)

<x-laraknife.panels.edit title="{{ $title }}">
... 
</x-laraknife.panels.edit/>

Parameter:

  • "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul Index (Übersicht)

<x-laraknife.panels.index title="{{ $title }}">
... 
</x-laraknife.panels.index>

Parameter:

  • "title": Dieser Titel wird in als Überschrift angezeigt.

Für Modul Show (Anzeigen/Löschen)

<x-laraknife.panels.show title="{{ $title }}">
... 
</x-laraknife.panels.show>

Parameter:

  • "title": Dieser Titel wird in als Überschrift angezeigt.

Filter-Panel

Dieses Panel wird normalerweise in Modul Index (Übersicht) verwendet.

<x-laraknife.panels.filter legend="{{ $l }}"> 
... 
</x-laraknife.panels.filter>

Parameter:

  • "legend": Dieser Text wird in einer Box am oberen Rand eingeblendet

Eingabefelder

Gemeinsame Attribute

  • "position": Werte: "alone" (alleine in der Formulargitterzelle), "first": erstes Feld "last": letztes Feld, "": weder erstes noch letztes Feld in der Zelle.
    • Wenn in einer Zelle "first" verwendet wird, muss unbedingt ein Element mit "last" folgen, evt. mit <laraknife.setposition position="last" />
  • "id": das ID-Attribut des HTML-Feldes
  • "name": das Name-Attribut des HTML-Feldes
  • "label": Wenn vorhanden, wird vor dem Feld dieser Text als Textvorspann angezeigt
  • "width1": Breite der Spalte des Vorspanns: (0..11). Das Elternelement ist immer 12 Einheiten breit.
  • "width2": Breite des Eingabefeldes (1..12)
  • "attribute": Zusätzliche Attribute, z.B. "readonly" oder "disabled"

Es gibt folgende Eingabefelder in Formularen:

Einzeiliges Textfeld

<x-laraknife.forms.string position="first" name="id" label="Id" value="{{ $context->model->id }}" />

Attribute:

  • "value": Der aktuelle Wert des Textfeldes.
  • "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.

Mehrzeiliger Text

<x-laraknife.forms.text  name="id" label="Id" value="{{ $context->model->id }}" /> 

Attribute:

  • "value": Der aktuelle Wert des Textfeldes.
  • "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.
  • "rows": Anzahl Zeilen des Eingabefeldes beim Aufruf (kann mit der Maus vergrößert werden).

Passwort

Der eingegebene Text wird nur als mit Sternchen angezeigt.

<x-laraknife.forms.password  name="password" label="Password" value="{{ $context->model->id }}" />

Attribute:

  • "value": Der aktuelle Wert des Textfeldes.
  • "placeholder": Wenn kein Wert in "value" angegeben ist, wird dieser Hinweis angezeigt.

Auswahlbox (Combobox)

<x-laraknife.forms.combobox name="role" label="Role" :options="$roleOptions" class="lkn-autoupdate" />

Attribute:

  • ":options": Hier wird eine Variable übergeben, die die Listenelemente der Auswahl enthält.
  • Wird z.B. so erzeugt: $optionsCategory = SProperty::optionsByScope('category', $fields['category'], 'all');
  • Weiteres Beispiel: $optionsUser = DbHelper::comboboxDataOfTable('users', 'name', 'id', $fields['user']);

Position setzen

Wenn kein Feld benutzt werden kann, um "position" zu setzen, dann schließt dieses Element die Zelle:

<x-laraknife.layout.set-position position="last" />

Leere Zelle

<x-laraknife.layout.col-empty width="3" />

Attribut:

  • "width": Breite: 1..12

Leere Zeile

<x-laraknife.layout.row-empty />

Buttons

Allgemeiner Button

<x-laraknife.buttons.button name="btnAssign" label="{{ __('Assign Roles')}}" width1="0" width2="6"  />
<x-laraknife.buttons.button-position position="last" name="btnLogin" label="{{ __('Login') }}" />

Vordefinierte Buttons

<x-laraknife.buttons.btn-cancel width2="3" />
<x-laraknife.buttons.delete width2="3" />
<x-laraknife.buttons.new width2="3" />
<x-laraknife.buttons.search width2="3" />
<x-laraknife.button.store width2="3" />
<!-- definiert unter anderem den Button, der von JS-Scripts verwendet wird.
<x-laraknife.forms.hidden-elements />

Icons

Bootstrap bietet ca. 1000 Icons an, die mit UTF-Zeichen realisiert werden.


<change.blade.php  change-record.blade.php  delete.blade.php  delete-record.blade.php  down.blade.php  edit.blade.php  icon-as-link.blade.php  up.blade.phpx-laraknife.buttons.btn-cancel width2="3" />

Icons in der Übersicht (module-index)

In der Tabelle können der Bleistift ("Ändern") und der Papierkorb ("Löschen") eingebunden werden:

<td><x-laraknife.icons.change-record module="sproperty" no="{{ $sproperty->id }}" /></td>
...
<td><x-laraknife.icons.delete-record module="sproperty" key="{{ $sproperty->id }}" /></td>
  • Diese Icons bilden mittels Javascript einen Button nach, der die Identifikation (Kombination von Modulnamen und Nummer) im verborgenen Feld "_lknAction" zurückliefert.
  • Die Auswertung übernimmt die Routine function ViewHelper::numberOfButton(array $fields, string $name): ?int.
if (($no = ViewHelper::numberOfButton($fields, 'insert')) != null){
  log($no);
}