added tailwind css
This commit is contained in:
+34
-26
@@ -1,13 +1,25 @@
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title class="ion-align-content-center">Be Ready</ion-title>
|
||||
<ion-toolbar style="--border-width:0; --background:#000;" class="mt-2">
|
||||
<ion-buttons slot="start">
|
||||
<ion-button class="ml-2">
|
||||
<ion-icon class="text-white" name="person-add"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
|
||||
<ion-title>Be Ready</ion-title>
|
||||
|
||||
<ion-buttons slot="end">
|
||||
<ion-button class="mr-2">
|
||||
<ion-icon class="text-white" name="person"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-segment>
|
||||
<ion-segment class="m-2 ml-4 w-11/12">
|
||||
<ion-segment-button value="default" content-id="menu">
|
||||
<ion-label>Menu</ion-label>
|
||||
</ion-segment-button>
|
||||
@@ -17,36 +29,32 @@
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment-view>
|
||||
<!--
|
||||
<ion-segment-view style="background: red">
|
||||
<ion-segment-content id="menu">Menu</ion-segment-content>
|
||||
<ion-segment-content id="groupes">Groupes</ion-segment-content>
|
||||
-->
|
||||
</ion-segment-view>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
<ion-buttons>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-title>
|
||||
<ion-toolbar style="--border-width:0; --background:#000" class="mb-3">
|
||||
<ion-buttons class="flex gap-6 justify-center w-full">
|
||||
<ion-button>
|
||||
<ion-icon name="people" class="text-white text-3xl"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="chatbubbles" class="text-white text-2xl"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="home" class="text-white text-2xl"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon name="ribbon" class="text-white text-2xl"></ion-icon>
|
||||
</ion-button>
|
||||
<ion-button>
|
||||
<ion-icon name="cog" class="text-white text-3xl"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-app>
|
||||
+2
-7
@@ -2,7 +2,7 @@ import { Component, signal } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import {IonicModule} from "@ionic/angular";
|
||||
import { addIcons } from 'ionicons';
|
||||
import { heart } from 'ionicons/icons';
|
||||
import { heart, person, personAdd, home, people, chatbubbles, ribbon, cog } from 'ionicons/icons';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
@@ -12,11 +12,6 @@ import { heart } from 'ionicons/icons';
|
||||
})
|
||||
export class App {
|
||||
constructor() {
|
||||
/**
|
||||
* Any icons you want to use in your application
|
||||
* can be registered in app.component.ts and then
|
||||
* referenced by name anywhere in your application.
|
||||
*/
|
||||
addIcons({ heart });
|
||||
addIcons({ heart, personAdd, person, home, people, chatbubbles, ribbon, cog });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user