update docs

adb25a4f · Hahn Axel (hahn) · 046d9e18 · adb25a4f · adb25a4f · adb25a4f
Commit adb25a4f authored 1 year ago by Hahn Axel (hahn)
--- a/docs/10_Description.md
+++ b/docs/10_Description.md
@@ -18,7 +18,7 @@ The AdminLTE renderer is a PHP class offers several methods to render
  * buttons
  * ...
-The class is compatible to PHP 7.3 to PHP 8.2
+The class is compatible to PHP 7+8 ... up to PHP 8.2.
 ## Screenshots

--- a/docs/30_Page_layout.md
+++ b/docs/30_Page_layout.md
--- a/docs/40_Navigation.md
+++ b/docs/40_Navigation.md
--- a/docs/60_Components/10_Grid.md
+++ b/docs/60_Components/10_Grid.md
@@ -54,7 +54,7 @@ $renderAdminLTE->addCol([HTML code], [Width]);
 * [HTML code] - {string} Html code of the visible content
 * [Width] - {integer} number of column width; values: 1..12
-### Example
+## Example
 You can define a width of 1..12 to define a screen width of your cell.

--- a/docs/30_Page/_index.md
+++ b/docs/30_Page/_index.md
+<html>
+<div class="hero">
+  <h2>AdminLTE 3 :: Page</h2>
+</div>
+</html>
--- a/docs/60_Components/Alert.md
+++ b/docs/60_Components/Alert.md
--- a/docs/60_Components/Badge.md
+++ b/docs/60_Components/Badge.md
--- a/docs/60_Components/Button.md
+++ b/docs/60_Components/Button.md
--- a/docs/60_Components/Callout.md
+++ b/docs/60_Components/Callout.md
--- a/docs/60_Components/Card.md
+++ b/docs/60_Components/Card.md
--- a/docs/60_Components/Infobox.md
+++ b/docs/60_Components/Infobox.md
--- a/docs/60_Components/Smallbox.md
+++ b/docs/60_Components/Smallbox.md
--- a/docs/60_Components/_index.md
+++ b/docs/60_Components/_index.md
--- a/docs/50_Forms/Input.md
+++ b/docs/50_Forms/Input.md
+## Input
+Draw an input field and a label with horizontal direction.
+![Input](../images/examples_input.png)
+### Syntax
+```php
+$renderAdminLTE->getFormInput($aOptions);
+```
+### Return
+{string} html code
+### Parameters
+* $aOptions - {array} options to describe the element
+Styling:
+Key      | Description
+---      | ---
+class    | optional: additional css classes
+append   | optional: content on input start
+prepend  | optional: content on input end
+type     | field type: text, email, password, hidden and all other html 5 input types
+Content:
+Key      | Description
+---      | ---
+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
+#### Simple text input field
+```php
+$renderAdminLTE->getFormInput(array (
+  'label' => 'Enter firstname',
+  'type' => 'text',
+  'name' => 'firstname',
+  'value' => '',
+));
+```
+You get a label, an input field wrapped in a ``<div class="form-group row">``.
+```html
+<div class="form-group row">
+  <label for="firstname-27ece2891a0275dd604732b681fc666f" class="col-sm-2 col-form-label">
+    Enter firstname
+  </label>
+  <div class="col-sm-10">
+    <input  type="text" class="form-control myclass" name="firstname" value="" id="firstname-27ece2891a0275dd604732b681fc666f"/>
+  </div>
+</div>
+```
+#### Text input with append/ prepend
+With using append and prepend keys you can create gray boxes on left and right. Add a character, an icon or html code for the addon content.
+![Input with append and prepend](../images/examples_input_append_prepend.png)
+#### Radio and checkboxes
+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([
+      'type' => 'checkbox',
+      'label' => 'first option',
+      'name' => 'first',
+      'value' => 'yes',
+    ])
+  . $renderAdminLTE->getFormInput([
+      'type' => 'checkbox',
+      'label' => 'second option',
+      'name' => 'second',
+      'value' => 'yes',
+    ])
+  .'</div>'
+  ;
+```
--- a/docs/50_Forms/Textarea.md
+++ b/docs/50_Forms/Textarea.md
+## Textarea
+Draw an textarea or html editor form.
+![Html editor](../images/examples_textarea.png)
+### Syntax
+```php
+$renderAdminLTE->getFormTextarea($aOptions);
+```
+### Return
+{string} html code
+### Parameters
+* $aOptions - {array} options to describe the element
+Styling:
+Key      | Description
+---      | ---
+class    | optional: additional css classes
+type     | field type; one of<br>-[empty] (=default; a classic html textarea)<br>- "html" show html editor
+Content:
+Key      | Description
+---      | ---
+label    | label in front of the Textarea element
+name     | name attribute for sending form data
+value    | value of the textarea; visible text
+### Example
+#### Simple textarea
+You get a label and a textare wrapped in a ``<div class="form-group row">``.
+```php
+$renderAdminLTE->getFormTextarea(array (
+  'label' => 'Enter text',
+  'name' => 'textdata',
+  'value' => 'Here is some text...',
+));
+```
+#### Html editor
+To bring up the editor you need to add the Summertime editor in your page.
+Add css:
+```html
+<link rel="stylesheet" href="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.css">
+```
+Add javascript:
+```html
+<script src="{{DIR_ADMINLTEPLUGINS}}/summernote/summernote-bs4.min.js"></script>
+<script>
+    $(document).ready(function () {
+        $('.summernote').summernote();
+    });
+</script>
+```
+By adding ``'type' => 'html'`` an html editor will be rendered by adding a class named "summernote".
+```php
+$renderAdminLTE->getFormTextarea(array (
+  'type' => 'html',
+  'label' => 'Enter text',
+  'name' => 'textdata',
+  'value' => 'Here is some text...',
+));
+```
+This returns
+```html
+<div class="form-group row">
+    <label for="textdata-e3e69c691af3280a1a69563ea05922e4" class="col-sm-2 col-form-label">
+        Enter text
+    </label>
+    <div class="col-sm-10">
+    <textarea class="form-control summernote myclass" name="textdata">
+        Here is some text...
+    </textarea>
+    </div>
+</div>
+```
--- a/docs/50_Forms/_index.md
+++ b/docs/50_Forms/_index.md
+<html>
+<div class="hero">
+  <h2>AdminLTE 3 :: Form elements</h2>
+</div>
+</html>
--- a/docs/images/examples_input.png
+++ b/docs/images/examples_input.png
--- a/docs/images/examples_input_append_prepend.png
+++ b/docs/images/examples_input_append_prepend.png
--- a/docs/images/examples_textarea.png
+++ b/docs/images/examples_textarea.png
--- a/docs/style.css
+++ b/docs/style.css
@@ -156,14 +156,24 @@ h2:first-of-type {
    border-bottom: var(--axel_h3-bottom);
 }
-.s-content h4 {
+.s-content > h4 {
+    margin: 0;
+    font-size: 135%;
+    font-weight: bold;
+    margin-top: 2em;
+}
+.s-content .TableOfContentsContainer h4 {
    margin: 0;
    font-size: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.3em;
 }
+ul.TableOfContents a{
+    color: #666;
+}
 .s-content pre {
    background: var(--axel_pre-background);
 }