mirror of https://github.com/ColorlibHQ/AdminLTE
123 lines
4.1 KiB
HTML
123 lines
4.1 KiB
HTML
<section id='adminlte-options'>
|
|
<h2 class='page-header'><a href="#adminlte-options">AdminLTE Javascript Options</a></h2>
|
|
<p class="lead">Modifying the options of AdminLTE's app.js can be done using one of the following ways.</p>
|
|
|
|
<h3>Editing app.js</h3>
|
|
<p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p>
|
|
|
|
<h3>Defining AdminLTEOptions</h3>
|
|
<p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it before loading app.js.</p>
|
|
<p>Example</p>
|
|
<pre class='prettyprint'><code class='html'><script>
|
|
var AdminLTEOptions = {
|
|
//Enable sidebar expand on hover effect for sidebar mini
|
|
//This option is forced to true if both the fixed layout and sidebar mini
|
|
//are used together
|
|
sidebarExpandOnHover: true,
|
|
//BoxRefresh Plugin
|
|
enableBoxRefresh: true,
|
|
//Bootstrap.js tooltip
|
|
enableBSToppltip: true
|
|
};
|
|
</script>
|
|
<script src='dist/js/app.js' type='text/javascript'></script></code></pre>
|
|
|
|
<h3>Available AdminLTE Options</h3>
|
|
<pre class='prettyprint'><code class='javascript'>{
|
|
//Add slimscroll to navbar menus
|
|
//This requires you to load the slimscroll plugin
|
|
//in every page before app.js
|
|
navbarMenuSlimscroll: true,
|
|
navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
|
|
navbarMenuHeight: "200px", //The height of the inner menu
|
|
//General animation speed for JS animated elements such as box collapse/expand and
|
|
//sidebar treeview slide up/down. This options accepts an integer as milliseconds,
|
|
//'fast', 'normal', or 'slow'
|
|
animationSpeed: 500,
|
|
//Sidebar push menu toggle button selector
|
|
sidebarToggleSelector: "[data-toggle='offcanvas']",
|
|
//Activate sidebar push menu
|
|
sidebarPushMenu: true,
|
|
//Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
|
|
sidebarSlimScroll: true,
|
|
//Enable sidebar expand on hover effect for sidebar mini
|
|
//This option is forced to true if both the fixed layout and sidebar mini
|
|
//are used together
|
|
sidebarExpandOnHover: false,
|
|
//BoxRefresh Plugin
|
|
enableBoxRefresh: true,
|
|
//Bootstrap.js tooltip
|
|
enableBSToppltip: true,
|
|
BSTooltipSelector: "[data-toggle='tooltip']",
|
|
//Enable Fast Click. Fastclick.js creates a more
|
|
//native touch experience with touch devices. If you
|
|
//choose to enable the plugin, make sure you load the script
|
|
//before AdminLTE's app.js
|
|
enableFastclick: true,
|
|
//Control Sidebar Options
|
|
enableControlSidebar: true,
|
|
controlSidebarOptions: {
|
|
//Which button should trigger the open/close event
|
|
toggleBtnSelector: "[data-toggle='control-sidebar']",
|
|
//The sidebar selector
|
|
selector: ".control-sidebar",
|
|
//Enable slide over content
|
|
slide: true
|
|
},
|
|
//Box Widget Plugin. Enable this plugin
|
|
//to allow boxes to be collapsed and/or removed
|
|
enableBoxWidget: true,
|
|
//Box Widget plugin options
|
|
boxWidgetOptions: {
|
|
boxWidgetIcons: {
|
|
//Collapse icon
|
|
collapse: 'fa-minus',
|
|
//Open icon
|
|
open: 'fa-plus',
|
|
//Remove icon
|
|
remove: 'fa-times'
|
|
},
|
|
boxWidgetSelectors: {
|
|
//Remove button selector
|
|
remove: '[data-widget="remove"]',
|
|
//Collapse button selector
|
|
collapse: '[data-widget="collapse"]'
|
|
}
|
|
},
|
|
//Direct Chat plugin options
|
|
directChat: {
|
|
//Enable direct chat by default
|
|
enable: true,
|
|
//The button to open and close the chat contacts pane
|
|
contactToggleSelector: '[data-widget="chat-pane-toggle"]'
|
|
},
|
|
//Define the set of colors to use globally around the website
|
|
colors: {
|
|
lightBlue: "#3c8dbc",
|
|
red: "#f56954",
|
|
green: "#00a65a",
|
|
aqua: "#00c0ef",
|
|
yellow: "#f39c12",
|
|
blue: "#0073b7",
|
|
navy: "#001F3F",
|
|
teal: "#39CCCC",
|
|
olive: "#3D9970",
|
|
lime: "#01FF70",
|
|
orange: "#FF851B",
|
|
fuchsia: "#F012BE",
|
|
purple: "#8E24AA",
|
|
maroon: "#D81B60",
|
|
black: "#222222",
|
|
gray: "#d2d6de"
|
|
},
|
|
//The standard screen sizes that bootstrap uses.
|
|
//If you change these in the variables.less file, change
|
|
//them here too.
|
|
screenSizes: {
|
|
xs: 480,
|
|
sm: 768,
|
|
md: 992,
|
|
lg: 1200
|
|
}
|
|
}</code></pre>
|
|
</section> |