mirror of https://github.com/ColorlibHQ/AdminLTE
Merge pull request #2923 from ColorlibHQ/feat/docs-updates-changes
* add additional-styles docs section * add expandable tables section * small typo fixes in direct chat sectionpull/2925/head
REJack
GitHub
commit
16c24abc3b
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -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')
|
||||
```
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
layout: page
|
||||
title: Expandable Table Plugin
|
||||
---
|
||||
|
||||
The expandable table plugin provides simple functionality to create expandable tables.
|
||||
|
||||
##### Example Code
|
||||
```html
|
||||
<table class="table table-bordered table-hover">
|
||||
<tbody>
|
||||
<tr data-widget="expandable-table" aria-expanded="false">
|
||||
<td>183</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>219</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>657</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
<!-- YOUR EXPANDABLE TABLE BODY HERE -->
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
{: .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
|
||||
<tr data-widget="expandable-table" aria-expanded="true">
|
||||
<td>657</td>
|
||||
</tr>
|
||||
<tr class="expandable-body">
|
||||
<td>
|
||||
<p>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
> ##### 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)`
|
||||
Loading…
Reference in New Issue