Skip to content

Commit 950d0fd

Browse files
ahmnouiraahmnouira
committed
style: fix example ui
1 parent f3f9efc commit 950d0fd

File tree

9 files changed

+1443
-681
lines changed

9 files changed

+1443
-681
lines changed

‎example/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@types/react-dom": "16.9.14",
1515
"@types/react-router": "5.1.16",
1616
"@types/react-router-dom": "5.1.8",
17+
"babel-jest": "^26.6.0",
1718
"ionicons": "5.5.3",
1819
"react": "17.0.2",
1920
"react-dom": "17.0.2",
@@ -59,5 +60,8 @@
5960
"last 1 safari version"
6061
]
6162
},
62-
"description": "An Ionic project"
63+
"description": "An Ionic project",
64+
"devDependencies": {
65+
"jest": "26.6.0"
66+
}
6367
}

‎example/src/components/Lorem.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
div {
2+
padding: 8px;
3+
margin-bottom: 12px;
4+
}
5+
6+
17
p {
28
font-size: 16px;
39
line-height: 22px;

‎example/src/components/Lorem.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import './Lorem.css';
22

33
export const Lorem: React.FC<{}> = ({ }) => {
4+
45
return (
5-
<p>
6-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
7-
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
8-
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
9-
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
10-
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
11-
like Aldus PageMaker including versions of Lorem Ipsum.
12-
</p>
6+
<div>
7+
8+
<p>
9+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
10+
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
11+
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
12+
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
13+
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
14+
like Aldus PageMaker including versions of Lorem Ipsum.
15+
</p>
16+
</div>
1317
)
1418
}

‎example/src/pages/Home.tsx‎

Lines changed: 6 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
2+
import { Lorem } from '../components/Lorem';
23
import './Home.css';
34

45
const Home: React.FC = () => {
@@ -18,66 +19,11 @@ const Home: React.FC = () => {
1819

1920

2021
<IonContent fullscreen className="ion-padding">
21-
<p>This directive enables parallax effect on <code>ion-header</code> elements to display a cover photo while on top of
22-
the page and transition it to the normal navbar when content is scrolled down.</p>
23-
<h2 id="set-up">Set Up</h2>
24-
<ol>
25-
<li>Install package: <code>$ npm i ionic-header-parallax</code>.</li>
26-
<li>Import the directive into your desired module (usually <code>app.module.ts</code>):</li>
27-
</ol>
28-
<pre className="hljs"><code><div><span className="hljs-keyword">import</span> IonicHeaderParallaxModule <span className="hljs-keyword">from</span> <span className="hljs-string">'ionic-header-parallax'</span>;
29-
30-
<span className="hljs-meta">@NgModule</span>(
31-
imports: [
32-
IonicHeaderParallaxModule,
33-
...
34-
</div></code></pre>
35-
<h2 id="usage">Usage</h2>
36-
<p>Just add the attribute <code>parallax</code> to any <code>&lt;ion-header&gt;</code> element:</p>
37-
<pre className="hljs"><code><div><span className="hljs-tag">&lt;<span className="hljs-name">ion-header</span> <span className="hljs-attr">parallax</span>&gt;</span><span className="hljs-tag">&lt;/<span className="hljs-name">ion-header</span>&gt;</span>
38-
</div></code></pre>
39-
<p>Optional attributes:</p>
40-
<ul>
41-
<li><code>imageUrl (string)</code>: The background image to show while expanded.</li>
42-
<li><code>maximumHeight (number)</code>: The height for the header when expanded. Default is <code>200</code>.</li>
43-
<li><code>expandedColor (string)</code>: The color (web hex formatted) to show while the header is expanded when no
44-
<code>imageUrl</code> is set. When scrolled it will fade to the navbar/toolbar's color or the one configured in
45-
<code>&lt;toolbar color=&quot;&quot;&gt;</code> attribute.</li>
46-
<li><code>titleColor (string)</code>: The text color (web hex formatted) for <code>&lt;ion-title&gt;</code> and
47-
<code>&lt;ion-back-button&gt;</code> elements when expanded. They will turn to their default color on cover
48-
collapse.</li>
49-
</ul>
50-
<p>Example:</p>
51-
<pre className="hljs"><code><div><span className="hljs-tag">&lt;<span className="hljs-name">ion-header</span> <span className="hljs-attr">parallax</span> <span className="hljs-attr">imageUrl</span>=<span className="hljs-string">"https://picsum.photos/350"</span> <span className="hljs-attr">maximumHeight</span>=<span className="hljs-string">"350"</span> <span className="hljs-attr">expandedColor</span>=<span className="hljs-string">"#AAA"</span> <span className="hljs-attr">titleColor</span>=<span className="hljs-string">"black"</span>&gt;</span>
52-
53-
<span className="hljs-tag">&lt;<span className="hljs-name">ion-toolbar</span> <span className="hljs-attr">color</span>=<span className="hljs-string">"primary"</span>&gt;</span>
54-
<span className="hljs-tag">&lt;<span className="hljs-name">ion-title</span>&gt;</span>
55-
Parallax Header
56-
<span className="hljs-tag">&lt;/<span className="hljs-name">ion-title</span>&gt;</span>
57-
<span className="hljs-tag">&lt;/<span className="hljs-name">ion-toolbar</span>&gt;</span>
58-
<span className="hljs-tag">&lt;/<span className="hljs-name">ion-header</span>&gt;</span>
59-
60-
<span className="hljs-tag">&lt;<span className="hljs-name">ion-content</span>&gt;</span>
61-
Some content here
62-
<span className="hljs-tag">&lt;/<span className="hljs-name">ion-content</span>&gt;</span>
63-
</div></code></pre>
64-
<h2 id="modifying-the-source-code">Modifying the Source Code</h2>
65-
<p>In case you need to make your own modifications, the package is pretty simple, just 1 .ts file. You can clone the
66-
repo wherever in your ionic project (usually inside the <code>directives</code> folder):
67-
<code>$ git clone https://github.com/RaschidJFR/ionic-header-parallax.git</code>. Then edit the file
68-
<code>src/lib/parallax.directive.ts</code>.</p>
69-
<h2 id="contributing">Contributing</h2>
70-
<p>I don't plan to be full-time maintaining this package, but as I'm usually developing in Ionic I'll be glad to
71-
update it any time I make some upgrades for myself.
72-
Contributions are very welcome. The source files can be found in the <a
73-
href="https://github.com/RaschidGithub/ionic-header-parallax">repo</a>.</p>
74-
<h2 id="credits">Credits</h2>
75-
<p>Raschid JF. Rafaelly</p>
76-
<p><a href="mailto:me@raschidjfr.dev">me@raschidjfr.dev</a></p>
77-
<p><a href="https://raschidjfr.dev">https://raschidjfr.dev</a></p>
78-
<p>This is an implementation of this awesome tutorial on v2 by <a
79-
href="https://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/">Josh Morony</a>. Thanks.
80-
</p>
22+
{
23+
Array(20).fill(1).map((el, index) => (
24+
<Lorem key={index} />
25+
))
26+
}
8127
</IonContent>
8228
</IonPage>
8329
);

0 commit comments

Comments
 (0)