wtorek, 5 lipca, 2022
Strona głównaPremiumReact JsProsty pasek przewijania - simplebar-react

Prosty pasek przewijania – simplebar-react

SimpleBar zastępuje standardowy pasek przewijania, niestandardowym paskiem z stylami CSS oczywiście bez utraty wydajności.

-

- Reklama -
Dark Mode

simplebar (this link opens in a new window) by Grsmto (this link opens in a new window)

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

SimpleBar zastępuje standardowy pasek przewijania, niestandardowym paskiem z stylami CSS oczywiście bez utraty wydajności. W przeciwieństwie do niektórych popularnych wtyczek, SimpleBar nie naśladuje przewijania w JavaScript, które powoduje szarpnięcia i dziwne zachowania podczas przewijania. Jednym słowem SimpleBar, dzięki swoim niesamowitym właściwością zachowuje swoją niesamowitość natywnego przewijania jako niestandardowy pasek przewijania. Pasek zachowuje natywne overflow: auto, zastępowany jest tylko wygląd paska nowymi stylami CSS.

SimpleBar używa czystego CSS do stylizacji paska przewijania. Można go łatwo dostosować jak tylko chcesz 🙂 . Możesz dać kilka styli na tej samej stronie lub zachować domyślny styl paska taki jak na Mac OS.

SimpleBar  jest lekki i wydajny, zminimalizowany zawiera tylko 6kb. Pasek został przetestowany na przeglądarkach: Chrome, Firefox, Safari, Edge, IE11.

Co jest jeszcze ważne SimpleBar nie jest do użytku na elemencie body.

Meta:

Oficjalna strona: Wejdź na stronę internetową

Repozytorium: GitHub simplebar-react

Rozmiar repozytorium: 2 047 KB

NPM: npm i simplebar-react

Licencja: MIT

Pobierz: X-plugin simplebar-react

– Reklama –
– Reklama –

Funkcje i cechy:

  • Automatyczne chowanie paska jak użytkownik nie przewija paska, można ustawić pasek też żeby był cały czas widoczny.
  • Możesz kontrolować animacje za pomocą CSS.
  • Istnieje możliwość zmiany domyślnych nazw klas, które używa pasek na swoje, pamiętaj aby też do tej zmiany skonfigurować swój CSS.
  • Możesz wymusić widoczność ścieżki tak samo jak byś robił overflow: scroll, domyślnie pasek zachowuje się jak by miał ustawione overflow: auto.
  • Możesz ustawić niestandardowy atrybut etykiet aria dla użytkowników korzystających z czytnika ekranu za pomocą ariaLabel.
  • Można zdefiniować opóźnienie ukrycia paska.
  • Można ustawić minimalny i maksymalny rozmiar paska przewijania w px.
  • Można wymusić przewijanie paska tylko w pionie lub w poziomie.

Instalacja:

Aby dodać do swojego projektu ten widżet musisz użyć NPM-a lub YARN menadżera pakietów dla pluginów JavaScript.

npm install simplebar-react --save // npm
yarn add simplebar-react // yarn
– Reklama –

Stosowania i podstawowe metody:

SimpleBar używamy jak każdego komponentu Reactowego.

<SimpleBar forceVisible="y" autoHide={false}>
  // your content
</SimpleBar>

Dodatkowe opcje przewidziane tylko dla komponentu reactowego.

scrollableNodeProps – Możesz przekazać referencje do podstawowego div-a elementu przewijanego. Przydatne jest to, jeśli chcesz mieć dostęp do zdarzeń wywoływanych na tym elemencie np. scroll i zastosować np. zdarzenie przewijania do dołu.

const scrollableNodeRef = React.createRef();

<SimpleBar scrollableNodeProps={{ ref: scrollableNodeRef }}>
  // your content
</SimpleBar>
– Reklama –

Dostęp do instancji SimpleBar

const ref = useRef();

useEffect(() => {
  ref.current.recalculate();
  console.log(ref.current.el); // <- the root element you applied SimpleBar on
})

<SimpleBar ref={ref}>
  // your content
</SimpleBar>

Dostęp do ref z poziomu komponentu renderowanego

<SimpleBar>
  {({ scrollableNodeRef, contentNodeRef }) => {
    // Now you have access to scrollable and content nodes
    return <div></div>;
  }}
</SimpleBar>
– Reklama –

Przykład w codesandbox.io.

Moja wersja demo, przykład wykorzystania w standardowym projekcie.

Myślę że ten przykład wyjaśnią wszystkie wątpliwości z uruchomianiem pluginu. Po więcej zapraszam z zapoznaniem się z oficjalnym źródłem pluginu na github.

Pozdrawiam… 🙂

– Reklama –
- Reklama -
- Reklama -

Zostaw swój komentarz na ten temat:

- Reklama -

MUSISZ TO PRZECZYTAĆ

Szablon administratora Corona Admin – Free

0
Szablon administratora Corona Admin ma piękną typografię, wyrazisty design i starannie zaprojektowane pulpity nawigacyjne.
- Reklama -
- Reklama -