update
This commit is contained in:
110
docs/smartui/accordion.md
Normal file
110
docs/smartui/accordion.md
Normal file
@ -0,0 +1,110 @@
|
||||
# SmartUI::Accordion Class
|
||||
This is a basic usage of SmartUI's ```Accordion``` class. If you want to know more about the real HTML layout, click [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::Accordion($panels [, $options = array()])
|
||||
```
|
||||
|
||||
## $panels
|
||||
The ```$panels``` parameter will initiate the number of panels displayed. You can pass either an ```assoc``` array that contains panel ids or just an ```array```(not recomended) hense ids will be the zero base index number.
|
||||
```php
|
||||
$panels = array(
|
||||
'my-panel-1' => array(
|
||||
'content' => '',
|
||||
'container' => 'Collapsible Group Item #1',
|
||||
'icons' => array()
|
||||
),
|
||||
'my-panel-1' => array(
|
||||
'content' => '',
|
||||
'container' => 'Collapsible Group Item #2',
|
||||
'icons' => array(),
|
||||
)
|
||||
// so on ...
|
||||
)
|
||||
|
||||
// or ...
|
||||
$panels = array(
|
||||
'my-panel-1' => 'Collapsible Group Item #1', // value acts as the 'title' property
|
||||
'my-panel-2' => 'Collapsible Group Item #2',
|
||||
// so on ...
|
||||
);
|
||||
|
||||
// or ...
|
||||
$panels = array('Collapsible Group Item #1', 'Collapsible Group Item #2'); // panel #0 and #1 as ids
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
|
||||
|
||||
$mypanels = array(
|
||||
'my-panel-1' => 'Collapsible Group Item #1',
|
||||
'my-panel-2' => 'Collapsible Group Item #2',
|
||||
);
|
||||
|
||||
$accordion = $_ui->create_accordion($mypanels);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
$accordion->content('my-panel-1', 'This is the content of my panel 1');
|
||||
$accordion->content('my-panel-2', 'This is the content of my panel 2');
|
||||
```
|
||||
|
||||
## Print it!
|
||||
```php
|
||||
$accordion->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### Accordion::panel
|
||||
An ```array``` - The list of panels (provided upon creation of ```SmartUI::Accordion```)
|
||||
```php
|
||||
$accordion->panel('my-panel-1', array('content' => 'The content of this panel'));
|
||||
|
||||
// or ...
|
||||
$accordion->panel('my-panel-1', 'My panel 1'); // set as panel's 'content' property
|
||||
```
|
||||
|
||||
### Accordion::content
|
||||
An ```array``` or ```closure``` of panels with their ```content``` property.
|
||||
```php
|
||||
$accordion->content = array(
|
||||
'my-panel-1' => 'This is the content of my panel 1'
|
||||
);
|
||||
|
||||
// or ...
|
||||
$accordion->content('my-panel-1', 'This is the content of my panel 1');
|
||||
|
||||
// or even closure with callback (optional)
|
||||
$accordion->content('my-panel-1', function($this, $panels) {
|
||||
return 'This is the content of my panel and I am coding some stuff here to return';
|
||||
}, function($this) {
|
||||
// your callback code here ...
|
||||
})
|
||||
```
|
||||
Below other properties that are using the same setup as ```Accordion::content``` property
|
||||
### Accordion::icons
|
||||
An ```array``` or ```closure``` - Accordion needs ```TWO``` icons (collapsed and expanded icons). We can specify this by passing an ```array``` of the two icons
|
||||
```
|
||||
$accordion->icons('my-panel-2', array('fa fa-fw fa-plus-circle txt-color-green pull-right', 'fa-fw fa-minus-circle txt-color-red pull-right'));
|
||||
```
|
||||
On the other hand, setting ```Accordion::options['global_icons']``` will set your panel's to this icons
|
||||
```
|
||||
$accordion->options('global_icons', array('fa-lg fa-angle-down pull-right', 'fa-lg fa-angle-up pull-right'));
|
||||
```
|
||||
|
||||
### Accordion::expand
|
||||
### Accordion::padding
|
||||
### Accordion::options
|
||||
An ```array``` - options available for the class
|
||||
```php
|
||||
$options = array(
|
||||
'global_icons' => array('fa-lg fa-angle-down pull-right', 'fa-lg fa-angle-up pull-right')
|
||||
);
|
||||
|
||||
// sample call
|
||||
$accordion->options('global_icons', array('fa-lg fa-angle-down pull-right', 'fa-lg fa-angle-up pull-right'));
|
||||
|
||||
```
|
||||
36
docs/smartui/alert.md
Normal file
36
docs/smartui/alert.md
Normal file
@ -0,0 +1,36 @@
|
||||
# SmartUI::print_alert()
|
||||
Alert box. You can see full HTML documentation [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::print_alert($message = '' [, $type = 'info', $options = array(), $return = false])
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
SmartUI::print_alert('<strong>Success</strong> The page has been added.', 'success');
|
||||
```
|
||||
|
||||
## $type
|
||||
```info```, ```success```, ```danger```, ```warning```
|
||||
|
||||
## $options
|
||||
Options available to configure your alert
|
||||
```php
|
||||
$options_map = array(
|
||||
'closebutton' => true,
|
||||
'block' => false,
|
||||
'container' => 'div',
|
||||
'class' => array(),
|
||||
'fade_in' => true,
|
||||
'icon' => $type
|
||||
);
|
||||
```
|
||||
### $options[icon]
|
||||
Icons associated with each type of alert
|
||||
```php
|
||||
$icon_map = array(
|
||||
'info' => 'fa-info',
|
||||
'warning' => 'fa-warning',
|
||||
'danger' => 'fa-times',
|
||||
'success' => 'fa-check'
|
||||
);
|
||||
```
|
||||
144
docs/smartui/button.md
Normal file
144
docs/smartui/button.md
Normal file
@ -0,0 +1,144 @@
|
||||
# SmartUI::Button Class
|
||||
This is a basic usage of SmartUI's ```Button``` class. If you want to know more about the real HTML layout, click [here](buttons.php)
|
||||
```php
|
||||
SmartUI::Button([$content = '', $type = 'default', $options = array()])
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
|
||||
$btn = $_ui->create_button('Button Content', 'default');
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
$btn->attr('href' => 'http://your-url.com');
|
||||
```
|
||||
|
||||
## Print it!
|
||||
```php
|
||||
$btn->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### Button::options
|
||||
An ```array```
|
||||
```php
|
||||
$options = array(
|
||||
'disabled' => false,
|
||||
'labeled' => false // must have the Button::icon property
|
||||
);
|
||||
|
||||
// sample call
|
||||
$btn->options(array('disabled'=>true, 'labeled'=>true));
|
||||
|
||||
// or ...
|
||||
$btn->options('disabled', true)->options('labeled', true);
|
||||
```
|
||||
|
||||
### Button::content
|
||||
A ```string``` - main content of the button. You can set this upon ```SmartUI::create_button('Click Me');```
|
||||
```php
|
||||
$btn->content('Click Me');
|
||||
```
|
||||
|
||||
### Button::icon
|
||||
A ```string``` - icon of the button (e.g. ```fa-check```)
|
||||
```php
|
||||
$btn->icon('fa-check');
|
||||
```
|
||||
|
||||
### Button::type
|
||||
A ```string``` - button type (```default```, ```danger```, etc.)
|
||||
```php
|
||||
$btn->type('success');
|
||||
```
|
||||
|
||||
### Button::container
|
||||
A ```string``` - container of the button (e.g. ```<a ... > ... </a>```)
|
||||
```
|
||||
$btn->container('button');
|
||||
```
|
||||
|
||||
### Button::size
|
||||
A ```string``` - button sizes (```lg```, ```sm```, etc.)
|
||||
```php
|
||||
const BUTTON_SIZE_LARGE = 'lg';
|
||||
const BUTTON_SIZE_SMALL = 'sm';
|
||||
const BUTTON_SIZE_XSMALL = 'xs';
|
||||
const BUTTON_SIZE_MEDIUM = 'md';
|
||||
|
||||
//sample call
|
||||
$btn->size(Button::BUTTON_SIZE_LARGE);
|
||||
```
|
||||
|
||||
### Button::attr
|
||||
A ```string``` or ```closure``` or ```array``` - custom button attributes
|
||||
```php
|
||||
// if array
|
||||
$btn->attr(array('data-some-id' => 12345)); // etc.
|
||||
// or ...
|
||||
$btn->attr('data-some-id', 12345)->attr('href', 'http://myurl.com')->attr('target', '_blank');
|
||||
```
|
||||
|
||||
### Button::class
|
||||
A ```string``` or ```array``` or ```closure``` - additional button class
|
||||
```php
|
||||
$btn->class(array('bg-color-red', 'txt-color-white'));
|
||||
// or ...
|
||||
$btn->class(function($btn) {
|
||||
return array('bg-color-red', 'txt-color-white');
|
||||
})
|
||||
```
|
||||
|
||||
### Button::dropdown
|
||||
An ```array``` or ```closure``` - array of dropdown properties
|
||||
```php
|
||||
$dropdown = array(
|
||||
'items' => array(),
|
||||
'split' => array( // array or boolean or string (set to 'type' key) or closure (must return same structure array)
|
||||
'type' => $type,
|
||||
'disabled' => false,
|
||||
'dropup' => false,
|
||||
'class' => array(), // or string
|
||||
'attr' => array()
|
||||
),
|
||||
'multilevel' => false
|
||||
);
|
||||
|
||||
// sample call
|
||||
$items = array(
|
||||
'<a href="javascript:void(0);">Some action</a>',
|
||||
'<a href="javascript:void(0);">Some other action</a>',
|
||||
'-',
|
||||
array(
|
||||
'content' => '<a tabindex="-1" href="javascript:void(0);">Hover me for more options</a>',
|
||||
'submenu' => array(
|
||||
'<a tabindex="-1" href="javascript:void(0);">Second level</a>',
|
||||
array(
|
||||
'content' => '<a href="javascript:void(0);">Even More..</a>',
|
||||
'submenu' => array(
|
||||
'<a href="javascript:void(0);">3rd level</a>',
|
||||
'<a href="javascript:void(0);">3rd level</a>'
|
||||
)
|
||||
),
|
||||
'<a href="javascript:void(0);">Second level</a>',
|
||||
'<a href="javascript:void(0);">Second level</a>'
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
$btn->dropdown('items', $items)->dropdown('split', true);
|
||||
// or ... set the dropdown's own type
|
||||
$btn->dropdown('items', $items)->dropdown('split', 'success');
|
||||
```
|
||||
|
||||
## Tips!
|
||||
You can pass a ```closure``` and return an ```array``` (same way as passing the ```array``` directly) to some properties
|
||||
```php
|
||||
$btn->class(function($btn) {
|
||||
return array('bg-color-red', 'txt-color-white');
|
||||
})
|
||||
```
|
||||
127
docs/smartui/carousel.md
Normal file
127
docs/smartui/carousel.md
Normal file
@ -0,0 +1,127 @@
|
||||
# SmartUI::Carousel Class
|
||||
This is a basic usage of SmartUI's ```Carousel``` class. If you want to know more about the real HTML layout, click [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::Carousel($items [, $style = 'slide', $options = array()])
|
||||
```
|
||||
|
||||
## $items
|
||||
The ```$items``` parameter will initiate the number of items displayed in the carousel. You can pass either an ```assoc``` array that contains item names or just an ```array```.
|
||||
```php
|
||||
$items = array(
|
||||
ASSETS_URL."/img/demo/m3.jpg",
|
||||
ASSETS_URL."/img/demo/m1.jpg",
|
||||
ASSETS_URL."/img/demo/m2.jpg",
|
||||
);
|
||||
|
||||
// or ...
|
||||
$items = array(
|
||||
'item1' => ASSETS_URL."/img/demo/s1.jpg",
|
||||
'item2' => array(
|
||||
'img' => ASSETS_URL."/img/demo/s2.jpg",
|
||||
'caption' =>
|
||||
'<h4>S2 Background Image</h4>
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
<br>
|
||||
<a href="javascript:void(0);" class="btn btn-info btn-sm">Read more</a>'
|
||||
),
|
||||
'item3' => array(
|
||||
'img' => array(
|
||||
'src' => ASSETS_URL."/img/demo/s3.jpg",
|
||||
'alt' => 'This is s3 image'
|
||||
)
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
|
||||
|
||||
$items = array(
|
||||
ASSETS_URL."/img/demo/m3.jpg",
|
||||
ASSETS_URL."/img/demo/m1.jpg",
|
||||
ASSETS_URL."/img/demo/m2.jpg",
|
||||
);
|
||||
|
||||
$carousel = $_ui->create_carousel($items);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```
|
||||
$carousel->caption(0, '<h4>Title 1</h4>
|
||||
<p>
|
||||
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
<br>
|
||||
<a href="javascript:void(0);" class="btn btn-info btn-sm">Read more</a>'
|
||||
);
|
||||
```
|
||||
If you passed the ```items``` array with no specified keys, you'l use the array's indexes instead to set ```caption```, ```active```, etc.
|
||||
```php
|
||||
$carousel->caption(0, ...); // we specify item #0's caption property
|
||||
```
|
||||
|
||||
## Print it!
|
||||
```php
|
||||
$carousel->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### Carousel::item
|
||||
An ```array``` - The list of items (provided upon creation of ```SmartUI::Carousel```)
|
||||
```php
|
||||
$carousel->item(0, array('img' => ASSETS_URL."/img/demo/m3.jpg", 'caption' => 'this is the caption ...'));
|
||||
|
||||
// or ...
|
||||
$carousel->item(0, ASSETS_URL."/img/demo/m3.jpg"); // we set the image only for item #0
|
||||
```
|
||||
|
||||
### Carousel::id
|
||||
A ```string``` - ID attribute of your carousel instance
|
||||
|
||||
### Carousel::active
|
||||
An ```array``` - List of items and their ```active``` property
|
||||
```php
|
||||
$carousel->active(1, true); // set's item #1 to be the first active item
|
||||
```
|
||||
|
||||
### Carousel::caption
|
||||
An ```array``` - List of items and their ```caption``` property
|
||||
```php
|
||||
$carousel->caption(0, 'This is the content of item #0');
|
||||
```
|
||||
|
||||
### Carousel::img
|
||||
An ```array``` - List of items and their ```img``` property. The ```img``` property may contain ```string``` or ```array```.
|
||||
```
|
||||
$img_property = array(
|
||||
'src' => '',
|
||||
'alt' => ''
|
||||
);
|
||||
|
||||
// sample call ...
|
||||
$carousel->img(0, ASSETS_URL."/img/demo/my_new_image.jpg"); // set as string, directed to the img's src property
|
||||
|
||||
// or ...
|
||||
$carousel->img(0, array( // by using array
|
||||
'src' => ASSETS_URL."/img/demo/my_new_image.jpg",
|
||||
'alt' => 'This is the alt attribute of the image'
|
||||
));
|
||||
```
|
||||
|
||||
### Carousel::options
|
||||
An ```array``` - Available options of the class
|
||||
```php
|
||||
$options = array(
|
||||
'style' => 'slide', // default
|
||||
'controls' => array('<span class="glyphicon glyphicon-chevron-left"></span>', '<span class="glyphicon glyphicon-chevron-right"></span>') // default
|
||||
);
|
||||
|
||||
// sample call ...
|
||||
$carousel->options('controls', false) // we remove the controls!
|
||||
->options('style', 'fade') // change animation style to fade!
|
||||
```
|
||||
199
docs/smartui/datatable.md
Normal file
199
docs/smartui/datatable.md
Normal file
@ -0,0 +1,199 @@
|
||||
# SmartUI::DataTable Class
|
||||
This is a basic usage of SmartUI's ```DataTable``` class. If you want to know more about the real HTML layout, click [here](datatable.php)
|
||||
```php
|
||||
SmartUI::DataTable($data [, $options = array(), $title = '<h2>DataTable Result Set</h2>']);
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
$data = json_decode(file_get_contents(APP_URL."/data/data.json"));
|
||||
|
||||
|
||||
$options = array(
|
||||
'checkboxes' => true,
|
||||
'row_details' => '
|
||||
<div class="alert alert-warning fade in">
|
||||
<i class="fa-fw fa fa-warning"></i>
|
||||
<strong>Warning</strong> The ID for {{Name}} is #{{ID}}.
|
||||
</div>'
|
||||
);
|
||||
|
||||
$dt = $_ui->create_datatable($data, $options, '<h2>My Datatable</h2>');
|
||||
);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
// setup a cell
|
||||
$dt->cell('Name',
|
||||
array(
|
||||
'url' => 'http://myapp.com/?profile={{ID}}' // you get other's cell value using "{{COLUMN_NAME}}"
|
||||
)
|
||||
);
|
||||
|
||||
$dt->cell('Name', function($row, $value) {
|
||||
return 'http://myapp.com/?profile='.$row->ID // or use a callback to return "Name" column's custom content
|
||||
});
|
||||
|
||||
// hide a column
|
||||
$dt->hide('City', true);
|
||||
// or ...
|
||||
$dt->hidden(array('City'));
|
||||
```
|
||||
|
||||
## Print HTML!
|
||||
```php
|
||||
$dt->print_html();
|
||||
```
|
||||
|
||||
## Print JS!
|
||||
```php
|
||||
<script>
|
||||
<?php
|
||||
$dt->print_js();
|
||||
?>
|
||||
</script>
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### DataTable::cell
|
||||
```array``` of specified column name with ```string```, ```closure``` or ```array``` value
|
||||
```php
|
||||
$cell = array(
|
||||
'COLUMN_NAME' => array(
|
||||
'icon' => '',
|
||||
'content' => '',
|
||||
'color' => '',
|
||||
'url' => array( // can also be a direct string URL
|
||||
'href' => '',
|
||||
'target' => '',
|
||||
'title' => '',
|
||||
'attr' => ''
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// sample call
|
||||
$dt->cell(
|
||||
"Phone" => '{{Name}} - {{Phone}} <span class="label label-success">active</span>'
|
||||
);
|
||||
// or..
|
||||
$dt->cell('Phone', function($row, $value) {
|
||||
return $row->Name.' - '.$value.' <span class="label label-success">active</span>';
|
||||
});
|
||||
```
|
||||
|
||||
### DataTable::col
|
||||
```array``` of specified column name with ```string```, ```closure``` or ```array``` value
|
||||
```php
|
||||
$col = array(
|
||||
'COLUMN_NAME' => array( // can also be a closure, but you need to return same array structure. If string, it's default to the 'name' key
|
||||
'name' => '',
|
||||
'class' => '',
|
||||
'attr' => '',
|
||||
'icon' => '',
|
||||
'hidden' => false // or true
|
||||
)
|
||||
);
|
||||
|
||||
// sample call
|
||||
$dt->col('ID', array(
|
||||
'name' => 'ID #'
|
||||
));
|
||||
|
||||
// or...
|
||||
$dt->col('ID', 'ID #');
|
||||
```
|
||||
|
||||
### DataTable::options
|
||||
```array``` of options.
|
||||
```php
|
||||
$options = array(
|
||||
"in_widget" => true,
|
||||
"row_details" => false,
|
||||
"checkboxes" => false,
|
||||
"static" => false,
|
||||
"paginate" => true
|
||||
);
|
||||
|
||||
// sample call
|
||||
$dt->options('in_widget', true)->options('checkboxes', true);
|
||||
```
|
||||
|
||||
### DataTable::data
|
||||
```array``` of ```object``` or ```array```. This is the main datasource. It's recomended to set this up upon ```$_ui->create_datatable($data);```
|
||||
|
||||
### DataTable::widget
|
||||
```SmartUI::Widget``` the main widget container of the table (if ```$options['in_widget'] == true```). Check out ```Widget``` Class documentation [here](widgets-class.php)
|
||||
|
||||
### DataTable::id
|
||||
```string``` of table's id (will create a unique id if not specified)
|
||||
|
||||
### DataTable::row
|
||||
```array``` array of specified row ```index``` with ```array```, ```closure``` or ```string``` values.
|
||||
```php
|
||||
$row = array(2, array(
|
||||
"hidden" => false,
|
||||
"checkbox" => true,
|
||||
"detail" => true,
|
||||
"class" => "",
|
||||
"attr" => "",
|
||||
"content" => true
|
||||
));
|
||||
|
||||
// sample call
|
||||
$dt->row(2, array(
|
||||
'checkbox' => false,
|
||||
'deail' => true
|
||||
))
|
||||
// empty a row
|
||||
$dt->row(3, '');
|
||||
//hide a row
|
||||
$dt->row(4, false);
|
||||
```
|
||||
|
||||
### DataTable::hidden
|
||||
```array``` of hidden columns
|
||||
```php
|
||||
// sample call
|
||||
$dt->hidden(array('Name', 'Zip'));
|
||||
```
|
||||
|
||||
### DataTable::hide
|
||||
```array``` of column names with ```bool``` values
|
||||
```php
|
||||
// sample call
|
||||
$dt->hide('Name', true)->hide('Zip', true)->hide('City', false);
|
||||
```
|
||||
|
||||
### DataTable::js
|
||||
```array``` of js custom properties
|
||||
```php
|
||||
$js = array(
|
||||
'properties' => array(),
|
||||
'oTable' => '', // the oTable var
|
||||
'custom' => ''
|
||||
)
|
||||
|
||||
// sample call
|
||||
$dt->js('properties', array(
|
||||
'fnCreatedRow' => 'function( nRow, aData, iDataIndex ) {
|
||||
var cell = $("td:eq(7)", nRow);
|
||||
var city = aData[7];
|
||||
if ( city == "Abbotsford" || city == "Baranello" ) {
|
||||
cell.html(city + \' <span class="label label-info">great city</span>\');
|
||||
}
|
||||
}'
|
||||
));
|
||||
```
|
||||
|
||||
### DataTable::sort
|
||||
```array``` of specified coumn name to be sorted
|
||||
```php
|
||||
$sort = array('COLUMN_NAME', 'asc');
|
||||
|
||||
// sample call
|
||||
$dt->sort('Name', 'asc');
|
||||
```
|
||||
36
docs/smartui/general.md
Normal file
36
docs/smartui/general.md
Normal file
@ -0,0 +1,36 @@
|
||||
# SmartUI
|
||||
General elements that you can directly access by using some methods of SmartUI
|
||||
|
||||
## Alerts
|
||||
```SmartUI::print_alert($message = '' [, $type = 'info', $options = array(), $return = false])```
|
||||
|
||||
### Usage
|
||||
```php
|
||||
SmartUI::print_alert('<strong>Success</strong> The page has been added.', 'success');
|
||||
```
|
||||
|
||||
### Type
|
||||
```info```, ```success```, ```danger```, ```warning```
|
||||
|
||||
### Options
|
||||
Options available to configure your alert
|
||||
```php
|
||||
$options_map = array(
|
||||
'closebutton' => true,
|
||||
'block' => false,
|
||||
'container' => 'div',
|
||||
'class' => array(),
|
||||
'fade_in' => true,
|
||||
'icon' => $type
|
||||
);
|
||||
```
|
||||
#### Icon
|
||||
Icons associated with each type of alert
|
||||
```php
|
||||
$icon_map = array(
|
||||
'info' => 'fa-info',
|
||||
'warning' => 'fa-warning',
|
||||
'danger' => 'fa-times',
|
||||
'success' => 'fa-check'
|
||||
);
|
||||
```
|
||||
81
docs/smartui/progress.md
Normal file
81
docs/smartui/progress.md
Normal file
@ -0,0 +1,81 @@
|
||||
# SmartUI::print_progress
|
||||
Print a single Progress Bar. You can see full HTML documentation [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::print_progress($value [, $type = '', $options = array(), $return = false]);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
SmartUI::print_progress(55, 'success');
|
||||
```
|
||||
|
||||
## $type
|
||||
```info```, ```success```, ```danger```, ```warning```
|
||||
|
||||
## $options
|
||||
Options available to configure your progress bar
|
||||
```php
|
||||
$options_map = array(
|
||||
'transitional' => false,
|
||||
'class' => array(),
|
||||
'attr' => array(),
|
||||
'background' => '',
|
||||
'tooltip' => array(),
|
||||
'position' => 'left', // left, right, bottom (for vertical)
|
||||
'wide' => false,
|
||||
'size' => 'md', // sm, xs, md, xl, micro
|
||||
'striped' => false, // true or 'active'
|
||||
'vertical' => false
|
||||
);
|
||||
```
|
||||
|
||||
### $options[background]
|
||||
```redLight```, ```greenLight```, etc. Check out ```bg-color-*``` [here](typography.php)
|
||||
|
||||
### $options[striped]
|
||||
A ```boolean``` or the ```string``` "active" (will set to active stripped progress bar)
|
||||
```
|
||||
$options = array('striped' => 'active');
|
||||
```
|
||||
|
||||
***
|
||||
|
||||
# SmartUI::print_stack_progress
|
||||
Print a stacked Progress Bar. You can see full HTML documentation [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::print_stack_progress($progress_bars [, $base_options = array(), $return = false])
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
$progress_bars = array();
|
||||
$progress_bars[] = SmartUI::get_progress(80, '', array('background' => 'redLight'));
|
||||
$progress_bars[] = SmartUI::get_progress(55, 'info');
|
||||
$progress_bars[] = SmartUI::get_progress(33, 'success');
|
||||
SmartUI::print_stack_progress($progress_bars, array('size' => 'sm', 'tooltip' => 'Stacked Progress'), true);
|
||||
```
|
||||
|
||||
## $progress_bars
|
||||
An ```array``` of progress bar HTML. You can get a progress bar HTML suing ```SmartUI::get_progress($value [, $type = '', $options = array()])``` function
|
||||
```
|
||||
// initiate an array for progress bars
|
||||
$progress_bars = array();
|
||||
|
||||
// get progress bar #1
|
||||
$progress_bar = SmartUI::get_progress(80, '', array('background' => 'redLight'));
|
||||
// and so on ...
|
||||
```
|
||||
|
||||
## $base_options
|
||||
Available options for the progress bar parent
|
||||
```php
|
||||
$options_map = array(
|
||||
'tooltip' => array(),
|
||||
'position' => 'left', // left, right, bottom (for vertical)
|
||||
'wide' => false,
|
||||
'size' => 'md', // sm, xs, md, xl, micro
|
||||
'striped' => false, // true or 'active'
|
||||
'vertical' => false
|
||||
);
|
||||
```
|
||||
|
||||
289
docs/smartui/smartform.md
Normal file
289
docs/smartui/smartform.md
Normal file
@ -0,0 +1,289 @@
|
||||
# SmartUI::SmartForm Class
|
||||
This is a basic usage of SmartUI's ```SmartForm``` class. This class will help you build FORMS easyly without writing too many HML codes. If you want to know more about the real HTML layout, click [here](form-elements.php)
|
||||
|
||||
```php
|
||||
SmartUI::SmartForm($fields [, $options = array()]);
|
||||
```
|
||||
|
||||
## $fields
|
||||
The ```$fields``` is an ```array``` parameter will tell the SmartForm what fields to be added.
|
||||
```php
|
||||
$fields = array(
|
||||
'fname' => array(
|
||||
'type' => 'input', // or FormField::FORM_FIELD_INPUT
|
||||
'col' => 6,
|
||||
'properties' => array(
|
||||
'placeholder' => 'First name',
|
||||
'icon' => 'fa-user',
|
||||
'icon_append' => false
|
||||
)
|
||||
),
|
||||
'lname' => array(
|
||||
'type' => 'input',
|
||||
'col' => 6,
|
||||
'properties' => array(
|
||||
'placeholder' => 'Last name',
|
||||
'icon' => 'fa-user',
|
||||
'icon_append' => false
|
||||
)
|
||||
),
|
||||
// so on ...
|
||||
);
|
||||
```
|
||||
The ```key``` of eacy item is the Field's ```name``` attribute. It is also used when referring to a field you want to customize. Each ```item``` may contain an ```array``` or ```closure``` (must return the same array format). See below:
|
||||
```php
|
||||
$field = array(
|
||||
'fname' => (
|
||||
'type' => SmartForm::FORM_FIELD_INPUT, // the type of field.
|
||||
'col' => 0, // grid column
|
||||
'properties' => array() // properties of the field type
|
||||
)
|
||||
)
|
||||
```
|
||||
|
||||
### Field Types
|
||||
Below are the fields types used by ```SmartUI::SmartForm``` and it's properties
|
||||
|
||||
#### SmartForm::FORM_FIELD_INPUT
|
||||
```php
|
||||
$default_prop = array(
|
||||
'type' => 'text',
|
||||
'attr' => array(),
|
||||
'id' => '',
|
||||
'icon' => '',
|
||||
'icon_append' => true,
|
||||
'placeholder' => '',
|
||||
'value' => '',
|
||||
'tooltip' => array(),
|
||||
'disabled' => false,
|
||||
'autocomplete' => false,
|
||||
'size' => '',
|
||||
'class' => array()
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_LABEL
|
||||
```php
|
||||
$default_prop = array(
|
||||
'label' => ''
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_RATINGS
|
||||
```php
|
||||
$default_prop = array(
|
||||
'items' => array(),
|
||||
'icon' => 'fa-star'
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_RATING
|
||||
```php
|
||||
$default_prop = array(
|
||||
'max' => 5,
|
||||
'icon' => 'fa-star'
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_TEXTAREA
|
||||
```php
|
||||
$default_prop = array(
|
||||
'rows' => 3,
|
||||
'attr' => array(),
|
||||
'class' => array(),
|
||||
'value' => '',
|
||||
'id' => '',
|
||||
'type' => '',
|
||||
'placeholder' => ''
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_MULTISELECT
|
||||
```php
|
||||
$default_prop = array(
|
||||
'data' => array(),
|
||||
'display' => '',
|
||||
'value' => '',
|
||||
'container' => 'select',
|
||||
'id' => '',
|
||||
'attr' => array(),
|
||||
'class' => array(),
|
||||
'icon' => '<i></i>',
|
||||
'disabled' => false
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_SELECT
|
||||
```php
|
||||
$default_prop = array(
|
||||
'data' => array(),
|
||||
'display' => '',
|
||||
'value' => '',
|
||||
'container' => 'select',
|
||||
'id' => '',
|
||||
'attr' => array(),
|
||||
'class' => array(),
|
||||
'icon' => '<i></i>',
|
||||
'disabled' => false
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_FILEINPUT
|
||||
This is handled by the class automatically
|
||||
|
||||
#### SmartForm::FORM_FIELD_INPUT
|
||||
```php
|
||||
$default_prop = array(
|
||||
'type' => 'text',
|
||||
'attr' => array(),
|
||||
'id' => '',
|
||||
'icon' => '',
|
||||
'icon_append' => true,
|
||||
'placeholder' => '',
|
||||
'value' => '',
|
||||
'tooltip' => array(),
|
||||
'disabled' => false,
|
||||
'autocomplete' => false,
|
||||
'size' => '',
|
||||
'class' => array()
|
||||
);
|
||||
```
|
||||
#### SmartForm::FORM_FIELD_RADIO
|
||||
```php
|
||||
$default_prop = array(
|
||||
'items' => array(
|
||||
array(
|
||||
'name' => $name,
|
||||
'checked' => false,
|
||||
'value' => '',
|
||||
'label' => '',
|
||||
'id' => '',
|
||||
'disabled' => false
|
||||
),
|
||||
'Can Be a String Also', // a string value will directly be the item's label
|
||||
// next item and so on ...
|
||||
),
|
||||
'cols' => 0,
|
||||
'inline' => false,
|
||||
'toggle' => false
|
||||
);
|
||||
```
|
||||
|
||||
#### SmartForm::FORM_FIELD_CHECKBOX
|
||||
Same properties as ```SmartForm::FORM_FIELD_RADIO```
|
||||
|
||||
---
|
||||
|
||||
## Setup
|
||||
```php
|
||||
$fields = array(
|
||||
'fname' => array(
|
||||
'type' => 'input', // or FormField::FORM_FIELD_INPUT
|
||||
'col' => 6,
|
||||
'properties' => array(
|
||||
'placeholder' => 'First name',
|
||||
'icon' => 'fa-user',
|
||||
'icon_append' => false
|
||||
)
|
||||
),
|
||||
'lname' => array(
|
||||
'type' => 'input',
|
||||
'col' => 6,
|
||||
'properties' => array(
|
||||
'placeholder' => 'Last name',
|
||||
'icon' => 'fa-user',
|
||||
'icon_append' => false
|
||||
)
|
||||
),
|
||||
// so on ...
|
||||
);
|
||||
$form = $_ui->create_smartform($fields);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
$form->fieldset(0, array('fname'));
|
||||
$form->fieldset(1, array('lname'));
|
||||
```
|
||||
|
||||
## Print it!
|
||||
```php
|
||||
$form->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### SmartForm::options
|
||||
An ```array``` of available options
|
||||
```php
|
||||
$options = array(
|
||||
'in_widget' => true // default
|
||||
);
|
||||
|
||||
// sample call
|
||||
$form->options('in_widget', false); // remove the output form from the widget
|
||||
```
|
||||
|
||||
### SmartForm::field
|
||||
An ```array``` - list of ```fields``` (provided upon creation of ```SmartUI::SmartForm```)
|
||||
```php
|
||||
$form->field('fname', array(
|
||||
'type' => 'input', // or FormField::FORM_FIELD_INPUT
|
||||
'col' => 6,
|
||||
'properties' => array(
|
||||
'placeholder' => 'First name',
|
||||
'icon' => 'fa-user',
|
||||
'icon_append' => false
|
||||
)
|
||||
));
|
||||
```
|
||||
|
||||
### SmartForm::fieldset
|
||||
An ```array``` - list of ```fields``` with their corresponding ```<fieldset>``` location (```o``` indexed).
|
||||
```php
|
||||
$form->fieldset(0, array('fname')); // we set ```fname``` field to the first ```fieldset```
|
||||
$form->fieldset(1, array('lname', 'address')); // and ```address``` field to the second ```fieldset```
|
||||
```
|
||||
### SmartForm::type
|
||||
An ```array``` - list of ```fields``` with their corresponding field ```type```
|
||||
```php
|
||||
$form->type('fname', SmartForm::FORM_FIELD_INPUT);
|
||||
$form->type('checboxes', 'radio'); // change the ```type``` of field ```checkboxes``` to type ```SmartForm::FORM_FIELD_RADIO```
|
||||
```
|
||||
|
||||
### SmartForm::property
|
||||
An ```array``` - list of ```fields``` with their corresponding ```properties``` property
|
||||
```php
|
||||
$form->property('fname', array('col' => 3)); // change the ```properties[col]``` value of field ```fname```
|
||||
```
|
||||
### SmartForm::header
|
||||
A ```string``` - The form's header ```HTML``` content
|
||||
```php
|
||||
$form->header('My Form Below!!!');
|
||||
```
|
||||
### SmartForm::footer
|
||||
A ```string``` - The form's footer ```HTML``` content
|
||||
```php
|
||||
$form->footer(function($this) use ($_ui) {
|
||||
return $_ui->create_button('Submit', 'primary')->attr(array('type' => 'submit'))->print_html(true);
|
||||
});
|
||||
|
||||
// or ...
|
||||
$btn = $_ui->create_button('Submit', 'primary')->attr(array('type' => 'submit'))->print_html(true);
|
||||
$form->footer($btn->print_html(true));
|
||||
```
|
||||
### SmartForm::widget
|
||||
A ```SmartUI::Widget``` instance - the instance class of ```SmartUI::Widget```. Note that you need to set ```SmartUI::SmartForm::options['in_widget']``` to ```true```
|
||||
```php
|
||||
$widget = $form->widget;
|
||||
// configure your widget
|
||||
$widget->header('title', 'My Form Widget Title');
|
||||
```
|
||||
|
||||
### SmartForm::title
|
||||
A ```string``` - Title of the ```SmartForm::widget``` instance.
|
||||
```php
|
||||
$form->title('My New Title');
|
||||
// same thing when getting $form->widget and setting it's $form->widget->header('title', 'My New Title');
|
||||
```
|
||||
|
||||
### SmartForm::col
|
||||
An ```array``` - List of ```fields``` with their corresponding ```col``` property
|
||||
```php
|
||||
$form->col('lname', 6); // set the col property of field lname to 6
|
||||
```
|
||||
|
||||
131
docs/smartui/tab.md
Normal file
131
docs/smartui/tab.md
Normal file
@ -0,0 +1,131 @@
|
||||
# SmartUI::Tab Class
|
||||
This is a basic usage of SmartUI's ```Tab``` class. If you want to know more about the real HTML layout, click [here](general-elements.php)
|
||||
```php
|
||||
SmartUI::Tab($tabs [, $options = array()])
|
||||
```
|
||||
|
||||
## $tabs
|
||||
The ```$tabs``` parameter will initiate the number of tabs displayed. You can pass either an ```assoc``` array that contains tab ids or just an ```array```(not recomended) hense ids will be the zero base index number.
|
||||
```php
|
||||
$tabs = array(
|
||||
'my-tab-1' => array(
|
||||
'content' => '',
|
||||
'title' => 'Tab 1',
|
||||
'icon' => '',
|
||||
'dropdown' => '',
|
||||
'position' => '',
|
||||
'active' => false,
|
||||
'fade' => false
|
||||
),
|
||||
'my-tab-2' => array(
|
||||
'content' => '',
|
||||
'title' => 'Tab 2',
|
||||
'icon' => '',
|
||||
'dropdown' => '',
|
||||
'position' => '',
|
||||
'active' => false,
|
||||
'fade' => false
|
||||
)
|
||||
// so on ...
|
||||
)
|
||||
|
||||
// or ...
|
||||
$tabs = array(
|
||||
'my-tab-1' => 'Tab 1', // value acts as the 'title' property
|
||||
'my-tab-2' => 'Tab 2',
|
||||
// so on ...
|
||||
);
|
||||
|
||||
// or ...
|
||||
$tabs = array('Tab 1', 'Tab 2'); // tab #0 and #1 as ids
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
|
||||
|
||||
$mytabs = array(
|
||||
'my-tab-1' => 'Tab 1',
|
||||
'my-tab-2' => 'Tab 2'
|
||||
);
|
||||
|
||||
$tab = $_ui->create_tab($mytabs);
|
||||
```
|
||||
|
||||
## Usage
|
||||
```php
|
||||
$tab->content('my-tab-1', 'This is the content of my tab 1');
|
||||
$tab->content('my-tab-2', 'This is the content of my tab 2');
|
||||
```
|
||||
|
||||
## Print it!
|
||||
```php
|
||||
$tab->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### Tab::tab
|
||||
An ```array```. The list of tabs (provided upon creation of ```SmartUI::Tab```)
|
||||
```php
|
||||
$tab->tab('my-tab-1', array('content' => 'The content of this tab'));
|
||||
|
||||
// or ...
|
||||
$tab->tab('my-tab-1', 'My Tab 1'); // set as tab's 'title' property
|
||||
```
|
||||
|
||||
### Tab::content
|
||||
An ```array``` or ```closure``` of tabs with their ```content``` property.
|
||||
```php
|
||||
$tab->content = array(
|
||||
'my-tab-1' => 'This is the content of my tab 1'
|
||||
);
|
||||
|
||||
// or ...
|
||||
$tab->content('my-tab-1', 'This is the content of my tab 1');
|
||||
|
||||
// or even closure with callback (optional)
|
||||
$tab->content('my-tab-1', function($this, $tabs) {
|
||||
return 'This is the content of my tab and I am coding some stuff here to return';
|
||||
}, function($this) {
|
||||
// your callback code here ...
|
||||
})
|
||||
```
|
||||
Below other properties that are using the same setup as ```Tab::content``` property
|
||||
### Tab::icon
|
||||
### Tab::title
|
||||
### Tab::dropdown
|
||||
This one uses ```SmartUI::print_dropdown``` function. You can either pass an ```array``` of the dropdown's format or pure ```HTML``` string. Passing a ```closure``` needs you to return either ```array``` or ```HTML string```
|
||||
```php
|
||||
$dropdown_items = array(
|
||||
'<a href="javascript:void(0);">Some action</a>',
|
||||
'<a href="javascript:void(0);">Some other action</a>',
|
||||
'-',
|
||||
'<a href="javascript:void(0);">Some action below separator</a>'
|
||||
);
|
||||
$tab->dropdown('my-tab-2', $dropdown_items);
|
||||
```
|
||||
### Tab::position
|
||||
|
||||
### Tab::content_id
|
||||
A ```string``` - id attribute of ```<div class="tab-content ... " ... > ... </div>```
|
||||
|
||||
### Tab::tabs_id
|
||||
A ```string``` - id attribute of ```<ul class="tabs ... " ... > ... </div>```
|
||||
|
||||
### Tab::options
|
||||
An ```array``` - options available for the class
|
||||
```php
|
||||
$options = array(
|
||||
'bordered' => true,
|
||||
'position' => '',
|
||||
'pull' => '',
|
||||
'padding' => 10,
|
||||
'widget' => false
|
||||
);
|
||||
|
||||
// sample call
|
||||
$tab->options('bordered', true);
|
||||
|
||||
```
|
||||
114
docs/smartui/widget.md
Normal file
114
docs/smartui/widget.md
Normal file
@ -0,0 +1,114 @@
|
||||
# SmartUI::Widget Class
|
||||
This is a basic usage of SmartUI's ```Widget``` class. If you want to know more about the real HTML layout, click [here](widgets.php)
|
||||
```php
|
||||
SmartUI::Widget([$options = array(), $user_contents = array('body' = '', 'header' = '', 'color' = '')]);
|
||||
```
|
||||
|
||||
## Setup
|
||||
```php
|
||||
|
||||
$options = array("editbutton" => false);
|
||||
$widget = $_ui->create_widget($options);
|
||||
```
|
||||
## Usage
|
||||
|
||||
```php
|
||||
// using standard
|
||||
$widget->body = array(
|
||||
"editbox" => 'my edit box content',
|
||||
"content" => 'This is the content of my body.'
|
||||
);
|
||||
$widget->header = array(
|
||||
"title" => '<h2>The Title</h2>',
|
||||
"icon" => 'fa fa-check'
|
||||
)
|
||||
|
||||
// using jQuery style
|
||||
$widget->body("content", 'This is the content of my body.', function($widget) {
|
||||
// process callback here ...
|
||||
$widget->body("editbox", 'my edit box content');
|
||||
})->header("title", '<h2>The Title</h2>')->header("icon", 'fa fa-check'); // chaining
|
||||
```
|
||||
|
||||
## Print!
|
||||
```php
|
||||
$widget->print_html();
|
||||
```
|
||||
|
||||
## Property Reference
|
||||
Below are the list of available properties for the class:
|
||||
|
||||
### Widget::class
|
||||
A ```string``` or ```closure``` that will add your custom class to the main widget container ```<div class="jarviswidget" ... > ... </div>```
|
||||
|
||||
### Widget::color
|
||||
A ```string``` or ```closure``` that will add the color class to the main widget container ```<div class="jarviswidget jarviswidget-color-YOURCOLOR" ... > ... </div>```. See other documentations to get the list of available SmartAdmin colors.
|
||||
|
||||
### Widget::id
|
||||
A ```string``` or ```closure```
|
||||
|
||||
### Widget::attr
|
||||
A ```string```, ```closure``` or ```array``` of your own custom attributes
|
||||
|
||||
### Widget::options
|
||||
An ```array``` of widget options. See available optionss in the [HTML Documentation](widgets.php)
|
||||
|
||||
```php
|
||||
$options = array(
|
||||
"editbutton" => true,
|
||||
"colorbutton" => true,
|
||||
"editbutton" => true,
|
||||
"togglebutton" => true,
|
||||
"deletebutton" => true,
|
||||
"fullscreenbutton" => true,
|
||||
"custombutton" => true,
|
||||
"collapsed" => false,
|
||||
"sortable" => true,
|
||||
"refreshbutton" => false
|
||||
);
|
||||
```
|
||||
|
||||
### Widget::header
|
||||
A ```string```, ```closure``` or ```array``` for the widget's header
|
||||
|
||||
```php
|
||||
$header = array(
|
||||
"icon" => "",
|
||||
"class" => "",
|
||||
"id" => "",
|
||||
"title" => "",
|
||||
"toolbar" => array( // can also be a string or closure
|
||||
array(
|
||||
"id" => "",
|
||||
"content" => "",
|
||||
"class" => "",
|
||||
"attr" => "" // can be array('data-my-attribute'=>'some-1234', 'data-id'=>'1235')
|
||||
),
|
||||
// ... so on
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### Widget::body
|
||||
A ```string```, ```closure``` or ```array``` for body.
|
||||
|
||||
``` php
|
||||
$body = array( // can be string or closure
|
||||
"editbox" => "",
|
||||
"content" => "",
|
||||
"class" => "", // can also be an array
|
||||
"toolbar" => ""
|
||||
)
|
||||
```
|
||||
|
||||
## Tips!
|
||||
You can pass a ```closure``` and return an ```array``` (same way as passing the ```array``` directly)
|
||||
```php
|
||||
$widget->body = function($w) {
|
||||
// some logic here ...
|
||||
return array(
|
||||
"editbox" => "editbox content ....",
|
||||
"content" => "<h2>Body Content here ...</h2>"
|
||||
);
|
||||
};
|
||||
```
|
||||
Reference in New Issue
Block a user