Stuff I didn’t include in my journal for senior Angular devs. Journal URL = getrevue.co/profile/AndreyKutsenko

I tried reproducing Persona 5's UI with Ionic's custom component


posted at 2018-12-17
Ionic Day 18

WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior Angular developers.


This article is an article on Ionic Advent Calendar 2018 18th day.
This year I began to touch Ionic, I got the book of Ionic to Technical Letter 5 as well.
In this article, we will reproduce the frame UI of Persona 5 who is a god game with custom components.

Development environment

  • Ionic
    • Ionic CLI: 4.1.0
    • Ionic Framework: ionic-angular 3.9.2
    • @ ionic / app-scripts: 3.2.1
  • System
    • NodeJS: v 10.9.0
    • npm: 6.2.0
    • OS: macOS High Sierra

I want to use a frame like Persona 5 with Ionic!

This ↓

Assumption

As an assumption, ion-cardI would like to use the same way as inside the frame .
I do not want to corrupt the page's sass file, so I will make it as a custom component.
Since it is necessary to make irregular design and size (width and height) variable, we will design using svg.

Create custom component

$ ionic generate component p5-card

Edit html template

id = "p5 - card" ( tap ) = " p5TapEvent ()" no - margin >
class = "p5 - card - frame" viewBox = "0 , 0, 100, 100, 100 " width = 100 height = 100 preserveAspectRatio = " none " fill = " black " >
points = " 0, 95 90, 100 100,0 5, 10 " >
　　　　　　　　
class = "p5 - card - frame" viewBox = "0, 0, 100, 100" width = 100 height = 100 preserveAspectRatio ="none" fill = "white" >
points = "5, 90 89, 95 95, 7, 15" >
->
What I am doing is computing with width and height of 100 as 100 and just inserting boxes with a frame shape with svg.
This way you ion-cardcan create a frame with the benefits of.

.scss Edit

-card p5 {
.P5-card-frame {
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
z-index : -1 ;
}
# p5-card {
position : relative ;
background-color : rgba ( 0 , 0 , 0 , 0 ) ;
border : none ! important;
box-shadow : none ;
padding : 15px 30px 15px 20px ;
text-align : center ;
width : 100% ;
}
}

.ts Edit

import { Component , Output , EventEmitter } from '@ angular / core' ;

@ Component ({
selector : 'p5-card' ,
templateURL : 'p5-Card.Html'
})
export class P5CardComponent {
@ Output () P5Tap = new new EventEmitter ();
constructor () {
}
P5TapEvent () {
this . P5Tap . emit ();
}
}
p5TapWe created an event for the output event .
In this way, you can use the Output decorator to create your own custom events.

a problem occured

Even if ionic serveyou leave this error, you will get an error.
By default, ion-*you can not use Ionic components such as in a custom component .
Let's make it possible to use it.
components.module.tsEdit it.

components.module.ts Edit

import { NicModule , CUSTOM_ELEMENTS_SCHEMA } from '@ angular / core' ;
import { CommonModule } from '@ angular / common' ;
import { IonicModule } from 'ionic-angular' ;
import { P5CardComponent } from './p5-card/p5 -card ' ;
@ NgModule ({
declarations : [ P5CardComponent ,
],
imports : [ CommonModule ,
IonicModule],
exports : [ P5CardComponent ,
],
schemas : [ CUSTOM_ELEMENTS_SCHEMA ],
})
export class ComponentsModule {}
Here's what I newly imported
  • P5CardComponent
  • CUSTOM_ELEMENTS_SCHEMA
  • CommonModule
  • IonicModule
Needless to say P5CardComponent is the custom component I created earlier.

CUSTOM_ELEMENTS_SCHEMA

First of all,
One that specifies how HTML parsers treat elements and properties defined outside Angular that are not Angular components or directives
CUSTOM_ELEMENTS_SCHEMAIs
To make recognition other than Angular's standard components recognized even within custom components
By doing so, ion-*you can use the component of the system and the component you defined within your custom component .

CommonModule

CommonModuleIs
Allowing use of Angular standard Directive and Pipe within custom component
In other words,
  • ngIf
  • ngFor
  • ngSwitch
Structure such as Directive and
  • AsyncPipe
  • DecimalPipe
You can now use Pipe with custom components.

IonicModule

app.module.tsThe conditions of the design defined as follows in the custom component also make it possible to use.
Atto NgModule ({
Declarations : [ MyApp ],
Imports : [
BrowserModule ,
IonicModule . ForRoot ( MyApp , {
BackButtonText : 'Go Back' ,
IconMode : 'Ios' ,
ModalEnter : ' Modal-Slide-In ' ,
ModalLeave : ' Modal- slide-out ' ,
tabsPlacement : ' bottom ' ,
pageTransition : ' ios-transition '
}, {}
)],
bootstrap: [ IonicApp ],
entryComponents : [ MyApp ],
providers : []
})
If IonicModule is not imported, components affected, such as icons and modals, will not work properly.

Completion


Task

I have decided the value of padding appropriately, so I want to verify and find the best value.

bonus

I made a toggle and a slider in the manner of this article.