07 Dez

Learning Ionic | Tag 4: Grundlagen Ionic – Vorbereitung

Bereitstellen einer lokalen Ionic Dokumentation

In Zielverzeichnis wechseln

Für Windows

cd C:\Enrichtment\Daten

Für Linux/Mac OS

cd /Enrichtment/Daten

Dokumentation installieren

Repository clonen

git clone https://github.com/ionic-team/ionic-docs.git

Dokumentation erstellen

cd ionic-docs
npm install
npm run docgen

Dokumentation anzeigen

npm run dev

Abbrechen und zurück ins Datenverzeichnis

<STRG>-C drücken
cd ..

Ionic installieren/aktualisieren

npm i -g ionic
npm i -g capacitor

Apps vorbereiten

mkdir 10_enrichment_app
cd    10_enrichment_app

Preview Apps erstellen

git clone https://github.com/ionic-team/component-preview.git
cd component-preview
npm install
cd ..
git clone https://github.com/ionic-team/ionic-preview-app.git
cd ionic-preview-app
npm install
cd ..

Basis für Workshop erstellen

mkdir 10_enrichment_app
cd    10_enrichment_app
ionic start EnrichmentApp sidemenu --type angular --no-link

13 Nov

Learning Ionic | Tag 2: Grundlagen HTML und CSS

Heute lernen wir HTML und CSS anzuwenden. Am Ende gibts es auch noch ein paar Übungen und Fragen

Erste Schritte

Die nachfolgenden Beispiele setzen auf eine vorhandene Ionic App auf. Als Beispiel wir einen App verwendet, die mit der Vorlage sidemenu erstellt wurde.

ionic start sidemenu sidemenu --type angular --no-link

Titel ändern

Wir ändern den Titel der Seite home. Die Änderung erfolgt in der Datei home.page.html:

<ion-title>Arbeiten mit CSS</ion-title>

Farbe des Titels

Den geänderten Titel formatieren wir nun mit einer individuellen Farbe. Die Änderung erfolgt in der Datei home.page.css:

ion-title {
	color: #3880ff;
}

Farbe des Hintergrund

Jetzt setzen wir den Hintergrund des Titels:

ion-title {
	color: #ffffff;
	background-color: #ff0000;
}

Weiterer Text und Formatierung

In nächsten Schritt fügen wir weiter Überschriften in die Seite ein:

<ion-content padding>
	<h1>Überschrift H1</h1>
	<h2>Überschrift H2</h2>
</ion-content>

Überschrift H1

Überschrift H2

Für diese Überschriften passen wir nun auch die Formatierung an:

h1 {
    color: #ff0000;
    background-color: #000000;
    font-family: 'Courier New', Courier, monospace;
}

h2 {
    color: #000000;
    background-color: #ff0000;
    font-style: italic;
}

Überschrift 1

Überschrift 2

Weitere Beispiele

Und zum Abschluss weiter Textelemente und Formatierungen:

<ion-content padding>
  <h1>Überschrift 1</h1>
  <h2>Überschrift 2</h2>
  <h3>Überschrift 3</h3>
  <h4>Überschrift 4</h4>

  Normaler Text
  Die Welt ist <b>rund</b> und gross.
</ion-content>
ion-title {
    color: #ffffff;
    background-color: #00ff00;
}
h1 { color: greenyellow;}
h2 { color: red;}
h4 {
    background-color: aqua;
    font-family: 'Courier New';
}

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Normaler Text Die Welt ist rund und gross.

Grundlagen HTML

Detaillierte Informationen zur den HTML-Tags gibt es hier und hier:

HTML Elemente

Grundlegende HTML Tags

<div>Block element</div>
Block element
<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>

Page title

Subheading

Tertiary heading

Quaternary heading

<p style="text-align: center;">text</p>

text

<img src="http://blog.via-internet.de/wp-content/uploads/2018/03/logo-toolbox.png" alt="description" height="48" width="100" />
description
<a href="https://htmlg.com/" target="_blank" rel="nofollow">Click here</a>
<a href="mailto:info@http://ionicteam.de/?Subject=Hi%20mate" target="_top">Send Mail</a>
Sprung an eine andere Stelle
<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Sprungstelle

Sprung an eine andere Stelle

Jump to footnote

Sprungstelle

<strong>Bold text</strong>
Bold text

<em>Italic text</em>
Italic text
<span style="text-decoration: underline;">
    Underlined text
</span>
Underlined text
<abbr title="Hypertext Markup Language">
    HTML
</abbr>
HTML
<!-- HTML
Comment -->
Vorher<hr />Nachher
Vorher
Nachher
Vorher<br />Nachher
Vorher
Nachher
<q>Success is a journey not a destination.</q>
Success is a journey not a destination.
<blockquote cite="https://ruwix.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote> 
The Rubik’s Cube is the World’s best selling puzzle toy.

Gliederungen und Textformatierungen

<table>
    <tr>
        <td>1.1</td><td>1.2</td>
    </tr
    <tr>
        <td>2.1</td><td>2.2</td>
    </tr>
</table>
1.11.2
2.12.2

Tabelle mit Überschrift und mehreren Spalten

<table><caption><b>Telefonnummern</b></caption>
<thead>
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Mustermann</td>
        <td>1234567</td>
        <td>577855</td>
    </tr>
    <tr>
        <td>Musterfrau</td>
        <td>0789</td>
        <td>98765</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td> </td>
        <td>Vorwahl</td>
        <td>Rufnummer</td>
    </tr>
</tfoot>
</table>
Telefonnummern
Name Phone
Mustermann 0123 1234567
Musterfrau 0789 98765
  Personal Office

Tabellen mit verbundenen Spalten und Zeilen

<table border="1">
 <tr>
  <td colspan="2">Row 1 - Col 1 & Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td>Row 2 - Col 2</td>
 </tr>
</table>
Row 1 – Col 1 & Col 2
Row 2 – Col 1 Row 2 – Col 2
<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td rowspan="2">Row 1 & Row 2 - Col 2</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
 </tr>
</table>
Row 1 – Col 1 Row 1 & Row 2 – Col 2
Row 2 – Col 1
<table border="1">
 <tr>
  <td>Row 1 - Col 1</td>
  <td>Row 1 - Col 2</td>
  <td>Row 1 - Col 3</td>
  <td rowspan="4">Row 1, 2, 3 & 4 - Col 4</td>
 </tr>
 <tr>
  <td>Row 2 - Col 1</td>
  <td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
 </tr>
 <tr>
  <td>Row 3 - Col 1</td>
 </tr>
 <tr>
  <td>Row 4 - Col 1</td>
 </tr>
 <tr>
  <td colspan="2">Row 5 - Col 1 & 2</td>
  <td colspan="2">Row 5 - Col 3 & 4</td>
 </tr>
 <tr>
  <td colspan="4">Row 6 - Col 1, 2, 3 & 4</td>
 </tr>
</table>
Row 1 – Col 1 Row 1 – Col 2 Row 1 – Col 3 Row 1, 2, 3 & 4 – Col 4
Row 2 – Col 1 Row 2, 3 & 4 – Col 2 & 3
Row 3 – Col 1
Row 4 – Col 1
Row 5 – Col 1 & 2 Row 5 – Col 3 & 4
Row 6 – Col 1, 2, 3 & 4

Listen

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets </dd>
</dl>
HTML
Hypertext Markup Language
CSS
Cascading Style Sheets

Listen

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
  • First
  • Second
  • Third

Grundlagen CSS

Detaillierte Informationen zur den HTML-Tags gibt es hier und her:

Einbinden von CSS

Es gibt verschiedene Arten, CSS-Definitionen in eine Webseite oder eine ganzen Web-App einzubinden.

Inline CSS

Hier wird die CSS-Definition direkt im HTML-Code eingefügt. Eine einfache Möglichheit mit dem Nachteil, das sie nu an dieser Stelle und für das verwendete Element gültig ist.

<h1 style="color: blue">
    Hello world!
    </h1>

Internal CSS

<head>
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>

External CSS

<head>
    <link rel="stylesheet" href="style.css">
</head>

CSS Selectors

Element

Der erste Möglichkeit, ein HTML Element zu formatieren ist, den Namen des HTML-Elementes selbst zu verwenden. Die Formatierung gilt dann nur für das angegebene Element, im nachfolgenden Beispiel also h1 und p:

h1 {
    font-size: 50px;
}

Überschrift 1

p {
    color: green;
}

Dies ist der Tag p

div {
    background-color:red;
}
Tag div

Class

Eine andere Möglichkeit ist die Verwendung einer CSS Klasse. Hier wird über einen Namen (dem Namen der Klasse) die Formatierung zusammengefasst. Der Name der Klasse wird dann im HTML-Element verwendet.

Vorteil: Die Formatierung kann mehreren, auch unterschiedlichen HTML-Elementen zugewiesen werden:

<h1 class='container'>
    Beispiel 1
</h1>
<h1>
    Beispiel 1
</h1>
<p class='container'>
    Beispiel 3
</p>
.container {
    background-color: #F39C12;
}

Beispiel 1

Beispiel 2

Beispiel 3

ID

Eine weitere Möglichkeit der Zuweisung von CSS-Formatierung ist die Verwendung einer ID. Diese erfolgt ebenfalls wie bei einer Klasse über den Namen der ID.

Im Unterschied zu einer Klasse darf eine ID nur einmal in einer HTML Seite verwendet werden:

<div>
<p>Paragraph</p>
<p id='para1'>Paragraph</p>
<p>Paragraph</p>
</div>
#para1 {
    color: green;
    font-size: 16px;
}

Paragraph

Paragraph

Paragraph

Fonts & Colors

<div class='container'>
    <h1 class='heading1'>
        CSS ist toll!
    </h1>
</div>
.container {
    width: 200px;
    height: 100px;
    background-color: red;
    text-align: center;
}
.heading1 {
    font-family: 'Courier New';
    color: white;
}

CSS ist toll!

09 Nov

Ionic 4 | Installation on Unix

Prepare environment

Install nvm and Node

Change to users home and create users’s profile .bash_profile (if not exist)

cd $HOME
touch .bash_profile

Download nvm install script and run it. The installation script also modifies the users’s profile .bash_profile

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Run users’s profile, so nvm will be installed. This ist done automatically after login.

. .bash_profile

Install latest Node LTS version

# install latest version
nvm install node --reinstall-packages-from=node

# install a specific version
npm -install 8.12.0

# set nvm aliases (used in direnv configuration)
nvm alias latest 8.12.0
nvm alias default 8.12.0

# install additioal packages
npm -g install ionic@latest
npm -g install capacitor@latest

Create Ionic sample Apps

mkdir -p daten
cd daten
ionic start tabs tabs --type angular —-no-link
ionic start sidemen sidemenu --type angular —-no-link

Install direnv

Installation on macOS

For more  information read here

brew install direnv

Installation on Linux

Ubuntu Linux

sudo apt-get update  
sudo apt-get install direnv  

Configfile for direnv

#!/bin/bash

#-------------------------------------------------------------------------------

	SELF=$BASH_ARGV
	HERE="$(cd $(dirname "$SELF"); pwd)"
	SELF="$(basename "$SELF")"

#-------------------------------------------------------------------------------
PRINT()
{
	GRP="$1"; shift
	CMD="$1"; shift
	PAR="$*"

        printf "%-20s: %-10s (%s)\n" "$GRP" "$CMD" "$PAR"
}

#-------------------------------------------------------------------------------
	PRINT "config" "$HERE" "$SELF"

	PYTHON_VERSION=2.7.14
	NODE_VERSION=latest

	export NVM_DIR="$HERE/.env/nvm"

	PRINT "setup" "nvm" "$NVM_DIR"
	. /usr/local/opt/nvm/nvm.sh

	PRINT "set latest" "nvm" "$NODE_VERSION"
        nvm use $NODE_VERSION --silent

	PRINT "set latest" "pyenv" "$PYTHON_VERSION"
        pyenv local $PYTHON_VERSION 2>&-

        PRINT "Enabled" "nvm"      "$(nvm      --version)"
        PRINT "Enabled" "node"     "$(node     --version | sed '1,$s/v//g')"
        PRINT "Enabled" "npm"      "$(npm      --version)"
        PRINT "Enabled" "python"   "$(python   --version 2>&1)"
        PRINT "Enabled" "python2"  "$(python2  --version 2>&1)"

.bashrc


# setup direnv
eval "$(direnv hook bash)"
17 Aug

Ionic 4 | App from Scratch – Adding Content

In this blog, we will discus the steps to add additional content (pages, components) to your existing app. We will start with the App From Scratch we create here.

Preparation

Configure Visual Studio Code

First, we will configure Visual Studio Code to show only the desired folders for this tutorial.

We will hide the folders node_modles, e2e and .env

To do this, select Code / Prefecences / Settings

Visual Studio Code will open the settings in a editor window. You will see the default uer settings on te left, and the current user settings on the right.

Look for the lines unter „files.exclude“ and add or edit the desired content.

Setting to true means exclude (remember the title of the group: files.exclude)

Open required windows

As we add some content, we want to see immediately the results.

So,  i opened three windows

  • Visual Studio Code
  • Browser Windows
  • Console, where we start the ionic server

Change directory structure

Now we can start: Lets add some pages we will use to contain Ionic Components (Buttons, Text, Switches, Lists, Grids, …)

Out app have 3 pages. You will find them in them explorer window

First, i want to change the directory structure.

For each component type, we will add, i want to a a separate folder.

So, first: create a folder pages for our pages

Next, move the pages folders home, list and about into the newly create folder

After that, go into the console, stop the running ionic serve command and restart it to force a new compilation of our app

$ ionic serve
> ng run app:serve --host=0.0.0.0 --port=8100

In the console window, we will see an error

[ng] ERROR in Could not resolve module ./home/home.module relative to .../app_from_scratch/src/app/app-routing.module.ts

This is, because we changes the directory path of the pages. We had to adjust the new path in out app: in app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
  { path: 'list', loadChildren: './pages/list/list.module#ListPageModule' },
  { path: 'about', loadChildren: './pages/about/about.module#AboutPageModule' }
];

Add page: ActionSheet

Ionic offers a huge amount of amazing components. So, we will demonstrate the use of this components step by step. We will take the inspiration from here.

Starting with Action Sheets.

  • Documentation is here
ionic generate page ActionSheet
> ng generate page ActionSheet
CREATE src/app/action-sheet/action-sheet.module.ts (569 bytes)
CREATE src/app/action-sheet/action-sheet.page.scss (0 bytes)
CREATE src/app/action-sheet/action-sheet.page.html (138 bytes)
CREATE src/app/action-sheet/action-sheet.page.spec.ts (727 bytes)
CREATE src/app/action-sheet/action-sheet.page.ts (279 bytes)
UPDATE src/app/app-routing.module.ts (736 bytes)
[OK] Generated page!

To add the new page to the sidemenu, change the AppPages array in app.component.ts

public appPages = [
  { title: 'Home', url: '/home', icon: 'home' },
  { title: 'List', url: '/list', icon: 'list' },
  { title: 'About', url: '/about', icon: '' },
  { title: 'ActionSheet', url: '/ActionSheet', icon: 'list' }
];

Notice the different spelling of the url (different case of letters). Whatever spelling you choose, it has to fit to the path value in the app-routing.module.ts

Next, move the page to the pages folder and change the path in app-routing.modules.ts

Add the sidemenu button to the actionSheet Page (in action-sheet.page.html)

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>ActionSheet</ion-title>
  </ion-toolbar>
</ion-header>

Ok, well done

Next, add a button and the code for displaying the action sheet. The source is here.

Change your html page: action-sheet.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>ActionSheet</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding fullscreen>
  <ion-button expand="block" id="basic" (click)="presentBasic()">Basic</ion-button>
  <ion-button expand="block" id="noBackdropDismiss" (click)="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
  <ion-button expand="block" id="alertFromActionSheet" (click)="presentAlert()">Alert from Action Sheet</ion-button>
  <ion-button expand="block" id="scrollableOptions" (click)="presentScroll()">Scrollable Options</ion-button>
  <ion-button expand="block" id="scrollWithoutCancel" (click)="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
  <ion-button expand="block" id="cancelOnly" (click)="presentCancelOnly()">Cancel Only</ion-button>
  <ion-button expand="block" id="icons" (click)="presentIcons()">Icons</ion-button>
  <ion-button expand="block" id="cssClass" (click)="presentWithCssClass()">Custom CSS Class</ion-button>
</ion-content>

Change your Style: action-sheet.page-scss

app-action-sheet {
}

Change the Code: action-sheet.page.ts. Source is here

import { Component, OnInit } from "@angular/core";
import { Platform, ActionSheetController } from "@ionic/angular";

@Component({
  selector: "app-action-sheet",
  templateUrl: "./action-sheet.page.html",
  styleUrls: ["./action-sheet.page.scss"]
})
export class ActionSheetPage implements OnInit {
  constructor(
    public platform: Platform,
    public actionSheetController: ActionSheetController
  ) {}

  ngOnInit() {}


  public changeColor(ev) {

  }

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: "Albums",
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

  async presentBasic() {
    console.log('ActionSheetPage:presentBasic');

    const actionSheet = await this.actionSheetController.create({
      header: "Albums",
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }
  
  async presentIcons() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      header: "Albums",
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'arrow-dropright-circle',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        role: 'selected',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        icon: 'close',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    })
    await actionSheetElement.present();
  }
  
  async presentNoBackdropDismiss() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      backdropDismiss: false,
      buttons: [{
        text: 'Archive',
        handler: () => {
          console.log('Archive clicked');
        }
      }, {
        text: 'Destructive',
        role: 'destructive',
        handler: () => {
          console.log('Destructive clicked');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheetElement.present();
  }
  
  async presentAlert() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      buttons: [{
        text: 'Open Alert',
        handler: () => {
          console.log('Open Alert clicked');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheetElement.present();
  }
  
  async presentScroll() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      buttons: [
        {
          text: 'Add Reaction',
          handler: () => {
            console.log('Add Reaction clicked');
          }
        }, {
          text: 'Copy Text',
          handler: () => {
            console.log('Copy Text clicked');
          }
        }, {
          text: 'Share Text',
          handler: () => {
            console.log('Share Text clicked');
          }
        }, {
          text: 'Copy Link to Message',
          handler: () => {
            console.log('Copy Link to Message clicked');
          }
        }, {
          text: 'Remind Me',
          handler: () => {
            console.log('Remind Me clicked');
          }
        }, {
          text: 'Pin File',
          handler: () => {
            console.log('Pin File clicked');
          }
        }, {
          text: 'Star File',
          handler: () => {
            console.log('Star File clicked');
          }
        }, {
          text: 'Mark Unread',
          handler: () => {
            console.log('Mark Unread clicked');
          }
        }, {
          text: 'Edit Title',
          handler: () => {
            console.log('Edit Title clicked');
          }
        }, {
          text: 'Save Image',
          handler: () => {
            console.log('Save Image clicked');
          }
        }, {
          text: 'Copy Image',
          handler: () => {
            console.log('Copy Image clicked');
          }
        }, {
          text: 'Delete File',
          role: 'destructive',
          handler: () => {
            console.log('Delete File clicked');
          }
        }, {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheetElement.present();
  }
  
  async presentScrollNoCancel() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      buttons: [
        {
          text: 'Add Reaction',
          handler: () => {
            console.log('Add Reaction clicked');
          }
        }, {
          text: 'Copy Text',
          handler: () => {
            console.log('Copy Text clicked');
          }
        }, {
          text: 'Share Text',
          handler: () => {
            console.log('Share Text clicked');
          }
        }, {
          text: 'Copy Link to Message',
          handler: () => {
            console.log('Copy Link to Message clicked');
          }
        }, {
          text: 'Remind Me',
          handler: () => {
            console.log('Remind Me clicked');
          }
        }, {
          text: 'Pin File',
          handler: () => {
            console.log('Pin File clicked');
          }
        }, {
          text: 'Star File',
          handler: () => {
            console.log('Star File clicked');
          }
        }, {
          text: 'Mark Unread',
          handler: () => {
            console.log('Mark Unread clicked');
          }
        }, {
          text: 'Edit Title',
          handler: () => {
            console.log('Edit Title clicked');
          }
        }, {
          text: 'Save Image',
          handler: () => {
            console.log('Save Image clicked');
          }
        }, {
          text: 'Copy Image',
          handler: () => {
            console.log('Copy Image clicked');
          }
        }, {
          text: 'Delete File',
          role: 'destructive',
          handler: () => {
            console.log('Delete File clicked');
          }
        }
      ]
    });
    await actionSheetElement.present();
  }
  
  async presentCancelOnly() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheetElement.present();
  }
  
  async presentWithCssClass() {
    const actionSheetController = document.querySelector('ion-action-sheet-controller');
    await actionSheetController.componentOnReady();
    const actionSheetElement = await actionSheetController.create({
      header: "Custom Css Class",
      cssClass: "my-class my-custom-class",
      buttons: [
        {
          text: 'Test',
          role: 'test',
          cssClass: 'my-cancel-button my-custom-button customClass',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    await actionSheetElement.present();
  }
}

Done. Now look at the result

Add page: Buttons

Add page: Toolbar Buttons