Heute lernen wir Ionic Komponenten zu nutzen. Am Ende gibts es auch noch ein paar Übungen und Fragen
Inhaltsverzeichnis
Erste Schritte
Die nachfolgenden Beispiele setzen auf eine vorhandene Ionic App auf. Als Beispiel wir einen App verwendet, die mit der Vorlage tabs 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>
<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" />

<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
<strong>Bold text</strong>
<em>Italic text</em>
<span style="text-decoration: underline;"> Underlined text </span>
<abbr title="Hypertext Markup Language"> HTML </abbr>
<!-- HTML Comment -->
Vorher<hr />Nachher
Nachher
Vorher<br />Nachher
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.1 | 1.2 |
2.1 | 2.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>
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; }
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; }