|
1 | | -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; |
2 | | -import ExploreContainer from '../components/ExploreContainer'; |
| 1 | +import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; |
3 | 2 | import './Home.css'; |
4 | 3 |
|
5 | 4 | const Home: React.FC = () => { |
6 | 5 | return ( |
7 | 6 | <IonPage> |
8 | 7 | <IonHeader> |
9 | | - <IonToolbar> |
10 | | - <IonTitle>Blank</IonTitle> |
| 8 | + <IonToolbar mode="ios"> |
| 9 | + <IonButtons slot='start'> |
| 10 | + <IonBackButton defaultHref='/' /> |
| 11 | + </IonButtons> |
| 12 | + <IonTitle>Post Details</IonTitle> |
| 13 | + <IonButtons slot='end'> |
| 14 | + <IonButton>Button</IonButton> |
| 15 | + </IonButtons> |
11 | 16 | </IonToolbar> |
12 | 17 | </IonHeader> |
13 | | - <IonContent fullscreen> |
14 | | - <IonHeader collapse="condense"> |
15 | | - <IonToolbar> |
16 | | - <IonTitle size="large">Blank</IonTitle> |
17 | | - </IonToolbar> |
18 | | - </IonHeader> |
19 | | - <ExploreContainer /> |
| 18 | + |
| 19 | + |
| 20 | + <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><ion-header></code> element:</p> |
| 37 | + <pre className="hljs"><code><div><span className="hljs-tag"><<span className="hljs-name">ion-header</span> <span className="hljs-attr">parallax</span>></span><span className="hljs-tag"></<span className="hljs-name">ion-header</span>></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><toolbar color=""></code> attribute.</li> |
| 46 | + <li><code>titleColor (string)</code>: The text color (web hex formatted) for <code><ion-title></code> and |
| 47 | + <code><ion-back-button></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"><<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>></span> |
| 52 | + |
| 53 | + <span className="hljs-tag"><<span className="hljs-name">ion-toolbar</span> <span className="hljs-attr">color</span>=<span className="hljs-string">"primary"</span>></span> |
| 54 | + <span className="hljs-tag"><<span className="hljs-name">ion-title</span>></span> |
| 55 | + Parallax Header |
| 56 | + <span className="hljs-tag"></<span className="hljs-name">ion-title</span>></span> |
| 57 | + <span className="hljs-tag"></<span className="hljs-name">ion-toolbar</span>></span> |
| 58 | + <span className="hljs-tag"></<span className="hljs-name">ion-header</span>></span> |
| 59 | + |
| 60 | + <span className="hljs-tag"><<span className="hljs-name">ion-content</span>></span> |
| 61 | + Some content here |
| 62 | + <span className="hljs-tag"></<span className="hljs-name">ion-content</span>></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 | + |
| 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> |
20 | 81 | </IonContent> |
21 | 82 | </IonPage> |
22 | 83 | ); |
|
0 commit comments