Nikunj Shah

Nikunj Shah

1575016405

Ionic 4 Responsive Grid Tutorial with Examples

A comprehensive Ionic 4 / Angular 8 Responsive Grid tutorial with useful CSS Grid layout examples. In this tutorial, we will learn how to create a layout, and a responsive image gallery from scratch using Ionic 4 Grid system.

Ionic offers a broad set of UI components, and these UI components help create and allow us to swiftly build a responsive layout, which works merely great on any screen size.
In this tutorial, we are going to talk about the Ionic 4 Grid system. Ionic 4 Grid system is a flexbox system based on a grid, rows, and cols and easily fits on almost every mobile screen size.

Table of Contents

  1. Ionic 4 Grid Layout
  2. Set Up Ionic App
  3. Creating Simple Basic Grid in Ionic 4 Angular 8
  4. Ionic 4 Image Gallery with Responsive Grid System
  5. Create Responsive Form in Ionic 4
  6. Conclusion

1. Ionic 4 Grid Layout

The ionic Grid system is based on Bootstrap (CSS UI framework) and comes with a 12 column layout and can be customized using CSS.

Ionic Grid Structure

<ion-grid>
    <ion-row>
        <ion-col></ion-col>
        <ion-col></ion-col>
    </ion-row>
</ion-grid>

Let’s see what grid, rows and cols are in the Ionic 4 grid system.

Grid: The grid system in Ionic 4 is initiated with an ion-grid tag, and It creates a wrapper around rows and columns in the grid system. Rows are inserted as vertical structures inside the grid. Then rows get split into the columns to obtain the horizontal space to fill the row area.

Rows: Rows are the direct child of the Ionic Grid and can be formed using the ion-row tag. Rows are created a horizontal structure with various numbers of columns, a maximum of 12 columns can be fitted in the row to occupy the full width.

Columns: To define a column or a cell use the ion-col tag, Columns are declared in the row to acquire the full available space inside the row.

2. Set Up Ionic App

We will integrate responsive grid examples in an Ionic / Angular app. Make sure you must have Ionic CLI installed in your machine if not then run the following command.

sudo npm install -g ionic

Next, run the following command to install the Ionic / Angular project.

ionic start ionic-grid-examples tabs --type=angular

Get inside the project folder.

cd ionic-grid-examples

Run the below command to install the lab mode.

npm i @ionic/lab --save-dev

Next, run the following command to make sure whether your app is working or not.

ionic serve -l

Ionic 4 Angular 8 Responsive Grid

3. Creating Simple Basic Grid in Ionic 4 Angular 8

To work with Grid in Ionic, we have to understand its conventional structure. It offers ion-grid, which creates a flexbox based CSS grid layout. It contains three main elements, which are ion-grid, ion-row, and ion-col.

Let us create a simple basic grid inside the Ionic tab, go to tab1.page.html and replace the following code with ion-content.

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <div>1 of 2</div>
      </ion-col>
      <ion-col>
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 3</div>
      </ion-col>
      <ion-col>
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 3</div>
      </ion-col>
      <ion-col col-6="">
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-6="">
        <div>1 of 3</div>
      </ion-col>
      <ion-col>
        <div>2 of 3</div>
      </ion-col>
      <ion-col>
        <div>3 of 3</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col offset-4="">
        <div>1 of 2</div>
      </ion-col>
      <ion-col>
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 2</div>
      </ion-col>
      <ion-col offset-4="">
        <div>2 of 2</div>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <div>1 of 4</div>
      </ion-col>
      <ion-col>
        <div>2 of 4</div>
      </ion-col>
      <ion-col>
        <div>3 of 4</div>
      </ion-col>
      <ion-col>
        <div>4 of 4</div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Ionic 4 Simple Grid

You can see in the example above we placed the Columns horizontally within the row, and it is quickly adjusting as per the available space inside the row.

As i stated above, Ionic Grid system comes with 12 columns similarly like Bootstrap, and in a single row, 12 columns can be adjusted.

4. Ionic 4 Image Gallery with Responsive Grid System

Now, we have looked at how Grid is created and works in an Ionic app. Next, we will learn how to create a responsive image gallery using the Ionic 4 Grid system. Building a responsive grid layout for image gallery is so simple: make sure you must have some images kept inside the assets/img folder.

You can take royalty-free pictures from the Pexels.

Go to tab2.page.html page and add the following HTML code inside the ion-content tag to define the image gallery structure.

<ion-grid>
  <ion-row>
    <ion-col sizeLg="4" sizeMd="4" sizeXs="6" *ngFor="let image of [1,2,3,4,5,6,7,8,9]">
      <div class="img-wrapper" [style.background-image]="'url(assets/img/ionic-image-gallery-' + image + '.jpg)'">
      </div>
    </ion-col>
  </ion-row>
</ion-grid>

sizeLg=”4″ – Image gallery will take 3 columns on large devices.
sizeMd=”4″ – Image gallery will take 3 columns on medium devices.
sizeXs=”6″ – 2 images will take 2 columns in a single row in small devices.

To know more about Ionic Grid layout check out the Ionic’s official documentation here.

Next, open tab2.page.scss file and add the following CSS code.

.img-wrapper {
    min-height: 200px;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

In the smaller device it looks something like this.

Ionic 4 Responsive Image Gallery with Grid

In the larger device this gallery will display three columns in a single row.

image gallery

5. Create Responsive Form in Ionic 4

We can use size attribute to build a responsive form in Ionic 4 / Angular 8 application. Open tab3.page.html page and add the following code inside the ion-content tag.

<form>
    <ion-grid>
      <ion-row>
        <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
          <ion-item>
            <ion-label position="floating">Name</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
          <ion-item>
            <ion-label position="floating">Email</ion-label>
            <ion-input type="email"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="6" size="12">
          <ion-item>
            <ion-label position="floating">Country</ion-label>
            <ion-select value="usa" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="usa">United States</ion-select-option>
              <ion-select-option value="india">India</ion-select-option>
              <ion-select-option value="france">France</ion-select-option>
              <ion-select-option value="spain">Spain</ion-select-option>
              <ion-select-option value="brazil">Brazil</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="4" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Choose City</ion-label>
            <ion-select value="california" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="california">California</ion-select-option>
              <ion-select-option value="illinois">Illinois</ion-select-option>
              <ion-select-option value="texas">Texas</ion-select-option>
              <ion-select-option value="pennsylvania">Pennsylvania</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Address</ion-label>
            <ion-textarea></ion-textarea>
          </ion-item>
        </ion-col>
        <ion-col size-lg="6" size-md="6" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Postal Code</ion-label>
            <ion-input type="text"></ion-input>
          </ion-item>
        </ion-col>
        <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Gender</ion-label>
            <ion-select value="male" okText="Okay" cancelText="Dismiss">
              <ion-select-option value="male">Male</ion-select-option>
              <ion-select-option value="female">female</ion-select-option>
            </ion-select>
          </ion-item>
        </ion-col>
        <ion-col size-lg="4" size-md="4" size-sm="4" size="12">
          <ion-item>
            <ion-label position="floating">Age</ion-label>
            <ion-input type="number"></ion-input>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>

We created a simple form in Ionic app which will adjust automatically on various devices. In the small device, every column will occupy full width, and it will be converted into a 2 column layout in the horizontal view.

Ionic 4 Responsive Form with Grid layout

6. Conclusion

We have completed the Ionic 4 Grid tutorial. In this tutorial, we learned how to create a simple grid layout, How to develop an Ionic Responsive image gallery, and we also looked at how to create a responsive form using a Grid layout.

#Ionic #angular #webdev

What is GEEK

Buddha Community

Ionic 4 Responsive Grid Tutorial with Examples
Einar  Hintz

Einar Hintz

1594631472

Pros and Cons of Ionic Development

Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

What is Ionic Framework?

Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.

One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.

The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.

Ionic Applications are

  • Cross-platform – Single code base for both platforms (except native components)
  • Web-based – Built using web-views and can be displayed in a browser like PWAs.
  • Access to native API components – They can access native device’s camera, files, and others.

Advantages of Ionic Development

Quick Development and Time To Market

For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.

#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development

Willie  Beier

Willie Beier

1596728880

Tutorial: Getting Started with R and RStudio

In this tutorial we’ll learn how to begin programming with R using RStudio. We’ll install R, and RStudio RStudio, an extremely popular development environment for R. We’ll learn the key RStudio features in order to start programming in R on our own.

If you already know how to use RStudio and want to learn some tips, tricks, and shortcuts, check out this Dataquest blog post.

Table of Contents

#data science tutorials #beginner #r tutorial #r tutorials #rstats #tutorial #tutorials

Tutorial: Loading and Cleaning Data with R and the tidyverse

1. Characteristics of Clean Data and Messy Data

What exactly is clean data? Clean data is accurate, complete, and in a format that is ready to analyze. Characteristics of clean data include data that are:

  • Free of duplicate rows/values
  • Error-free (e.g. free of misspellings)
  • Relevant (e.g. free of special characters)
  • The appropriate data type for analysis
  • Free of outliers (or only contain outliers have been identified/understood), and
  • Follows a “tidy data” structure

Common symptoms of messy data include data that contain:

  • Special characters (e.g. commas in numeric values)
  • Numeric values stored as text/character data types
  • Duplicate rows
  • Misspellings
  • Inaccuracies
  • White space
  • Missing data
  • Zeros instead of null values

2. Motivation

In this blog post, we will work with five property-sales datasets that are publicly available on the New York City Department of Finance Rolling Sales Data website. We encourage you to download the datasets and follow along! Each file contains one year of real estate sales data for one of New York City’s five boroughs. We will work with the following Microsoft Excel files:

  • rollingsales_bronx.xls
  • rollingsales_brooklyn.xls
  • rollingsales_manhattan.xls
  • rollingsales_queens.xls
  • rollingsales_statenisland.xls

As we work through this blog post, imagine that you are helping a friend launch their home-inspection business in New York City. You offer to help them by analyzing the data to better understand the real-estate market. But you realize that before you can analyze the data in R, you will need to diagnose and clean it first. And before you can diagnose the data, you will need to load it into R!

3. Load Data into R with readxl

Benefits of using tidyverse tools are often evident in the data-loading process. In many cases, the tidyverse package readxl will clean some data for you as Microsoft Excel data is loaded into R. If you are working with CSV data, the tidyverse readr package function read_csv() is the function to use (we’ll cover that later).

Let’s look at an example. Here’s how the Excel file for the Brooklyn borough looks:

The Brooklyn Excel file

Now let’s load the Brooklyn dataset into R from an Excel file. We’ll use the readxlpackage. We specify the function argument skip = 4 because the row that we want to use as the header (i.e. column names) is actually row 5. We can ignore the first four rows entirely and load the data into R beginning at row 5. Here’s the code:

library(readxl) # Load Excel files
brooklyn <- read_excel("rollingsales_brooklyn.xls", skip = 4)

Note we saved this dataset with the variable name brooklyn for future use.

4. View the Data with tidyr::glimpse()

The tidyverse offers a user-friendly way to view this data with the glimpse() function that is part of the tibble package. To use this package, we will need to load it for use in our current session. But rather than loading this package alone, we can load many of the tidyverse packages at one time. If you do not have the tidyverse collection of packages, install it on your machine using the following command in your R or R Studio session:

install.packages("tidyverse")

Once the package is installed, load it to memory:

library(tidyverse)

Now that tidyverse is loaded into memory, take a “glimpse” of the Brooklyn dataset:

glimpse(brooklyn)
## Observations: 20,185
## Variables: 21
## $ BOROUGH <chr> "3", "3", "3", "3", "3", "3", "…
## $ NEIGHBORHOOD <chr> "BATH BEACH", "BATH BEACH", "BA…
## $ `BUILDING CLASS CATEGORY` <chr> "01 ONE FAMILY DWELLINGS", "01 …
## $ `TAX CLASS AT PRESENT` <chr> "1", "1", "1", "1", "1", "1", "…
## $ BLOCK <dbl> 6359, 6360, 6364, 6367, 6371, 6…
## $ LOT <dbl> 70, 48, 74, 24, 19, 32, 65, 20,…
## $ `EASE-MENT` <lgl> NA, NA, NA, NA, NA, NA, NA, NA,…
## $ `BUILDING CLASS AT PRESENT` <chr> "S1", "A5", "A5", "A9", "A9", "…
## $ ADDRESS <chr> "8684 15TH AVENUE", "14 BAY 10T…
## $ `APARTMENT NUMBER` <chr> NA, NA, NA, NA, NA, NA, NA, NA,…
## $ `ZIP CODE` <dbl> 11228, 11228, 11214, 11214, 112…
## $ `RESIDENTIAL UNITS` <dbl> 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1…
## $ `COMMERCIAL UNITS` <dbl> 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…
## $ `TOTAL UNITS` <dbl> 2, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1…
## $ `LAND SQUARE FEET` <dbl> 1933, 2513, 2492, 1571, 2320, 3…
## $ `GROSS SQUARE FEET` <dbl> 4080, 1428, 972, 1456, 1566, 22…
## $ `YEAR BUILT` <dbl> 1930, 1930, 1950, 1935, 1930, 1…
## $ `TAX CLASS AT TIME OF SALE` <chr> "1", "1", "1", "1", "1", "1", "…
## $ `BUILDING CLASS AT TIME OF SALE` <chr> "S1", "A5", "A5", "A9", "A9", "…
## $ `SALE PRICE` <dbl> 1300000, 849000, 0, 830000, 0, …
## $ `SALE DATE` <dttm> 2020-04-28, 2020-03-18, 2019-0…

The glimpse() function provides a user-friendly way to view the column names and data types for all columns, or variables, in the data frame. With this function, we are also able to view the first few observations in the data frame. This data frame has 20,185 observations, or property sales records. And there are 21 variables, or columns.

#data science tutorials #beginner #r #r tutorial #r tutorials #rstats #tidyverse #tutorial #tutorials

Jeromy  Lowe

Jeromy Lowe

1599097440

Data Visualization in R with ggplot2: A Beginner Tutorial

A famous general is thought to have said, “A good sketch is better than a long speech.” That advice may have come from the battlefield, but it’s applicable in lots of other areas — including data science. “Sketching” out our data by visualizing it using ggplot2 in R is more impactful than simply describing the trends we find.

This is why we visualize data. We visualize data because it’s easier to learn from something that we can see rather than read. And thankfully for data analysts and data scientists who use R, there’s a tidyverse package called ggplot2 that makes data visualization a snap!

In this blog post, we’ll learn how to take some data and produce a visualization using R. To work through it, it’s best if you already have an understanding of R programming syntax, but you don’t need to be an expert or have any prior experience working with ggplot2

#data science tutorials #beginner #ggplot2 #r #r tutorial #r tutorials #rstats #tutorial #tutorials

Juned Ghanchi

1621423249

Ionic App Development Company in India, Hire Ionic Developers

We are reputed for developing well crafted and optimized Ionic apps in India and across the world. The cross-platforms Ionic apps built by our tech-savvy team are apt for a faster and efficient business development process.

Our developers are well experienced in using this powerful HTML5 SDK and are able to effectively use web technologies like HTML, CSS, and JAVASCRIPT to build the best Ionic apps.

If you are looking for the best technology services around the world, hire Ionic app developers in India. Your business will find the best app development solutions here.

#ionic app development company india #hire ionic developers india #ionic app development company #hire ionic developers #ionic app programmers #ionic app development agency