Skip to content
Snippets Groups Projects

Update renderer class

Merged Hahn Axel (hahn) requested to merge update_renderer_class into main

Files

+ 61
5
@@ -31,21 +31,22 @@ Content:
Key | Description
--- | ---
hint | optional: Hint text above form field
label | label in front of the input element
name | name attribute for sending form data
value | value of the input field/ visible text; for checkbox and radio: the data to send when sending a form
### Example
### Examples
#### Simple text input field
```php
$renderAdminLTE->getFormInput(array (
$renderAdminLTE->getFormInput([
'label' => 'Enter firstname',
'type' => 'text',
'name' => 'firstname',
'value' => '',
));
]);
```
You get a label, an input field wrapped in a ``<div class="form-group row">``.
@@ -72,8 +73,6 @@ With using append and prepend keys you can create gray boxes on left and right.
For these input types you can use multiple elements.
You must wrap a bunch of input elements into ``<div class="form-group row">`` "manually".
```php
echo '<div class="form-group">'
. $renderAdminLTE->getFormInput([
@@ -91,3 +90,60 @@ echo '<div class="form-group">'
.'</div>'
;
```
#### Simple range slider
A simple slider:
```php
$renderAdminLTE->getFormInput([
'tag' => 'input',
'type' => 'range', // <-----------
'min' => 0,
'max' => 3,
'step' => 1,
'label' => 'Select 0..6',
]);
```
#### Range with labels
To add labels you need a datalist for the values and the labels to show, eg
```html
<datalist id="datalist-range">
<option value="0" label="no risc"></option>
<option value="1" label="1"></option>
<option value="2" label="2"></option>
<option value="3" label="medium"></option>
<option value="4" label="4"></option>
<option value="5" label="5"></option>
<option value="6" label="critical"></option>
</datalist>
```
The id you ned to reference in the key "datalist":
```php
$renderAdminLTE->getFormInput([
'tag' => 'input',
'type' => 'range',
'min' => 0,
'max' => 6,
'step' => 1,
'label' => 'Select 0..6',
'datalist' => 'datalist-range', // <-----------
]);
```
For the datalist you need to extend your css:
```css
datalist {
display: flex;
flex-direction: column;
justify-content: space-between;
writing-mode: vertical-lr;
width: 100%;
}
```
Loading