Skip to content

Commit 7afb787

Browse files
dev-ahmedmahmouddev-ahmedmahmoud
committed
hotfix: migrated simple example using Vite for custom scrollbars
1 parent bf8325a commit 7afb787

File tree

7 files changed

+2681
-4065
lines changed

7 files changed

+2681
-4065
lines changed

‎examples/simple/components/SpringScrollbars/App.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/simple/index.html‎

Lines changed: 100 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,113 @@
1+
<!DOCTYPE html>
12
<html>
2-
<head>
3-
<title>react-custom-scrollbars simple example</title>
4-
<link rel="stylesheet" href="static/main.css">
5-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
8-
<meta name="apple-mobile-web-app-capable" content="yes" />
9-
<meta name="handheldFriendly" content="true">
10-
</head>
11-
<body>
12-
<div class="container">
13-
<div class="page-header">
14-
<h1>
15-
react-custom-scrollbars
16-
<a class="pull-right" href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
17-
<i class="fa fa-github"></i>
18-
</a>
19-
</h1>
20-
</div>
21-
<div class="section">
22-
<h3>Features</h3>
23-
<ul>
24-
<li>lightweight scrollbars made of 100% react goodness</li>
25-
<li>frictionless native browser scrolling</li>
26-
<li>native scrollbars for mobile devices</li>
27-
<li>fully customizable</li>
28-
<li><code>requestAnimationFrame</code> for 60fps</li>
29-
<li>no extra stylesheets</li>
30-
<li>IE9+ support</li>
31-
</ul>
32-
</div>
33-
<div class="section">
34-
<a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
35-
<strong>Documentation and examples on GitHub</strong>
3+
4+
<head>
5+
<title>react-custom-scrollbars simple example</title>
6+
<!-- <link rel="stylesheet" href="static/main.css"> -->
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
10+
<meta name="apple-mobile-web-app-capable" content="yes" />
11+
<meta name="handheldFriendly" content="true">
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<div class="page-header">
17+
<h1>
18+
react-custom-scrollbars
19+
<a class="pull-right" href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
20+
<i class="fa fa-github"></i>
3621
</a>
37-
</div>
38-
<div class="page-header">
39-
<h2>Examples</h2>
40-
</div>
41-
<div class="row">
42-
<div class="col-sm-6">
43-
<div class="section section-paper">
44-
<div class="pull-right">
45-
<strong>
46-
<i class="fa fa-code"></i>
47-
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/DefaultScrollbars" target="_blank">View source code</a>
48-
</strong>
49-
</div>
50-
<h3>Default style</h3>
51-
<div id="default-scrollbars-root"></div>
22+
</h1>
23+
</div>
24+
<div class="section">
25+
<h3>Features</h3>
26+
<ul>
27+
<li>lightweight scrollbars made of 100% react goodness</li>
28+
<li>frictionless native browser scrolling</li>
29+
<li>native scrollbars for mobile devices</li>
30+
<li>fully customizable</li>
31+
<li><code>requestAnimationFrame</code> for 60fps</li>
32+
<li>no extra stylesheets</li>
33+
<li>IE9+ support</li>
34+
</ul>
35+
</div>
36+
<div class="section">
37+
<a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
38+
<strong>Documentation and examples on GitHub</strong>
39+
</a>
40+
</div>
41+
<div class="page-header">
42+
<h2>Examples</h2>
43+
</div>
44+
<div class="row">
45+
<div class="col-sm-6">
46+
<div class="section section-paper">
47+
<div class="pull-right">
48+
<strong>
49+
<i class="fa fa-code"></i>
50+
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/DefaultScrollbars"
51+
target="_blank">View source code</a>
52+
</strong>
5253
</div>
54+
<h3>Default style</h3>
55+
<div id="default-scrollbars-root"></div>
5356
</div>
54-
<div class="col-sm-6">
55-
<div class="section section-paper">
56-
<div class="pull-right">
57-
<strong>
58-
<i class="fa fa-code"></i>
59-
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/ColoredScrollbars" target="_blank">View source code</a>
60-
</strong>
61-
</div>
62-
<h3>Custom style</h3>
63-
<div id="colored-scrollbars-root"></div>
57+
</div>
58+
<div class="col-sm-6">
59+
<div class="section section-paper">
60+
<div class="pull-right">
61+
<strong>
62+
<i class="fa fa-code"></i>
63+
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/ColoredScrollbars"
64+
target="_blank">View source code</a>
65+
</strong>
6466
</div>
67+
<h3>Custom style</h3>
68+
<div id="colored-scrollbars-root"></div>
6569
</div>
6670
</div>
67-
<div class="row">
68-
<div class="col-sm-6">
69-
<div class="section section-paper">
70-
<div class="pull-right">
71-
<strong>
72-
<i class="fa fa-code"></i>
73-
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/SpringScrollbars" target="_blank">View source code</a>
74-
</strong>
75-
</div>
76-
<h3>Spring scroll</h3>
77-
<div id="spring-scrollbars-root"></div>
71+
</div>
72+
<div class="row">
73+
<div class="col-sm-6">
74+
<div class="section section-paper">
75+
<div class="pull-right">
76+
<strong>
77+
<i class="fa fa-code"></i>
78+
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/SpringScrollbars"
79+
target="_blank">View source code</a>
80+
</strong>
7881
</div>
82+
<h3>Spring scroll</h3>
83+
<div id="spring-scrollbars-root"></div>
7984
</div>
80-
<div class="col-sm-6">
81-
<div class="section section-paper">
82-
<div class="pull-right">
83-
<strong>
84-
<i class="fa fa-code"></i>
85-
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/ShadowScrollbars" target="_blank">View source code</a>
86-
</strong>
87-
</div>
88-
<h3>Shadow scrollbars</h3>
89-
<div id="shadow-scrollbars-root"></div>
85+
</div>
86+
<div class="col-sm-6">
87+
<div class="section section-paper">
88+
<div class="pull-right">
89+
<strong>
90+
<i class="fa fa-code"></i>
91+
<a href="https://github.com/malte-wessel/react-custom-scrollbars/tree/master/examples/simple/components/ShadowScrollbars"
92+
target="_blank">View source code</a>
93+
</strong>
9094
</div>
95+
<h3>Shadow scrollbars</h3>
96+
<div id="shadow-scrollbars-root"></div>
9197
</div>
9298
</div>
93-
<div class="section text-center">
94-
<h5>
95-
<i class="fa fa-github"></i>
96-
<a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
97-
react-custom-scrollbars
98-
</a>
99-
</h5>
100-
<a href="https://github.com/malte-wessel" target="_blank">Malte Wessel</a>
101-
</div>
10299
</div>
103-
<script src="static/bundle.js"></script>
104-
</body>
105-
</html>
100+
<div class="section text-center">
101+
<h5>
102+
<i class="fa fa-github"></i>
103+
<a href="https://github.com/malte-wessel/react-custom-scrollbars" target="_blank">
104+
react-custom-scrollbars
105+
</a>
106+
</h5>
107+
<a href="https://github.com/malte-wessel" target="_blank">Malte Wessel</a>
108+
</div>
109+
</div>
110+
<script type="module" src="/index.jsx"></script>
111+
</body>
112+
113+
</html>

examples/simple/index.js renamed to examples/simple/index.jsx

File renamed without changes.

0 commit comments

Comments
 (0)