Create a Stylish News Feed Layout in Ionic 2

  • We have two classes, .main-content and .header-image , which will be used for the parallax header in the next step.
  • We have a couple of CSS Utility Attributes set up that you may not have seen before.
  • The two standout UI elements will be a parallax header , and a frosted glass effect on the navigation bar.
  • I’ve previously created a tutorial on how to create a high-performance parallax header in Ionic 2 , and we will be making use of that .
  • We are also creating multiple cards using *ngFor , which will use the cards array we will define in our TypeScript file.

In this tutorial, we are going to walk through an example of building a stylish news feed layout in Ionic 2.

@xtools_at: Create a Stylish News Feed Layout in Ionic 2 #angularjs #webdev

I’ve said it many times before, but one of my favourite things about Ionic 2 is that it has sleek UI elements available out of the box, and those UI elements automatically conform to the conventions of the platform that the application is running on.

However, no matter how good the default UI is if you want to add you or your organisation’s branding and personality you are going to need to add a custom touch to the theme. Even with just a few basic changes, you can quite quickly create a theme that will match your brand, and I’ve already written a few tutorials on how you might do this:

Sometimes you may want to take things a little further, though, by creating a more complex and visually pleasing layout. I’m a big believer in “Form follows function“, and that a good user experience trumps trendy design or fancy animations, but the two are most certainly not mutually exclusive.

In this tutorial, we are going to walk through an example of building a stylish news feed layout in Ionic 2. The two standout UI elements will be a parallax header, and a frosted glass effect on the navigation bar. When it is done it will look like this:

CSS property, which has limited support. This means that the effect will only be visible on Safari and iOS, it will not work on Chrome and Android. Instead, Android devices will just have a semi-transparent effect on the navigation bar instead.

Before you go through this tutorial, you should have at least a basic understanding of Ionic 2 concepts. You must also already have Ionic 2 set up on your machine.

If you’re not familiar with Ionic 2 already, I’d recommend reading my Ionic 2 Beginners Guide first to get up and running and understand the basic concepts. If you want a much more detailed guide for learning Ionic 2, then take a look at Building Mobile Apps with Ionic 2.

1. Generate a New Ionic 2 Application

To get us started, we are going to generate a simple blank Ionic 2 application.

cd ionic2-card-layout

2. Create the Basic Layout

Before we get into adding in the necessary styling to create the design we are attempting to create, we are first going to set up the basic structure of the application.

We are going to create a card list, based on the example from the documentation, with cards that contain an avatar, name, date, image, description, likes, comments, and a timestamp. Basically, a pretty standard social media style card. We will also add a Segment component to the top of the list.

Gear Clothing Nutrition

Josh Morony

November 5, 1955

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. 11h ago

Currently, there isn’t a whole lot going on. The code above is, more or less, copied directly from the documentation for the components. There are a couple of things worth noting, though.

(which we will do shortly).

to create a bunch of cards in our list that we can play with.

, which will cause the content area to occupy the full height of the screen and will force content to render underneath the navigation bar in the header. This is important because we will be creating a semi-transparent frosted glass effect, so we want to see the content blurred behind that “glass”.

There are also many other CSS Utility Attributes like these that you can use in your Ionic 2 applications. I would recommend getting familiar with them if you aren’t already.

3. Add Styling and the Frosted Glass Effect

property that we will be making use of yet.

.ios, .md { page-home { ion-header { backdrop-filter: blur(8px); } ion-navbar { opacity: 0.4; box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.77); } } }

also helps the navigation bar stand out a little more.

4. Set up the TypeScript File

Since we are setting up two-way data binding, and looping over an array of cards that we have not defined yet, we will need to add a few things to the TypeScript file.

import { Component } from ‘@angular/core’; import { NavController } from ‘ionic-angular’; @Component({ selector: ‘page-home’, templateUrl: ‘home.html’ }) export class HomePage { cards: any; category: string = ‘gear’; constructor(public navCtrl: NavController) { this.cards = new Array(10); } }

array up. We just initialise it to be a new array with 10 elements – we don’t need to define any data in the arrays, we just want the cards to repeat themselves, so this is a quick way to do that rather than manually creating an array with 10 elements.

5. Add the CSS Rules

map, and setting a background colour.

// Shared Variables // ————————————————– // To customize the look and feel of this app, you can override // the Sass variables found in Ionic’s source scss files. // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ $background-color: #3c353c; // Named Color Variables // ————————————————– // Named colors makes it easy to reuse colors on various components. // It’s highly recommended to change the default colors // to match your app’s branding. Ionic uses a Sass map of // colors so you can add, rename and remove colors as needed. // The “primary” color is the only required color in the map. $colors: ( primary: #bdc3c7, secondary: #7f8c8d, danger: #f53d3d, light: #fff, dark: #3c353c );

This sets up the colours we will be using, but if you would prefer you can replace these with your own colours. Next, we are going to set up the rest of our CSS rules. This is mostly just going to be a bit of basic styling and positioning, so let’s get it set up first and then talk through it.

We still have the styles we set up for the frosted glass effect, but we have a lot of new additions as well. A lot of it is just pretty basic styling but we are doing some weird stuff, so let’s focus on that.

so that our Segment component is pushed out of the main content area and up into where the parallax header image will be. You should remove relative positioning if you are not going to be using the parallax header.

map in the variables.scss file.

, which will be used for the parallax header in the next step. If you are not including the parallax header then you can get rid of these styles.

6. Add the Parallax Header (Optional)

This step is not required, but if we want to completely recreate the example I showed at the beginning, we will need to add in a parallax header.

I’ve previously created a tutorial on how to create a high-performance parallax header in Ionic 2, and we will be making use of that here. I will not be recreating this directive in this tutorial so you will need to complete the parallax tutorial first. If you like, you can implement the directive directly into this application as you follow the tutorial.

Once you have completed that tutorial, you should make sure that you copy the directive into this application so that it is located at:

and you will also need to update your app.module.ts file to include the directive.

Next, we will need to make some changes to the template to make the parallax header work.

Gear Clothing Nutrition

Josh Morony

November 5, 1955

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. 11h ago

which will attach the behaviour of the custom parallax directive to the content area.

div.

With that done, you should now have the layout completed, and it should look something like this:

I think this tutorial highlights how quick and easy it can be to create great looking layouts in Ionic 2, since a lot of what we do relies on plain old CSS and Ionic has already done a lot of the heavy lifting for us. Even though one of the properties we are relying on isn’t supported in Chrome, the lowered opacity of the navigation bar still gives somewhat of a “glass” effect even if we don’t have the nice blur filter.

Create a Stylish News Feed Layout in Ionic 2