Pustaka sidebar reaksi yang dapat disesuaikan dan responsif dengan menu tarik-turun

Blog

Pustaka sidebar reaksi yang dapat disesuaikan dan responsif dengan menu tarik-turun

Bilah Sisi Bereaksi Pro

Pustaka sidebar reaksi yang dapat disesuaikan dan responsif dengan menu tarik-turun dan jumlah submenu bersarang yang tidak terbatas

Demo

Pratinjau langsung

Tangkapan layar

reaksi-pro-sidebar

javascript dikonversi ke float

Instalasi

benang

yarn add react-pro-sidebar

di atas permukaan laut

npm install react-pro-sidebar

Penggunaan

import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar'; import 'react-pro-sidebar/dist/css/styles.css'; Dashboard Component 1 Component 2 ;

Jika Anda menggunakan sass maka Anda dapat mengimpor |_+_| langsung ke file scss Anda

styles.scss

Tata Letak Bilah Sisi

Anda dapat memanfaatkan komponen tata letak bilah sisi untuk mengatur konten bilah sisi Anda

@import '~react-pro-sidebar/dist/scss/styles.scss';

Gaya Kustom

Ada set variabel sass yang tersedia yang dapat Anda timpa untuk menentukan gaya Anda sendiri

api data pasar saham waktu nyata

Anda perlu memasukkan variabel override Anda sebelum mengimpor file scss

|_+_| . Anda file akan terlihat seperti ini

import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from 'react-pro-sidebar'; {/** * You can add a header for the sidebar ex: logo */} {/** * You can add the content of the sidebar ex: menu, profile details, ... */} {/** * You can add a footer for the sidebar ex: copyright */} ;

Variabel scss yang tersedia

custom.scss

Menggunakan sub-menu bersarang

Anda dapat memiliki sebanyak mungkin item menu dan sub-menu bersarang, dan sintaksnya sangat sederhana

// Your variable overrides $sidebar-bg-color: #1d1d1d; @import '~react-pro-sidebar/dist/scss/styles.scss';

Menggunakan React Router Dom

Berikut adalah contoh tentang cara menggunakan reaksi router dom dalam item menu

$sidebar-bg-color: #1d1d1d !default; $sidebar-color: #adadad !default; $sidebar-width: 270px !default; $sidebar-collapsed-width: 80px !default; $highlight-color: #d8d8d8 !default; $submenu-bg-color: #2b2b2b !default; $submenu-bg-color-collapsed: #2b2b2b !default; $icon-bg-color: #2b2b2b !default; $icon-size: 35px !default; $breakpoint-xs: 480px !default; $breakpoint-sm: 576px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 992px !default; $breakpoint-xl: 1200px !default;

API

Komponen Menopang Jenis Keterangan Bawaan
ProSidebar runtuh boolean status bilah sisi yang diciutkan Component 1 {/* you can have more nested submenus ... */}
rtl boolean arah RTL import { Link } from 'react-router-dom'; Dashboard ;
beralih rangkaian Alihkan status bilah sisi saat break point diaktifkan false
diToggle false Fungsi panggilan balik dipanggil ketika status beralih, terjadi ketika overlay diklik -
titik putus false (value:boolean)=>{} xs sm
lebar nomor rangkaian Lebar bilah sisi md
gambar rangkaian Url gambar untuk digunakan di latar belakang bilah sisi -
Tidak bisa ikonBentuk lg 270px 'square'
popperPanah boolean jika |_+_|, panah akan ditampilkan saat bilah sisi diciutkan untuk menunjuk ke pembungkus sub-menu 'round'
Item Menu ikon ReactNode Ikon untuk item menu -
aktif boolean Setel item menu aktif 'circle'
awalan ReactNode Tambahkan awalan ke menuItem -
akhiran ReactNode Tambahkan akhiran ke menuItem -
SubMenu judul rangkaian ReactNode Judul untuk submenu
ikon ReactNode Ikon untuk submenu -
defaultTerbuka boolean Setel jika submenu terbuka secara default true
membuka boolean Tetapkan nilai terbuka jika Anda ingin mengontrol status -
awalan ReactNode Tambahkan awalan ke submenu -
akhiran ReactNode Tambahkan sufiks ke submenu -

Unduh Detail:

Pengarang: azouaoui-med

Demo Langsung: https://azouaoui-med.github.io/react-pro-sidebar/

GitHub: https://github.com/azouaoui-med/react-pro-sidebar

#react #javascript #reactjs

cara beli drgn