diff --git a/docs/_config.yml b/docs/_config.yml index 8b4618753..7bbe8e842 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -67,18 +67,23 @@ navigation: url: javascript/toasts.html - title: Sidebar Search url: javascript/sidebar-search.html + - title: Expandable Tables + url: javascript/expandable-tables.html - title: Browser Support url: browser-support.html icon: fab fa-chrome - - title: Upgrade Guide - url: upgrade-guide.html - icon: fas fa-hand-point-up - title: Implementations url: implementations.html icon: fas fa-bookmark + - title: Additional Styles + url: additional-styles.html + icon: fas fa-mortar-pestle + - title: Upgrade Guide + url: upgrade-guide.html + icon: fas fa-hand-point-up - title: FAQ url: faq.html icon: fas fa-question-circle - title: License url: license.html - icon: fas fa-file-alt + icon: fas fa-file-contract diff --git a/docs/additional-styles.md b/docs/additional-styles.md new file mode 100644 index 000000000..4e7c4326a --- /dev/null +++ b/docs/additional-styles.md @@ -0,0 +1,67 @@ +--- +layout: page +title: Additional Styles / Custom Skin +--- + +If you want to create additional styles like a company specific color for buttons, the background utility or something else you can simply create your own subversion of AdminLTE with the following SCSS template. + +In this example we create a custom button class called `.btn-custom-color` with an extra button style and a custom class called `.my-custom-style`. + +```scss +// Bootstrap +// --------------------------------------------------- +@import '~bootstrap/scss/functions'; +@import '~admin-lte/build/scss/bootstrap-variables'; + +// Custom Theme Color START +$custom-color: #00FF00; +$theme-colors: map-merge(( + 'custom-color': $custom-color, +), $theme-colors); +// Custom Theme Color END + +// Variables and Mixins +// --------------------------------------------------- +@import '~admin-lte/build/scss/variables'; +@import '~admin-lte/build/scss/mixins'; + +@import '~bootstrap/scss/bootstrap'; + +@import '~admin-lte/build/scss/parts/core'; +@import '~admin-lte/build/scss/parts/components'; +@import '~admin-lte/build/scss/parts/extra-components'; +@import '~admin-lte/build/scss/parts/pages'; +@import '~admin-lte/build/scss/parts/plugins'; +@import '~admin-lte/build/scss/parts/miscellaneous'; + +// Custom Style START +.my-custom-style { + background-color: $custom-color; + padding: .5rem 0; +} +// Custom Style END +``` +{: .max-height-300} + +You can also create a skin on top of AdminLTE with the following SCSS template. + +In this example we create a custom class called `.btn-custom-color` with a extra button style. + +```scss +// Bootstrap +// --------------------------------------------------- +@import '~bootstrap/scss/functions'; +@import '~admin-lte/build/scss/bootstrap-variables'; +@import '~bootstrap/scss/mixins'; + +$custom-color: #00FF00; + +.btn-custom-color { + @include button-variant($custom-color, $custom-color); +} +``` + + +> ##### Warning! +> These examples are only raw SCSS templates, you will still need a SCSS -> CSS build script to compile the SCSS to CSS! +{: .quote-warning} diff --git a/docs/javascript/direct-chat.md b/docs/javascript/direct-chat.md index a43307459..93f6f4a8c 100644 --- a/docs/javascript/direct-chat.md +++ b/docs/javascript/direct-chat.md @@ -17,7 +17,7 @@ Add `data-widget="chat-pane-toggle"` to a button to activate the plugin. ###### jQuery {: .text-bold } -The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events. +The jQuery API provides more customizable options that allows the developer to toggle the chat contact pane. ```js $('#chat-pane-toggle').DirectChat('toggle') ``` diff --git a/docs/javascript/expandable-tables.md b/docs/javascript/expandable-tables.md new file mode 100644 index 000000000..c9689c330 --- /dev/null +++ b/docs/javascript/expandable-tables.md @@ -0,0 +1,106 @@ +--- +layout: page +title: Expandable Table Plugin +--- + +The expandable table plugin provides simple functionality to create expandable tables. + +##### Example Code +```html + + + + + + + + + + + + + + + + + + + + + +
+

+ +

+
219
+

+ +

+
657
+

+ +

+
+``` +{: .max-height-300} + + +> ##### Tip! +> You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header. +{: .quote-info} + + +##### Usage +This plugin can be activated as a jQuery plugin or using the data api. + +###### Data API +{: .text-bold } +Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class. +```html + + 657 + + + +

+

+ + +``` + +> ##### Tip! +> To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body. +{: .quote-info} + + +###### jQuery +{: .text-bold } +The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row. +```js +$('#expandable-table-header-row').ExpandableTable('toggleRow') +``` + + +##### Methods +{: .mt-4} + +|--- +| Method | Description +|-|- +|toggleRow | Toggles the state of the expandable table body between hidden and visible. +{: .table .table-bordered .bg-light} + +Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')` + + +##### Events +{: .mt-4} + +|--- +| Event Type | Description +|-|- +|expanded.lte.expandableTable | Triggered after a expandable table body is expanded. +|collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed. +{: .table .table-bordered .bg-light} + +Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)`