diff --git a/docs/50_Forms/Input.md b/docs/50_Forms/Input.md index 90dc83d57e3f3b152c8021acaec16d16954a0c5a..b60d6c9e59759260158c6f5b067057698d3c1ced 100644 --- a/docs/50_Forms/Input.md +++ b/docs/50_Forms/Input.md @@ -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%; +} +``` diff --git a/docs/50_Forms/Select.md b/docs/50_Forms/Select.md index 2846bcb7ffdc5add396a80457c2f9fa7c3b1438b..e83f6623f2a6a18e6a8e37fe1faa8b063a36c3f9 100644 --- a/docs/50_Forms/Select.md +++ b/docs/50_Forms/Select.md @@ -26,7 +26,7 @@ Styling for select tag: Key | Description --- | --- -bootstrap-select | optional: use bootstrap-select pugin with live search (you need to load the plugin in your page) +bootstrap-select | optional: use bootstrap-select pugin with live search (you need to load the plugin in your page - see example below) class | optional: additional css classes size | optional: visible option lines @@ -34,6 +34,7 @@ Content: Key | Description --- | --- +hint | optional: Hint text above form field 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 @@ -42,8 +43,7 @@ value | value of the input field/ visible text; for checkbox and radio: the d #### Simple select box ```php -$renderAdminLTE->getFormSelect(array -( +$renderAdminLTE->getFormSelect([ 'label' => 'Select contact', 'name' => 'contact', 'tag' => 'select', @@ -54,7 +54,7 @@ $renderAdminLTE->getFormSelect(array ['value' => '2', 'label' => 'Dick', 'selected' => 1 ], ['value' => '3', 'label' => 'Harry'], ], -)); +]); ``` You get a label, an select box wrapped in a ``<div class="form-group row">``. @@ -74,3 +74,31 @@ You get a label, an select box wrapped in a ``<div class="form-group row">``. </div> </div> ``` + +#### Select box with search field + +We added support for the plugin **bootstrap-select**. +Get its files from the website and put it into a vendor directory. + +Website: <https://developer.snapappointments.com/bootstrap-select/> + +In your html header section add its css and javascript: + +```html + <!-- bootstrap-select --> + <link rel="stylesheet" href="../vendor/bootstrap-select/1.13.18/css/bootstrap-select.min.css"> + <script src="../vendor/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script> +``` + +In your select box add ``'bootstrap-select' => 1,`` : + +```php +$renderAdminLTE->getFormSelect([ + 'label' => 'Select contact', + 'name' => 'contact', + 'tag' => 'select', + 'size' => 1, + 'bootstrap-select' => 1, // <---------- + 'options' => [ ... ], +]); +``` diff --git a/docs/50_Forms/Textarea.md b/docs/50_Forms/Textarea.md index 69f28d32ddadaca76e02f04ec2b3f7cf49f1477a..34b8de4874566dc8b86ebd640ca710d568d1c5df 100644 --- a/docs/50_Forms/Textarea.md +++ b/docs/50_Forms/Textarea.md @@ -29,6 +29,7 @@ Content: Key | Description --- | --- +hint | optional: Hint text above form field label | label in front of the Textarea element name | name attribute for sending form data value | value of the textarea; visible text @@ -40,11 +41,11 @@ value | value of the textarea; visible text You get a label and a textare wrapped in a ``<div class="form-group row">``. ```php -$renderAdminLTE->getFormTextarea(array ( +$renderAdminLTE->getFormTextarea([ 'label' => 'Enter text', 'name' => 'textdata', 'value' => 'Here is some text...', -)); +]); ``` #### Html editor @@ -72,7 +73,7 @@ By adding ``'type' => 'html'`` an html editor will be rendered by adding a class ```php $renderAdminLTE->getFormTextarea(array ( - 'type' => 'html', + 'type' => 'html', // <---------- 'label' => 'Enter text', 'name' => 'textdata', 'value' => 'Here is some text...',