Ionic_Contact Screen
In the previous post we created the My Profile page. Now, we'll create another page called Contact, that will have the same layout as My Profile page, but it won't be editable, since it's showing information of other users.
Again, we'll start by creating the contactPage folder and adding the required 3 documents.
Controller is almost exact to the one we defined for My Profile page so I won't be pasting code snippets here. You can find the source code for the controller here
The view is pretty straightforward as well. The main difference between this view and the one for My Profile page is that this one uses paragraphs <p> instead of input components. This is because this page doesn't take any input.
<!-- code omitted for brevity -->
<ion-content padding class="contactPage">
<profile-header #header></profile-header>
<ion-list no-lines style="margin-top:10px">
<ion-item>
<p>{{employment}}</p>
</ion-item>
<ion-item>
<p>{{education}}</p>
</ion-item>
<ion-item>
<p class='section-name'>Interests</p>
<p>{{interests}}</p>
</ion-item>
<ion-item>
<p class='section-name'>Knowledgeable In</p>
<p>{{knowledgeable}}</p>
</ion-item>
<ion-item>
<p class='section-name'>Goals</p>
<p>{{currentGoals}}</p>
</ion-item>
</ion-list>
</ion-content>I'm also using the no-line attribute on my ion-list component, so that no lines are drawn between the list elements.
.contactPage {
.section-name {
font-weight: bold;
font-size: medium;
color: map-get($colors, secondary-text);
}
p {
font-size: large;
color: map-get($colors, primary-text);
}
}This will adjust the font size and the colors of the paragraphs that I'm using within the contactPage.html view.
p {
word-wrap: break-word;
white-space: normal;
}The above style makes the paragraph elements properly wrap the text inside it in multiple lines, and it also breaks the word that is too long to fit the width of the paragraph. I want this to apply to all <p> elements inside my application, so that's why I'm defining this style in app.core.scss.
As you've seen, creating the Contact page was pretty straightforward. Below you can see a screenshot of the My Profile page (left), and the Contact page (right).
