Lets get started with Basic UI/UX .
Lets start Learning Ionic Basic UI widgets and components .So to get started we will use Predefined Blank Template.
Note: If you haven’t followed this blog from starting and don’t know the syntax for Predefined Template. Kindly visit the previous page .
Now lets use this predefined Blank template and add some Basic Components.
Ion-Text
Ion-Text is the basic component provided by ionic to style the text colour of any text element.The colour to use from your application’s colour palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
Basic Syntax for Ion-Text
<ion-text color="secondary">
<h1>Hello and Welcome to Newbie Who Codes.</h1>
</ion-text>
<ion-text color="primary">
<h2>Hello and Welcome to Newbie Who Codes.</h2>
</ion-text>
<ion-text color="light">
<h3>Hello and Welcome to Newbie Who Codes.</h3>
</ion-text>
<ion-text color="danger">
<h4 >Hello and Welcome to Newbie Who Codes.</h4>
</ion-text>
<ion-text color="dark">
<h5>Hello and Welcome to Newbie Who Codes.</h5>
</ion-text>
Ion-Button
Ion-Button is one of the basic Component used to provide clickable element. We can use ion-button for n-number of tasks such as Submit button , input button , toast button , fab-button and many more . Ion-Button can be used as blank text , icon , borders, rounded corners etc.
Basic Syntax for ion-button.
<ion-button>Welcome</ion-button>
Ion-Item
Ion-Item is one which provides text, icons, avatars, images, inputs, and any other native or custom elements .
<ion-item>
<ion-label>
Item Name
</ion-label>
</ion-item>
Using Ion-Item we can create clickable Ion-Item Items. To make default Ion-Items as clickable Ion-Items we can use href to provide link or set Ion-Button property.
using href
<!-- Item as an Anchor -->
<ion-item href="https://www.ionicframework.com">
<ion-label>
Anchor Item
</ion-label>
</ion-item>
setting button property
<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
<ion-label>
Button Item
</ion-label>
</ion-item>
Ion-Input
Ion-Input is HTML input component with custom styling and additional functionality. We can use it same as HTML input as it supports all the properties of HTML input. It supports all standard text input events including keyup, keydown, keypress, and more.
Default Input
<!-- Default Input -->
<ion-input type="text" value="Welcome to Newbie Who Codes"></ion-input>
Number Input
<!-- Number type input -->
<ion-input type="number" value="1000"></ion-input>
Disabled Input
<!-- Disabled input -->
<ion-input value="Programming with newbiecodes" disabled></ion-input>
Read only Input
<!-- Readonly input -->
<ion-input value="Target 1000 Followers" readonly></ion-input>
Standard Input
<!-- Inputs with labels -->
<ion-item>
<ion-label>Comment what you think below</ion-label>
<ion-input></ion-input>
</ion-item>
Ion-List
Ion-List(s) are made using Ion-Item(s), Usually Ion-list(s) consist of Ion-Items with similar data. Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more.
<ion-list>
<ion-item>
<ion-label> Welcome to NewbieCodes </ion-label>
</ion-item>
<ion-item>
<ion-label> Check the Content </ion-label>
</ion-item>
<ion-item>
<ion-label> Like the Posts </ion-label>
</ion-item>
<ion-item>
<ion-label> Share the Posts </ion-label>
</ion-item>
<ion-item>
<ion-label> Subscribe the User </ion-label>
</ion-item>
</ion-list>
Using Ion-Input, Ion-Label, Ion-Toggle, Ion-Radio, Ion-Checkbox.
<!-- List of Input Items -->
<ion-list>
<ion-item>
<ion-label>Input</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle slot="end"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Radio</ion-label>
<ion-radio slot="end"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Checkbox</ion-label>
<ion-checkbox slot="start"></ion-checkbox>
</ion-item>
</ion-list>
What are the results of using basic UI/UX ?
Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013.
The output of using basic UI/UX provided Ionic framework is we can create the basic app containing all basic UI/UX Components.
Here I am sharing glimpse of what I made using basic UI/UX of Ionic Framework . You can contact me via Email: newbiewhocodes@gmail.com for further details / Business .
If you want to learn more or have any doubt please mention it in comment section. Also visit our social media and stay updated with upcoming events.
Programming with NewbieCodes 
Very informative 😃
LikeLike