Overview

This post will show how to create an Ionic application using a script include in an HTML document, by creating a simple website. The Ionic app we are creating is just for showing off Ionic components and styling. We will not be writing any JavaScript in this post, but we will for the rest of the series.

Want to learn more about what Ionic Framework is? Check out my blog post, “How-To: Create Amazing and Fun Applications with Ionic | Overview” https://hrustaddesign.com/index.php/2020/10/17/how-to-series-create-amazing-and-fun-applications-with-ionic-overview/

Ionic Framework can be included from a CDN (content delivery network) inside the head element of an HTML document and does not require a frontend framework like Angular or React.

This post assumes that you have at least some prior knowledge of:

  • HTML
  • CSS

Tools needed for this how-to:

  • A code editor – this could be as simple as a text editor like Notepad. I like to use Visual Studio Code because it is lightweight, but still has many useful development features like an integrated terminal and file explorer.

If you have any questions about this post or Ionic Framework, feel free to contact me through my site or consult the documentation here.

Ionic application using a script include:

Create a folder to hold all of the files for this project. I named my folder script_include, but you can name yours whatever you like.

Inside of your project folder, script_include if you are following along, create an index.html file.

Open the index.html file in your editor.

HTML boilerplate | Ionic application using a script include
Figure a

Add the HTML boilerplate code shown in figure a.

Ionic script includes | Ionic application using a script include
Figure b

Copy the script and link tags from here and paste them into the head element of index.html as shown in figure b.

These links contain all of the global stylesheets and functionality of the core Ionic libraries as well as Ionicons (open source, premium designed icons). You can get different links that include only specific files like the global stylesheets from jsdelivr. The type attribute set to “module” on the script tag causes the script to be treated as a JavaScript module. The “nomodule” in the second script tag indicates that the script should not be executed in browsers that support ES2015 modules, and can be used to serve that script as a fallback if the browser does not support ES2015 modules.

ion-app tag | Ionic application using a script include
Figure c

Add the ion-app component to the body of the HTML document as shown in figure c.

The ion-app component is a container for the Ionic app and can contain multiple menu, header, content, and footer components.

Now, as shown in figure d, we will add a toolbar to the top the page by adding an ion-header component to the ion-app component. Then we add an ion-toolbar component inside of the ion-header component.

ion-header and ion-toolbar | Ionic application using a script include
Figure d

The ion-toolbar component contains an ion-buttons component and an ion-title component.

  • The ion-buttons component contains an ion-menu-button component and an ion-button component. The ion-buttons component is a container for buttons.
    • The ion-menu-button component automatically adds the menu icon and functionality to open a menu on a page.
    • The ion-button component functions similar to a native HTML button element, but it has way more built in functionality and styling options.
      • Inside of the ion-button component is an ion-icon component that allows us to display an Ionicon inside of our button.
      • We are using the “ios” and “md” properties for ion-icon. These properties allow us to use a different icon whether the user is using an iOS (Apple) device or a device using material design (Android).
      • You may have noticed the slot attribute on some of our components. The slot attribute lets us choose how content is positioned in relation to the parent element. Why use slot instead of positioning it yourself? Ease and quickness for sure, but the position changes based on locale and device without you needing to do anything else.
ion-content and ion-grid
Figure e

Next we will add an ion-content component with ion-grid, ion-row, and ion-col components inside as shown in figure e.

  • The ion-content component is a container for content of an Ionic app. Besides the main content, the ion-content component is also used inside of components like ion-menu and ion-modal.
  • The grid is a flexbox system for building layouts. It is made up of the ion-grid, ion-row, and ion-col components. While not necessary for building an Ionic app, I prefer this grid system for quickly building well proportioned and responsive layouts.
ion-card | Ionic application using a script include
Figure f

Next we will add an ion-card component inside of the ion-col component with an image, title, text, and button as shown in figure f.

  • Let’s center all of the text inside of the ion-card component by adding the built in Ionic class “ion-text-center” to the ion-card component’s opening tag.
  • For this post, we will add the image at the top of the ion-card-component because it fits better for this use case, but you could put the image at any position you like.
    • Let’s set the width of the image to 100% to take up the full width of the card.
    • For the image source I am using an image from Unsplash made by Belinda Fewings. Unsplash is great for getting free images, but be sure to provide proper attribution.
  • To organize the card we use an ion-card-header component and ion-card-content component.
    • Inside of the ion-card-header component, we will add an ion-card-title component. You can also use an ion-card-subtitle if you want to add more information.
    • Inside of the ion-card-content component, we add an ion-text component,  a br element, and an ion-button component.
      • The ion-text component is used to wrap text, provides formatting, and allows you to easily color your text with the color property.
      • Next is a br element, a line break,  to make the button appear under the text.
      • Then we have our ion-button component. On the ion-button component, I have set the color property to “primary” to show how you can easily change the color. Learn more about the color property here.
form and inputs | Ionic application using a script include
Figure g

In the next few steps we will be adding a form that showcases different form inputs and some properties. We will also see how to use ion-list, ion-item, and ion-label components. For the form steps refer to figure g.

  • The first thing we need to do is add another ion-row component right under the closing tag of the first ion-row component.
  • Inside of the new ion-row component we will add an ion-col component.
  • Now we will add a form element inside of the ion-col component This is a native HTML form element.

The next component we will be using is an ion-item-group which is a container for grouping ion-item components.

  • Ion-item components can contain any other native or custom elements.
  • Ion-item components are often used as list items, menu items, or for containing form inputs and labels. The latter will be our first use case.
ion-item-group
Figure h

We will be adding 3 ion-item components to the ion-item-group component. Each ion-item component will contain a different ion-input component and its ion-label component. Refer to figure h.

  • The first ion-item component contains an ion-label component with text “Name” for our first ion-input component.
    • We are using the position property of ion-label component and setting the value to “floating”. The position property changes the position of the label in relation to the input. When set to floating, The label appears slightly larger and covers part of the input, and when that input has focus, the label appears smaller and above the input as if the position property was set to “stacked”.
    • Under the ion-label component, we add an ion-input component with the type property set to “text”.
      • These types work like the native HTML types and are used for validation. However, there are less types to choose from. This is due to other Ionic components taking the place of some native HTML input types.
      • Ion-input types are date, email, number, password, search, tel, text, time, and url. If you want an input to be required, set the required property to “true”.
  • Next we will add the second ion-item component inside of the ion-item-group component.
    • This ion-item component also contains ion-label and ion-input components.
    • This time the ion-label position is set to “stacked with text “Email”, and the ion-input has type set to “email”.
  • Now we add the third ion-item component after the second inside of the ion-item-group component.
    • Instead of an ion-input component, we will add an ion-textarea component instead.
      • The ion-textarea component is used for multiline text and is a wrapper around the native HTML textarea.
      • We will set the placeholder property of the ion-textarea component to “Enter message here”.
    • The ion-label for this ion-input has text “Message” and position property set to “start. This positions the label before the input and is dynamic based upon whether the user reads left-to-right or right-to-left.
ion-select
Figure i

Under the ion-item-group component we will add another ion-item component. Refer to figure i.

  • This ion-item component will contain an ion-label component with text “Location”
  • Under the ion-label component we will add an ion-select component. The ion-select component behaves like the native HTML select element.
  • Inside of the ion-select component, we have 4 ion-select-option components.
    • These ion-select-option components are used to set the options displayed in the select box.
    • Similar to native HTML behavior, you can have the text and the value of the ion-select-option components be different. For example, the first ion-select-option component has text set to “Canada” and value set to “CA”.
ion-list | Ionic application using a script include
Figure j

Next we will add an ion-list component. The ion-list component is generally made up of rows of ion-item components. Using lists, you can swipe items to reveal options, drag and drop to reorder items, and delete items. Refer to figure j.

  • Inside of the ion-list component, we have an ion-radio-group component.
    • The ion-radio-group component contains four ion-item components with an ion-label component and an ion-radio component inside of each ion-item component.
      • One benefit of using the ion-radio-group component is that, when you click on one ion-radio component, it will deselect a previously selected ion-radio component. If you don’t use the ion-radio-group component, multiple ion-radio components can be selected at the same time.
    • Then we set the value property on the ion-radio components to “none”, “beginner”, “intermediate”, and “advanced”. The text for the ion-label components will be the same, but the first letter of each word is capitalized.
    • We will set the color property for the ion-radio components to “danger”, “primary”, “secondary”, and “success”. This changes the color that the radio button turns when it is selected.
    • We will also add an ion-list-header component with an ion-label component with text “Ionic Skill Level” as the first child component inside of the ion-radio-group component to provide a label for the ion-list component.
ion-checkbox
Figure k

Next, we will add another ion-item component after the ion-list component containing the ion-radio-group component. Refer to figure k.

  • Inside of the ion-item component we will have an ion-label component with text “I have read and agree to the privacy policy”, and an ion-checkbox component.
  • The ion-checkbox component functions like a native HTML checkbox. You can have one or more checkboxes that are selected when clicked.
    • We will set the mode property of the ion-checkbox component to “ios”. This will style the checkbox in accordance with the ios design system. This is not necessary, but I prefer the way it looks.
    • When the ion-checkbox component is selected, its checked property will be set to true, and checked will be false when deselected. You can set this property manually if you would like the checkbox to be automatically selected. If you are using an ion-checkbox in a native HTML form submission, then the value property is used to see if the checkbox was selected.
ion-button type submit
Figure l

After the ion-item component containing the ion-checkbox component, we will add an ion-button component with text “send”. Refer to figure l.

  • We will set the expand property to “full” and the type property to “submit”
    • The expand property sets how wide you want the button to be. Setting expand to “full” makes the button full-width.
    • Setting the type property to “submit” will submit the form to a form-handler when the button is clicked and the form passes any client-side validation like a native HTML form.

Now we need to configure the form submission.

  • We need to set the action attribute on the opening tag of our form.
    • The action attribute defines the action to handle the form, typically this would be the route to a file on the server.
    • If the action attribute is not added, then the action is set to the current page which is what we will be doing for this post.
  • You can also set the target attribute to specify where to display the response received from the form submission.
    • The default value of the target attribute is “_self” which displays the response in the current window. We will be sticking with the default for this post.
    • Another popular value is “_blank” which displays the response in a new window or tab.
  • Instead of submitting the form, we could remove the “submit” type property, listen for a click event on the button, and handle the form client-side using JavaScript. This is out of the scope of this post, but this can be a good way of handling forms when making an Ionic mobile application or an application without server-side code.
ion-menu | Ionic application using a script include
Figure m

Now we will add our menu and link it to our ion-menu-button. For adding the menu, refer to figure m and figure n.

  • To start, we need to add an ion-menu component as a sibling to the ion-content component. Sibling means that both components have the same parent, which is the ion-app component in this case.
  • In the opening tag of ion-menu component, we will set the side property to “start”, menu-id property to “nav-menu”, and content-id property to “main”.
    • The side property specifies on which side of the view that the menu will be placed.
    • The menu-id property is an id for the menu that we will use to link this ion-menu component to the ion-menu-button component we added earlier.
      • To link the menu button, set the menu property of the ion-menu-button component to “nav-menu”.
    • The content-id property tells the menu which ion-content component to use. We will need to set the id to “main” in the opening tag of the ion-content component.
    • The ion-menu and ion-menu-button components now have all the information needed to handle the menu logic for us and we didn’t even have to write any JavaScript.
  • Let’s add a header and some content to the menu now.
    • Inside of the ion-menu component, we will add an ion-header component.
      • Inside of the ion-header component, we will add an ion-toolbar component.
        • Now, let’s set the color property of the ion-toolbar component to “primary”.
        • Then we will add an ion-title component with text “Nav Menu” inside of the ion-toolbar component.
    • Next, we will add an ion-content component after the closing tag of the ion-header component.
      • Inside of the ion-content component we will add an ion-list component for holding ion-item components which will act like links or buttons in a traditional menu.
        • For this post, we will just add one ion-item component to the ion-list component since we only have one page.
        • We will set the href property of the ion-item component to index.html. This will make the ion-item function as a navigation link.
        • You could also set the button property to “true” and listen for a click event to add different logic to your ion-item component other than navigation, or you could use a navigation function on button click if you prefer that to using a link.
          • Inside of the ion-item component we will have an ion-icon component.
          • We will set the slot property to “start” and the name property to “home”. This will display a home icon at the start of the ion-item.
          • After the ion-icon component, add text “Home” which will be displayed after the icon.

We will not be doing anything with the ellipsis button in this post. In a future post, I will show how to listen for a click event on this button and open a second menu programmatically using JavaScript and Ionic’s MenuController module. A good use case for the ellipsis button could be a settings menu, or maybe buttons for managing a user account.

Complete HTML document | Ionic application using a script include
Figure n

That’s it for this post. For the full HTML document, refer to figure n.

We learned how to create an Ionic application using a script include, create a simple and responsive layout, use toolbars, and add menus. We used cards, buttons, forms, different inputs, images, and lists. You now have the knowledge to start making your own simple Ionic Apps. If you want to learn more, try adding some JavaScript like handling the click event for the ellipsis button, or handling form validation and submission.

Next up in the series is “Creating a Node.js Ionic App”. We will create a Node.js web app that will utilize Ionic Framework without the need for a frontend framework similar to what we created in this post. Also, keep an eye out for “Vanilla JS + Ionic Framework: Menus & Modals”. The topic of that post will be using JavaScript to handle Menu and Modal logic when using Ionic Framework via a script include, like we did in this post.

If you enjoyed this how-to, please follow us on  social media, share the post, or leave a comment. Also, make sure to check out our Patreon for exclusive content and deals. https://www.patreon.com/hrustaddesignllc

Categories: How-To

Leave a Reply