Thanks to the solid modular AgileUI arhitecture, modal windows customizations are very flexible and easy to apply.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
Click to change the layout color scheme. You can associate different color schemes for layouts and main content elements.
Tables headers inherit the template secondary color scheme .ui-state-default.
By default the header texts in tables are centered. To align them either left or right you need to use one of the following core helper class: text-left or text-right
To create a basic table you need to use the HTML structure below with the .table class.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| footer | |||
Beside the HTML structure and the .table class from the normal tables, to create consensed tabled you need to add the .table-condensed class.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| footer | |||
You can create hover tables by adding the .table-hover class to your tables. These tables highlight the hovered row with a light yellow color.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| footer | |||
Striped tables can by created by add the .table-striped class to your tables. These kind of tables have the odd row have a light gray color to make it easy to differentiate between rows.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
| footer | |||
Rounded tables can by created by add the .table-rounded class to your tables. These kind of tables inherit the border radius from the selected template style.
| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 3 | row 1, cell 4 |
| row 2, cell 1 | row 2, cell 2 | row 2, cell 3 | row 2, cell 4 |
Responsive tables change their width and arangement based on the screen size.