182 |
183 |
185 |
186 | ngx-simplebar
184 | 
3 |
2 |
3 |
6 | 
7 | 
8 | 
9 | 
10 |
22 |
23 | #### Design it as you want
24 |
25 | SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).
26 |
27 | #### Lightweight and performant
28 |
29 | Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.
30 |
31 | #### Supported everywhere
32 |
33 | SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.
34 |
35 | ### Getting started
36 |
37 | The easiest way to use SimpleBar is with the default dependency-free version: `npm install simplebar`.
38 |
39 | - [Core documention](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar)
40 |
41 | If you are using a framework, SimpleBar also supports the most popular ones: Vue, Angular and React.
42 |
43 | - [React documention](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react)
44 | - [Angular documentation](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-angular)
45 | - [Vue documentation](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-vue)
46 |
47 | ### Demo
48 |
49 | You can check our [demo page](https://grsmto.github.io/simplebar/examples) (which is also the one we use for automated tests).
50 |
51 | ### Changelog
52 |
53 | See changelog here : https://github.com/Grsmto/simplebar/releases
54 |
55 | ### Credits
56 |
57 | - [KingSora](https://github.com/KingSora) for multiple features and inspirations (`height: auto` detection, RTL mode cross browser support and more) with [OverlayScrollbars](https://kingsora.github.io/OverlayScrollbars/).
58 | - [Jonathan Nicol](http://www.f6design.com/) for original idea with [Trackpad Scroll Emulator](https://github.com/jnicol/trackpad-scroll-emulator).
59 | - [Cassio Bittencourt](https://cassiobittencourt.com/) for the logo design.
60 |
--------------------------------------------------------------------------------
/examples/angular/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.ts]
12 | quote_type = single
13 |
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 |
--------------------------------------------------------------------------------
/examples/angular/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2 |
3 | # Compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | /bazel-out
8 |
9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 |
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 |
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 |
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 |
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/examples/angular/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 | "recommendations": ["angular.ng-template"]
4 | }
5 |
--------------------------------------------------------------------------------
/examples/angular/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
3 | "version": "0.2.0",
4 | "configurations": [
5 | {
6 | "name": "ng serve",
7 | "type": "chrome",
8 | "request": "launch",
9 | "preLaunchTask": "npm: start",
10 | "url": "http://localhost:4200/"
11 | },
12 | {
13 | "name": "ng test",
14 | "type": "chrome",
15 | "request": "launch",
16 | "preLaunchTask": "npm: test",
17 | "url": "http://localhost:9876/debug.html"
18 | }
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/angular/.vscode/tasks.json:
--------------------------------------------------------------------------------
1 | {
2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
3 | "version": "2.0.0",
4 | "tasks": [
5 | {
6 | "type": "npm",
7 | "script": "start",
8 | "isBackground": true,
9 | "problemMatcher": {
10 | "owner": "typescript",
11 | "pattern": "$tsc",
12 | "background": {
13 | "activeOnStart": true,
14 | "beginsPattern": {
15 | "regexp": "(.*?)"
16 | },
17 | "endsPattern": {
18 | "regexp": "bundle generation complete"
19 | }
20 | }
21 | }
22 | },
23 | {
24 | "type": "npm",
25 | "script": "test",
26 | "isBackground": true,
27 | "problemMatcher": {
28 | "owner": "typescript",
29 | "pattern": "$tsc",
30 | "background": {
31 | "activeOnStart": true,
32 | "beginsPattern": {
33 | "regexp": "(.*?)"
34 | },
35 | "endsPattern": {
36 | "regexp": "bundle generation complete"
37 | }
38 | }
39 | }
40 | }
41 | ]
42 | }
43 |
--------------------------------------------------------------------------------
/examples/angular/README.md:
--------------------------------------------------------------------------------
1 | # angular
2 |
3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.0.4.
4 |
5 | ## Development server
6 |
7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
8 |
9 | ## Code scaffolding
10 |
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 |
13 | ## Build
14 |
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16 |
17 | ## Running unit tests
18 |
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 |
21 | ## Running end-to-end tests
22 |
23 | Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24 |
25 | ## Further help
26 |
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
28 |
--------------------------------------------------------------------------------
/examples/angular/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular": {
7 | "projectType": "application",
8 | "schematics": {},
9 | "root": "",
10 | "sourceRoot": "src",
11 | "prefix": "app",
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:application",
15 | "options": {
16 | "outputPath": "dist/angular",
17 | "index": "src/index.html",
18 | "browser": "src/main.ts",
19 | "polyfills": ["zone.js"],
20 | "tsConfig": "tsconfig.app.json",
21 | "assets": [
22 | {
23 | "glob": "**/*",
24 | "input": "public"
25 | }
26 | ],
27 | "styles": ["src/styles.css"],
28 | "scripts": [],
29 | "preserveSymlinks": true
30 | },
31 | "configurations": {
32 | "production": {
33 | "budgets": [
34 | {
35 | "type": "initial",
36 | "maximumWarning": "500kB",
37 | "maximumError": "1MB"
38 | },
39 | {
40 | "type": "anyComponentStyle",
41 | "maximumWarning": "2kB",
42 | "maximumError": "4kB"
43 | }
44 | ],
45 | "outputHashing": "all"
46 | },
47 | "development": {
48 | "optimization": false,
49 | "extractLicenses": false,
50 | "sourceMap": true
51 | }
52 | },
53 | "defaultConfiguration": "production"
54 | },
55 | "serve": {
56 | "builder": "@angular-devkit/build-angular:dev-server",
57 | "configurations": {
58 | "production": {
59 | "buildTarget": "angular:build:production"
60 | },
61 | "development": {
62 | "buildTarget": "angular:build:development"
63 | }
64 | },
65 | "defaultConfiguration": "development"
66 | },
67 | "extract-i18n": {
68 | "builder": "@angular-devkit/build-angular:extract-i18n"
69 | },
70 | "test": {
71 | "builder": "@angular-devkit/build-angular:karma",
72 | "options": {
73 | "polyfills": ["zone.js", "zone.js/testing"],
74 | "tsConfig": "tsconfig.spec.json",
75 | "assets": [
76 | {
77 | "glob": "**/*",
78 | "input": "public"
79 | }
80 | ],
81 | "styles": ["src/styles.css"],
82 | "scripts": []
83 | }
84 | }
85 | }
86 | }
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/examples/angular/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "watch": "ng build --watch --configuration development",
9 | "test": "ng test"
10 | },
11 | "private": true,
12 | "dependencies": {
13 | "@angular/animations": "^18.0.0",
14 | "@angular/common": "^18.0.0",
15 | "@angular/compiler": "^18.0.0",
16 | "@angular/core": "^18.0.0",
17 | "@angular/forms": "^18.0.0",
18 | "@angular/platform-browser": "^18.0.0",
19 | "@angular/platform-browser-dynamic": "^18.0.0",
20 | "@angular/router": "^18.0.0",
21 | "rxjs": "~7.8.0",
22 | "simplebar-angular": "latest",
23 | "tslib": "^2.3.0",
24 | "zone.js": "~0.14.3"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "^18.0.4",
28 | "@angular/cli": "^18.0.4",
29 | "@angular/compiler-cli": "^18.0.3",
30 | "@types/jasmine": "~5.1.4",
31 | "jasmine-core": "~5.1.0",
32 | "karma": "~6.4.3",
33 | "karma-chrome-launcher": "~3.2.0",
34 | "karma-coverage": "~2.2.1",
35 | "karma-jasmine": "~5.1.0",
36 | "karma-jasmine-html-reporter": "~2.1.0",
37 | "typescript": "~5.4.2"
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/examples/angular/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Grsmto/simplebar/3885152e72af29662d613dca32f7b76d4120f184/examples/angular/public/favicon.ico
--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.css:
--------------------------------------------------------------------------------
1 | .container {
2 | border-radius: 6px;
3 | width: 200px;
4 | height: 200px;
5 | position: absolute;
6 | top: 0;
7 | left: 0;
8 | right: 0;
9 | bottom: 0;
10 | border: 1px dashed;
11 | margin: auto;
12 | }
13 |
14 | ngx-simplebar {
15 | height: 100%;
16 | }
17 |
--------------------------------------------------------------------------------
/examples/angular/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
179 |
180 | ↓Scrollable!↓
29 |↓Scrollable!↓
30 |↓Scrollable!↓
31 |↓Scrollable!↓
32 |↓Scrollable!↓
33 |
17 | To get started, edit src/App.js and save to reload.
18 |
Some content
22 | )} 23 |
2 |
3 |
6 | 
7 | 
8 |
9 | 
10 |
2 |
3 |
6 | 
7 | 
8 |
9 |
10 |
57 |
58 |
59 | 1. [Documentation](#1-documentation)
60 |
61 | ## 1. Documentation
62 |
63 | ### Passing options
64 |
65 | Find the list of available options on [the core documentation](https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/README.md#options).
66 |
67 | ```js
68 | Some content
12 | ))} 13 |Some content
24 | ))} 25 |Some content
43 | ))} 44 |Some content
60 | ))} 61 |Some content
81 | ))} 82 |Some content
101 | ))} 102 |Some content
121 | ))} 122 |
2 |
3 |
6 | 
7 | 
8 |
9 |
10 |
73 |
74 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/index.ts:
--------------------------------------------------------------------------------
1 | import simplebar from './component';
2 |
3 | export default simplebar;
4 |
--------------------------------------------------------------------------------
/packages/simplebar-vue/jest.config.js:
--------------------------------------------------------------------------------
1 | const { defaults: tsjPreset } = require('ts-jest/presets');
2 | const { isVue3 } = require('vue-demi');
3 |
4 | /** @type {import('ts-jest').JestConfigWithTsJest} */
5 | module.exports = {
6 | preset: 'ts-jest',
7 | transform: {
8 | ...tsjPreset.transform,
9 | '^.+\\.js?$': 'babel-jest',
10 | '^.+\\.vue$': isVue3 ? 'vue-jest' : 'vue-jest2',
11 | },
12 | moduleNameMapper: {
13 | '^@/(.*)$': 'You just hit a route that doesn't exist... the sadness.
11 |