From 8f444c08fb5487def41d9c652fc080f3437f816c Mon Sep 17 00:00:00 2001 From: "Hahn Axel (hahn)" <axel.hahn@iml.unibe.ch> Date: Fri, 9 Dec 2022 14:12:57 +0100 Subject: [PATCH] update docs --- docs/30_Page_layout.md | 11 +++++---- docs/50_Components/10_Grid.md | 21 ++++++++++++---- docs/50_Components/Alert.md | 43 ++++++++++++++++++++------------- docs/50_Components/Badge.md | 18 +++++++++++--- docs/50_Components/Button.md | 40 +++++++++++++++++++++++++++++++ docs/50_Components/Callout.md | 37 ++++++++++++++++++++++++++++ docs/50_Components/Card.md | 45 +++++++++++++++++++++++++++++++++++ docs/config.json | 8 +++---- 8 files changed, 190 insertions(+), 33 deletions(-) create mode 100644 docs/50_Components/Button.md create mode 100644 docs/50_Components/Callout.md create mode 100644 docs/50_Components/Card.md diff --git a/docs/30_Page_layout.md b/docs/30_Page_layout.md index 15e969d..520c88e 100644 --- a/docs/30_Page_layout.md +++ b/docs/30_Page_layout.md @@ -4,9 +4,10 @@ See file public_html/config/**00_page.tpl.php** - this is a basic page created f ### Helper variables -Variable | Description | Example ---- |--- |--- -{{DIR_ADMINLTE}} | base path to find AdminLTE resources | `/vendor/admin-lte/AdminLTE-3.2.0` +Variable | Description | Example +--- |--- |--- +{{DIR_ADMINLTE}} | base path to find AdminLTE resources | `/vendor/admin-lte/3.2.0` +{{DIR_ADMINLTEPLUGINS}} | base path for bootstrp, jquery, fontawesome | `/vendor/admin-lte-plugins` ### Layout @@ -19,7 +20,7 @@ See also <https://adminlte.io/docs/3.2/layout.html> ### Visual parts - + Variable | Description --- |--- @@ -41,7 +42,7 @@ require_once('classes/render-adminlte.class.php'); $renderAdminLTE=new renderadminlte(); ``` -The we can use `$renderAdminLTE` to render elements with its public functions. +Then we can use `$renderAdminLTE` to render elements with its public functions. ### Define replacements diff --git a/docs/50_Components/10_Grid.md b/docs/50_Components/10_Grid.md index 57ffc40..04e6da5 100644 --- a/docs/50_Components/10_Grid.md +++ b/docs/50_Components/10_Grid.md @@ -31,10 +31,21 @@ $renderAdminLTE->addCol([HTML code], [Width]); You can define a width of 1..12 to define a screen width of your cell. -To divide it in 3 parts: +Here is an example with 3 rows ... first with fill width; then on row with 3 columns and a third row with 2 columns: ```php -echo $renderAdminLTE->addCol("column 1/ 3", 4 ); -echo $renderAdminLTE->addCol("column 2/ 3", 4 ); -echo $renderAdminLTE->addCol("column 3/ 3", 4 ); -``` \ No newline at end of file +echo '' + .$renderAdminLTE->addRow( + $renderAdminLTE->addCol("full width column", 12 ) + ) + . $renderAdminLTE->addRow( + $renderAdminLTE->addCol("column 1/ 3", 4 ) + . $renderAdminLTE->addCol("column 2/ 3", 4 ) + . $renderAdminLTE->addCol("column 3/ 3", 4 ) + ) + .$renderAdminLTE->addRow( + $renderAdminLTE->addCol("column 1/ 2", 6 ) + . $renderAdminLTE->addCol("column 1/ 2", 6 ) +) +; +``` diff --git a/docs/50_Components/Alert.md b/docs/50_Components/Alert.md index 80c9f4f..d4c1315 100644 --- a/docs/50_Components/Alert.md +++ b/docs/50_Components/Alert.md @@ -1,32 +1,43 @@ -## Badge +## Alert -A badge is a small counter or info next to a text info, +An alert is a colored box with title and text. ### Syntax ```php -$renderAdminLTE->getBadge($aOptions); +$renderAdminLTE->getAlert($aOptions); ``` ### Parameters * $aOptions - {array} options to describe the element -Key | Description ---- | --- -bgcolor | optional: background color (without prefix "bg"); hint: you should prefer a "type". -class | optional: additional css class -id | optional: additional id attribute -text | visible text -title | title -type | one of `[none]|danger|dark|info|primary|secondary|success|warning` +Styling: + +Key | Description +--- | --- +type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning + +Content: + +Key | Description +--- | --- +text | visible text +title | title + +Other: + +Key | Description +--- | --- +dismissable | optional: background color (without prefix "bg"); hint: you should prefer a "type". ### Example ```php -$renderAdminLTE->getBadge([ - 'type'=>'danger', - 'title'=>'Errors: 5', - 'text'=>'5', -]) +$renderAdminLTE->getAlert(array ( + 'type' => 'warning', + 'title' => 'I need your attention', + 'dismissible' => 1, + 'text' => 'Please check it. Maybe there is something wrong here.', +)) ``` diff --git a/docs/50_Components/Badge.md b/docs/50_Components/Badge.md index 80c9f4f..2c91d00 100644 --- a/docs/50_Components/Badge.md +++ b/docs/50_Components/Badge.md @@ -12,14 +12,26 @@ $renderAdminLTE->getBadge($aOptions); * $aOptions - {array} options to describe the element +Styling: + Key | Description --- | --- bgcolor | optional: background color (without prefix "bg"); hint: you should prefer a "type". -class | optional: additional css class -id | optional: additional id attribute +class | optional: additional css classes +type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning + +Content: + +Key | Description +--- | --- text | visible text title | title -type | one of `[none]|danger|dark|info|primary|secondary|success|warning` + +Other: + +Key | Description +--- | --- +id | optional: additional id attribute ### Example diff --git a/docs/50_Components/Button.md b/docs/50_Components/Button.md new file mode 100644 index 0000000..ddd0afb --- /dev/null +++ b/docs/50_Components/Button.md @@ -0,0 +1,40 @@ +## Button + +An html button tag with formatting. + +You can use any other key that are not named here. Those keys will be rendered as additional html attributes without modification. + + +### Syntax + +```php +$renderAdminLTE->getButton($aOptions); +``` + +### Parameters + +* $aOptions - {array} options to describe the element + +Styling: + +Key | Description +--- | --- +class | optional: additional css classes +size | set size of the button; one of [none]|lg|sm|xs|flat +type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning + +Content: + +Key | Description +--- | --- +text | visible text + +### Example + +```php +$renderAdminLTE->getButton([ + 'class'=>'primary', + 'text'=>'Click me', + 'onclick'=>'alert(\'Hello!\');' + ]) +``` diff --git a/docs/50_Components/Callout.md b/docs/50_Components/Callout.md new file mode 100644 index 0000000..f12fac6 --- /dev/null +++ b/docs/50_Components/Callout.md @@ -0,0 +1,37 @@ +## Callout + +A box with colored left border. It has type, title + text. + +### Syntax + +```php +$renderAdminLTE->getCallout($aOptions); +``` + +### Parameters + +* $aOptions - {array} options to describe the element + +Styling: + +Key | Description +--- | --- +class | optional: additional css classes +type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning + +Content: + +Key | Description +--- | --- +text | visible text +title | title of the callout + +### Example + +```php +$renderAdminLTE->getCallout(array ( + 'type' => 'success', + 'title' => 'I am a success callout', + 'text' => 'This is a gren callout.', +)) +``` diff --git a/docs/50_Components/Card.md b/docs/50_Components/Card.md new file mode 100644 index 0000000..4c12fa9 --- /dev/null +++ b/docs/50_Components/Card.md @@ -0,0 +1,45 @@ +## Callout + +A div to display boxed content. + +It has header, main text and a footer. + +### Syntax + +```php +$renderAdminLTE->getCard($aOptions); +``` + +### Parameters + +* $aOptions - {array} options to describe the element + +Styling: + +Key | Description +--- | --- +class | optional: additional css classes +type | one of [none]\|danger\|dark\|info\|primary\|secondary\|success\|warning +variant | kind of coloring: one of<br>- "default" - titlebar is colored<br>- "outline" - a small stripe on top border is colored<br>- "solid" - whole card is colored<br>- "gradient" - whole card is colored with a gradient + +Content: + +Key | Description +--- | --- +footer | footer of the card +text | visible text +title | title of the card +tools | html code for upper right corner + +### Example + +```php +$renderAdminLTE->getCard(array ( + 'type' => 'primary', + 'variant' => 'solid', + 'title' => 'I am a card', + 'tools' => '123', + 'text' => 'Hello everybody out there!', + 'footer' => '© Axel', +)) +``` diff --git a/docs/config.json b/docs/config.json index d29d53b..d06d672 100644 --- a/docs/config.json +++ b/docs/config.json @@ -1,7 +1,7 @@ { - "title": "Docker starter kit", + "title": "AdminLTE renderer", "author": "Axel Hahn", - "tagline": "Bring up a docker container with a PHP 8.x dev environment", + "tagline": "PHP class to render elements of AdminLTE template", "ignore": { "files": ["_skeleton.md"], "folders": ["99_Not_Ready"] @@ -14,10 +14,10 @@ "edit_on_github_": "iml-it/__PROJECT__/tree/master/docs", "edit_on": { "name": "Gitlab", - "basepath": "https://git-repo.iml.unibe.ch/iml-open-source/docker-php-starterkit/tree/master/docs" + "basepath": "https://git-repo.iml.unibe.ch/iml-open-source/adminlte-renderer/tree/master/docs" }, "links": { - "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/docker-php-starterkit", + "Git Repo": "https://git-repo.iml.unibe.ch/iml-open-source/adminlte-renderer", "IML Opensource": "https://os-docs.iml.unibe.ch/" }, "theme": "daux-blue", -- GitLab