sanchezvem/BeReadyFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tailwind css

Browse Source
This commit is contained in:
sanchezvem
2026-03-14 15:39:20 +01:00
parent 3ea7d5e68a
commit c15e8d9a57
8 changed files with 629 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app.html
+34 -26
View File
@@ -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>
src/app/app.ts
+2 -7
View File
@@ -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 });
}
}
src/index.html
+2 -2
View File
@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>BeReadyFrontend</title>
<title>Be Ready</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/x-icon" href="BeReady.png">
</head>
<body>
<app-root></app-root>
src/styles.css
+3
View File
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities) important;