mirror of https://github.com/ColorlibHQ/AdminLTE
docs intro and browser support
Daniel
parent
825a2fc260
commit
f8b2dfbdc5
|
|
@ -191,7 +191,19 @@ const htmlPath = convertPathToHtml(path)
|
|||
|
||||
<li class="nav-header">DOCUMENTATIONS</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/color-mode.html'} class="nav-link">
|
||||
<a href={htmlPath + '/docs/index.html'} class:list={['nav-link', mainPage === 'introduction' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-download"></i>
|
||||
<p>Installation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', mainPage === 'browser-support' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-edge"></i>
|
||||
<p>Browser Support</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', mainPage === 'color-mode' && 'active']}>
|
||||
<i class="nav-icon fa-solid fa-star-half-stroke"></i>
|
||||
<p>Color Mode</p>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
AdminLTE comes with the same browser support as Bootstrap 5.
|
||||
|
||||
> ##### Excerpt from Bootstrap's official Documentation!
|
||||
> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms.
|
||||
>
|
||||
> For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).
|
||||
|
||||
You can find our supported range of browsers and their versions in [our .browserslistrc file](https://github.com/ColorlibHQ/AdminLTE/blob/master/.browserslistrc):
|
||||
|
||||
```
|
||||
# https://github.com/browserslist/browserslist#readme
|
||||
|
||||
>= 0.5%
|
||||
last 2 major versions
|
||||
not dead
|
||||
Chrome >= 60
|
||||
Firefox >= 60
|
||||
Firefox ESR
|
||||
iOS >= 12
|
||||
Safari >= 12
|
||||
not Explorer <= 11
|
||||
```
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
## Quick start
|
||||
There are multiple ways to install AdminLTE.
|
||||
|
||||
### Download & Changelog:
|
||||
Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
|
||||
Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
|
||||
Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
|
||||
|
||||
## Stable release
|
||||
### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
|
||||
_**Important Note**: You needed to add separately cdn links for plugins in your project._
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha1/dist/js/adminlte.min.js" integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw=" crossorigin="anonymous"></script>
|
||||
```
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha1/dist/css/adminlte.min.css" integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg=" crossorigin="anonymous">
|
||||
```
|
||||
### Using The Command Line:
|
||||
_**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
|
||||
#### Via npm
|
||||
```bash
|
||||
npm install admin-lte@4.0.0-alpha1 --save
|
||||
```
|
||||
#### Via Yarn
|
||||
```bash
|
||||
yarn add admin-lte@4.0.0-alpha1
|
||||
```
|
||||
#### Via Composer
|
||||
```bash
|
||||
composer require "almasaeed2010/adminlte=4.0.0-alpha1"
|
||||
```
|
||||
#### Via Git
|
||||
```bash
|
||||
git clone https://github.com/ColorlibHQ/AdminLTE.git
|
||||
```
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import BrowserSupport from "@components/docs/browser-support/index.md";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
const title = "Browser Support | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "browser-support";
|
||||
const page = "docs";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Browser Support</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Browser Support
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<BrowserSupport />
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,10 +6,10 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
|
|||
import Scripts from "@components/_scripts.astro";
|
||||
import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
|
||||
import ToggleScript from "@components/docs/color-mode/toggle-script.md";
|
||||
const title = "AdminLTE 4 | General Form Elements";
|
||||
const title = "Color Mode | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "forms";
|
||||
const page = "general";
|
||||
const mainPage = "color-mode";
|
||||
const page = "docs";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -31,7 +31,7 @@ const page = "general";
|
|||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
General Form
|
||||
</li>
|
||||
|
|
@ -127,13 +127,9 @@ const page = "general";
|
|||
</div>
|
||||
<!-- Start column -->
|
||||
<div class="col-12">
|
||||
<div class="lte-code-snippet">
|
||||
<NavbarHtml />
|
||||
</div>
|
||||
<NavbarHtml />
|
||||
|
||||
<div class="lte-code-snippet">
|
||||
<ToggleScript />
|
||||
</div>
|
||||
<ToggleScript />
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Footer from "@components/dashboard/_footer.astro";
|
||||
import Topbar from "@components/dashboard/_topbar.astro";
|
||||
import Sidenav from "@components/dashboard/_sidenav.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
import Introduction from "@components/docs/introduction/index.md";
|
||||
const title = "Introduction | AdminLTE 4";
|
||||
const path = '../../../dist'
|
||||
const mainPage = "introduction";
|
||||
const page = "docs";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<div class="app-wrapper">
|
||||
<Topbar path={path} />
|
||||
<Sidenav path={path} mainPage={mainPage} page={page} />
|
||||
<!-- Main content -->
|
||||
<main class="app-main">
|
||||
<div class="app-content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">Introduction</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
<li class="breadcrumb-item"><a href="#">Docs</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Introduction
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main content -->
|
||||
<div class="app-content">
|
||||
<div class="container-fluid">
|
||||
<Introduction />
|
||||
</div><!-- /.container-fluid -->
|
||||
</div>
|
||||
<!-- /.content -->
|
||||
</main>
|
||||
<!-- /.app-content -->
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
<!-- ./app-wrapper -->
|
||||
|
||||
<Scripts path={path} />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -68,6 +68,12 @@
|
|||
|
||||
// Sidebar Menu. First level links
|
||||
.sidebar-menu > .nav-item {
|
||||
&.menu-open {
|
||||
.nav-link.active:not(:hover) {
|
||||
--#{$lte-prefix}sidebar-menu-active-bg: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// links
|
||||
> .nav-link {
|
||||
&:active,
|
||||
|
|
@ -77,8 +83,8 @@
|
|||
}
|
||||
|
||||
> .nav-link.active:not(:hover) {
|
||||
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
|
||||
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
|
||||
color: var(--#{$lte-prefix}sidebar-menu-active-color);
|
||||
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
|
||||
}
|
||||
|
||||
// Hover and active states
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.lte-code-snippet .astro-code {
|
||||
padding: 1.5rem;
|
||||
.astro-code {
|
||||
padding: .75rem;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ $lte-sidebar-hover-bg-dark: rgba(255, 255, 255, .1) !default;
|
|||
$lte-sidebar-color-dark: #c2c7d0 !default;
|
||||
$lte-sidebar-hover-color-dark: $white !default;
|
||||
$lte-sidebar-active-color-dark: $white !default;
|
||||
$lte-sidebar-menu-active-bg-dark: transparent !default;
|
||||
$lte-sidebar-menu-active-bg-dark: rgba(255, 255, 255, .1) !default;
|
||||
$lte-sidebar-menu-active-color-dark: $white !default;
|
||||
$lte-sidebar-submenu-bg-dark: transparent !default;
|
||||
$lte-sidebar-submenu-color-dark: #c2c7d0 !default;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $lte-sidebar-hover-bg: rgba($black, .1) !default;
|
|||
$lte-sidebar-color: $gray-800 !default;
|
||||
$lte-sidebar-hover-color: $gray-900 !default;
|
||||
$lte-sidebar-active-color: $black !default;
|
||||
$lte-sidebar-menu-active-bg: transparent !default;
|
||||
$lte-sidebar-menu-active-bg: rgba($black, .1) !default;
|
||||
$lte-sidebar-menu-active-color: $black !default;
|
||||
$lte-sidebar-submenu-bg: transparent !default;
|
||||
$lte-sidebar-submenu-color: #777 !default;
|
||||
|
|
|
|||
Loading…
Reference in New Issue