AdminLTE Bootstrap Admin Dashboard Template

AdminLTE Bootstrap Admin
Dashboard Template
https://adminlte.io/
https://github.com/dojph/react-adminlte
1- Accéder à la plateforme
2- Télécharger la version intégrée avec reactjs (il s’agit d’un projet react auquel intégré
AdminLTE
3- Extraire le fichier dans le dossier EcommerceRedux/Frontend
code .
npm install
npm start
4- Accéder au site https://adminlte.io/themes/v3/
5- Appuyer sur le menu documentation
6- Changer Sidebar
Ouvrir ComponentMain sidebar
 Copier le code et accéder au site https://magic.reactjs.net/htmltojsx.htm permettant de

convertir le code HTML en JSX
 Copier le code (à partir de la balise <aside></aside> dans le fichier src/Menu.js
On obtient le code suivant :
import React, { Component } from 'react'
export default class Menu extends Component {

render() {
return (
<div>
{/* Main Sidebar Container */}
<aside className="main-sidebar sidebar-dark-primary elevation-4">
{/* Brand Logo */}
<a href="index3.html" className="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
className="brand-image img-circle elevation-3" style={{opacity: '.8'}} />
<span className="brand-text font-weight-light">AdminLTE 3</span>
</a>
{/* Sidebar */}
<div className="sidebar">
{/* Sidebar user panel (optional) */}
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image">
<img src="dist/img/user2-160x160.jpg" className="img-circle
elevation-2" alt="User Image" />
</div>
<div className="info">
<a href="#" className="d-block">Alexander Pierce</a>
</div>
</div>
{/* Sidebar Menu */}
<nav className="mt-2">
<ul className="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu">
{/* Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library */}
<li className="nav-item has-treeview menu-open">
<a href="#" className="nav-link active">
<i className="nav-icon fas fa-tachometer-alt" />
<p>
Starter Pages
<i className="right fas fa-angle-left" />
</p>
</a>
<ul className="nav nav-treeview">
<li className="nav-item">
<i className="far fa-circle nav-icon" />
<p>Active Page</p>
</a>
</li>
<a href="#" className="nav-link">
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<i className="nav-icon fas fa-th" />
<p>
Simple Link
<span className="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
{/* /.sidebar-menu */}
</div>
{/* /.sidebar */}
</aside>
</div>
)
}
}
On aura le résultat suivant :

Fichier Menu.js
import React, { Component } from 'react'
export default class Menu extends Component {

render() {
return (
<div>
{/* Main Sidebar Container */}
<aside className="main-sidebar sidebar-dark-primary elevation-4">
{/* Brand Logo */}
<a href="index3.html" className="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo"
className="brand-image img-circle elevation-3" style={{opacity: '.8'}} />
<span className="brand-text font-weight-light">AdminLTE 3</span>
</a>
{/* Sidebar */}
<div className="sidebar">
{/* Sidebar user panel (optional) */}
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image">
<img src="dist/img/user2-160x160.jpg" className="img-circle
elevation-2" alt="User Image" />
</div>
<div className="info">
<a href="#" className="d-block">Alexander Pierce</a>
</div>
</div>
{/* Sidebar Menu */}
<nav className="mt-2">
<ul className="nav nav-pills nav-sidebar flex-column" data-
widget="treeview" role="menu">
{/* Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library */}
<p>
Structure
</p>
</a>
<p>Utilisateurs</p>
</a>
</li>
<a href="#" className="nav-link ">
<p>Articles</p>
</a>
</li>
<p>Catégories</p>
</a>
</li>
<p>Sous Catégories</p>
</a>
</li>
</ul>
</li>

<p>
Traitements
</p>
</a>
<p>Facture</p>
</a>
</li>
<p>Panier</p>
</a>
</li>
<p>Paiement</p>
</a>
</li>
</a>
</li>
</ul>
</li>

<p>
Impression
</p>
</a>
<p>Article</p>
</a>
</li>
<p>Catégories</p>
</a>
</li>
<p>Facture</p>
</a>
</li>
</a>
</li>
</ul>
</li>

<p>
Recherche
</p>
</a>
<p>Article</p>
</a>
</li>
<p>Catégories</p>
</a>
</li>
<p>Facture</p>
</a>
</li>
</a>
</li>
</ul>
</li>
<i className="nav-icon fas fa-th" />
<p>
Simple Link
<span className="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
{/* /.sidebar-menu */}
</div>
{/* /.sidebar */}
</aside>
</div>
)
}
}
Accéder au site https://adminlte.io/themes/v3/

Acceder au fichier AdminLTE-3.2.0\pages\examples
Copier le fichier (source ) login-v2 dans le site https://magic.reactjs.net/htmltojsx.htm
Créer le composant Login
import React from 'react'
const Login = () => {

return (
<div>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<title>AdminLTE 3 | Log in (v2)</title>
{/* Google Font: Source Sans Pro */}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,400i,700&display=fallback" />
{/* Font Awesome */}
<link rel="stylesheet"
href="../../plugins/fontawesome-free/css/all.min.css" />
{/* icheck bootstrap */}
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-
bootstrap.min.css" />
{/* Theme style */}
<link rel="stylesheet" href="../../dist/css/adminlte.min.css" />
<div className="login-box">
{/* /.login-logo */}
<div className="card card-outline card-primary">
<div className="card-header text-center">
<a href="../../index2.html" className="h1"><b>Admin</b>LTE</a>
</div>
<div className="card-body">
<p className="login-box-msg">Sign in to start your session</p>
<form action="../../index3.html" method="post">
<div className="input-group mb-3">
<input type="email" className="form-control"
placeholder="Email" />
<div className="input-group-append">
<div className="input-group-text">
<span className="fas fa-envelope" />
</div>
</div>
</div>
<input type="password" className="form-control"
placeholder="Password" />
<span className="fas fa-lock" />
</div>
</div>
</div>
<div className="row">
<div className="col-8">
<div className="icheck-primary">
<input type="checkbox" id="remember" />
<label htmlFor="remember">
Remember Me
</label>
</div>
</div>
{/* /.col */}
<button type="submit" className="btn btn-primary btn-
block">Sign In</button>
</div>
{/* /.col */}
</div>
</form>
<div className="social-auth-links text-center mt-2 mb-3">
<a href="#" className="btn btn-block btn-primary">
<i className="fab fa-facebook mr-2" /> Sign in using
Facebook
</a>
<a href="#" className="btn btn-block btn-danger">
<i className="fab fa-google-plus mr-2" /> Sign in using
Google+
</a>
</div>
{/* /.social-auth-links */}
<p className="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p className="mb-0">
<a href="register.html" className="text-center">Register a
new membership</a>
</p>
</div>
{/* /.card-body */}
</div>
{/* /.card */}
</div>
{/* /.login-box */}
{/* jQuery */}
{/* Bootstrap 4 */}
{/* AdminLTE App */}
</div>
);
export default Login
Composant register.js
import React from 'react'
const Regiter = () => {

return (
<div>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AdminLTE 3 | Registration Page (v2)</title>
{/* Google Font: Source Sans Pro */}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Source+Sans+Pro:300,400,400i,700&display=fallback" />
{/* Font Awesome */}
<link rel="stylesheet"
href="../../plugins/fontawesome-free/css/all.min.css" />
{/* icheck bootstrap */}
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-
bootstrap.min.css" />
{/* Theme style */}
<link rel="stylesheet" href="../../dist/css/adminlte.min.css" />
<div className="register-box">
<div className="card card-outline card-primary">
<div className="card-header text-center">
<a href="../../index2.html" className="h1"><b>Admin</b>LTE</a>
</div>
<div className="card-body">
<p className="login-box-msg">Register a new membership</p>
<form action="../../index.html" method="post">
<input type="text" className="form-control"
placeholder="Full name" />
<span className="fas fa-user" />
</div>
</div>
</div>
<input type="email" className="form-control"
placeholder="Email" />
<span className="fas fa-envelope" />
</div>
</div>
</div>
placeholder="Password" />
</div>
</div>
</div>
placeholder="Retype password" />
</div>
</div>
</div>
<div className="row">
<div className="icheck-primary">
<input type="checkbox" id="agreeTerms" name="terms"
defaultValue="agree" />
<label htmlFor="agreeTerms">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>
{/* /.col */}
<button type="submit" className="btn btn-primary btn-
block">Register</button>
</div>
{/* /.col */}
</div>
</form>
<div className="social-auth-links text-center">
<a href="#" className="btn btn-block btn-primary">
<i className="fab fa-facebook mr-2" />
Sign up using Facebook
</a>
<a href="#" className="btn btn-block btn-danger">
<i className="fab fa-google-plus mr-2" />
Sign up using Google+
</a>
</div>
<a href="login.html" className="text-center">I already have a
membership</a>
</div>
{/* /.form-box */}
</div>{/* /.card */}
</div>
{/* /.register-box */}
{/* jQuery */}
{/* Bootstrap 4 */}
{/* AdminLTE App */}
</div>
)
}
export default Regiter

AdminLTE Bootstrap Admin Dashboard Template

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

AdminLTE Bootstrap Admin Dashboard Template

Transféré par

Droits d'auteur :

Formats disponibles

AdminLTE Bootstrap Admin

Ouvrir ComponentMain sidebar

 Copier le code et accéder au site https://magic.reactjs.net/htmltojsx.htm permettant de

import React, { Component } from 'react'

export default class Menu extends Component {

On aura le résultat suivant :

import React, { Component } from 'react'

export default class Menu extends Component {

<li className="nav-item has-treeview menu-open">

<li className="nav-item has-treeview menu-open">

<li className="nav-item has-treeview menu-open">

Accéder au site https://adminlte.io/themes/v3/

Copier le fichier (source ) login-v2 dans le site https://magic.reactjs.net/htmltojsx.htm

Créer le composant Login

import React from 'react'

const Login = () => {

export default Login

import React from 'react'

const Regiter = () => {

export default Regiter

Vous aimerez peut-être aussi