Now we move to the last user story on the list that allows users to share stories. In this chapter, we’ll discuss the Ionic 4 card layout and grid layout. The Cordova Social Sharing plugin is used to share stories to social network services.
Card Layout
To allow users to share stories, we need to add a new button. If we add this button to the current UI, then all these UI components cannot fit into one line. We need a new layout for all those components. A good choice is the card layout.
Cards are created using the component ion-card. A card can have a header and content that can be created using ion-card-header and ion-card-content, respectively. Listing 11-1 shows a simple card with a header and content.
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
Card content
</ion-card-content>
</ion-card>
Listing 11-1
A simple card
In the ion-card-content, we can include different kinds of components. The component ion-card-title can be used to add title text to the content. The component ion-card-subtitle adds a subtitle to the content. Listing 11-2 shows a card with an image and a title.
See Figure 11-1 for the screenshot of the card in Listing 11-2.
Figure 11-1
Card
After using the card layout, each item in the list is rendered as a card.
Grid Layout
In the item card, we need to display two or three buttons. These buttons should take up the same horizontal space of the line. This layout requirement can be easily archived by using the grid layout. The grid layout is implemented using the CSS3 flexbox layout (https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
The grid layout uses three components: ion-grid, ion-row, and ion-col. ion-grid represents the grid itself, ion-row represents a row in the grid, ion-col represents a column in a row. Rows take up the full horizontal space in the grid and flow from top to bottom. Horizontal space of a row is distributed evenly across all columns in the row. Grid layout is based on a 12-column layout. We can also specify the width for each column using attributes from col-1 to col-12. The number after col- is the number of columns it takes in the 12-column layout, for example, col-3 means it takes 3/12 of the whole width. By default, columns in a row flow from the left to the right and are placed next to each. We can use the property offset-* to specify the offset from the left side. We can the same pattern as in col-* to specify the offset, for example, offset-3 and offset-6. Columns can also be reordered using attributes push-* and pull-*. The attributes push-* and pull-* adjust the left and right of the columns, respectively. The difference between offset-* and push-* and pull-* is that offset-* changes the margin of columns, while push-* and pull-* change the CSS properties left and right, respectively.
For the alignment of rows and columns, we can add attributes like align-items-start, align-self-start, and justify-content-start to ion-row and ion-col. These attribute names are derived from flexbox CSS properties and values. For example, align-items-start means using start as the value of the CSS property align-items.
Listing 11-3 shows an example of using the grid layout to create the basic UI of a calculator.
We can use the Cordova plugin Social Sharing (https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin) to share stories via different channels. We need to install the plugin cordova-plugin-x-socialsharing using Cordova CLI and install the related Ionic Native package @ionic-native/social-sharing.
We create the new SocialSharingService for the social sharing functionality; see Listing 11-4. It has a single method share(message: string, url: string) with the message for the sharing and the URL of the shared item. It simply calls the method share() from the SocialSharing object of the Ionic Native wrapper of this Cordova plugin. It pops up the platform-specific sharing sheet to do the sharing.
import { Injectable } from '@angular/core';
import { SocialSharing } from '@ionic-native/social-sharing/ngx';
Then we update the template of ItemComponent to include a new button to do the sharing; see Listing 11-5. We pass the item’s title as the message to display. In the card for each item, we use three rows in the grid. The first row contains the item’s title. The second row contains the item’s score, author, and published time. The last row contains buttons for toggling favorites, sharing, and viewing comments.
The method share(message, subject, file, url) of SocialSharing actually takes four arguments:
message - The message to share with.
subject - The subject of the sharing.
file - URL or local path to files or images. Can be an array for sharing multiple files or images.
url - The URL to share.
The method share() uses the sharing sheet to let the user choose the sharing channels. We can also use other methods to directly share with specific social providers.
shareViaTwitter(message, image, url) - Share to Twitter.
shareViaFacebook(message, image, url) - Share to Facebook.
shareViaInstagram(message, image) - Share to Instagram.
shareViaWhatsApp(message, image, url) - Share to WhatsApp.
shareViaSMS(message, phoneNumber) - Share via SMS.
shareViaEmail(message, subject, to, cc, bcc, files) - Share via emails.
Or we can use the generic method shareVia(appName, message, subject, image, url) to share via any app. Because the sharing features depend on the native apps installed on a user’s device, it’s better to check whether the sharing feature is available first. The method canShareVia(appName, message, subject, image, url) does the check for a given app. For sharing via emails, the specific method canShareViaEmail() should be used for the check.
Figure 11-3 shows the final result of the top stories page.
Figure 11-3
Final result of top stories page
Figure 11-4 shows the screenshot of the sharing sheet. The available sharing features depend on the underlying platform. Since the emulator running the app doesn’t install other apps, the number of sharing features is limited.
Figure 11-4
Sharing sheet
Summary
In this chapter, we implemented the user story to share Hacker News stories to social networking services. Since we need to add a new button for each story in the list to trigger the sharing action, we also used Ionic 4 card and grid layout to make the UI look better. In the next chapter, we’ll discuss some common Ionic 4 components that are not used in the example app.
