Ez a dokumentum egy előző változata!
Tartalomjegyzék
Bootstrap
- Szerző: Sallai András
- Copyright © 2021, Sallai András
- Szerkesztve: 2023, 2024, 2025
- Licenc: CC BY-SA 4.0
- Web: https://szit.hu
Bootstrap
Telepítés
Webhely:
Telepítés:
ng add bootstrap
A Bootstrap a következő helyre töltődik:
node_modules/bootstrap
Használat
@import "bootstrap";
A JavaScript része:
- angular.json
"build": { "options": { "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.js" ] } }
Bootstrap ikonok
ng add bootstrap-icons
Amire szükség van, a node_modules/bootstrap-icons/font/bootstrap-icons.css fájl. De elég ha a bootstrap-icons könyvtárat megadom ~ jellel:
- style.css
@import 'bootstrap-icons';
Példa:
- src/app/app.component.html
<i class="bi bi-bug-fill"></i>
Modális ablak
A feladat, modális ablak megjelenítése scriptből.
Telepítsük a @types/bootstrap csomagot.
npm install @types/bootstrap
Ahol szeretnénk használni, importáljuk:
import * as bootstrap from 'bootstrap';
Importálhatjuk csak a Model() konstruktort:
import { Modal } from 'bootstrap';
Modális ablak megjelenítése
A modális ablak megjelenítése:
const modal = new bootstrap.Modal( document.getElementById('failLoginModal')! ) modal.show()
Modális ablak elrejtése változat 1
Szükség van a #addModal azonosítóra, mivel a @ViewChild() számára szükséges.
<div class="modal fade" id="addModal" #addModal tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true"> <!-- ... -->
Kapcsoljuk be a böngésző fejlesztői felületét és válasszuk az Elements fület. Figyeljük meg a body elemet. Kap egy új osztályt: <body class=„modal-open” >.
A lezáró body előtt pedig létrejön egy div elem, ami a szürke átlátszó hátteret biztosítja: <div class=„modal-backdrop fade show”></>.
import { Component, ElementRef, ViewChild } from '@angular/core'; import { Modal } from 'bootstrap'; //... export class UserComponent { @ViewChild('addModal') addModalRef?: ElementRef //... closeModal() { (this.addModalRef?.nativeElement as HTMLElement).style.display = 'none' document.body.classList.remove('modal-open') document.querySelector('.modal-backdrop')?.remove() } }
Modális ablak elrejtése változat 2
Szükség van a #addModal azonosítóra:
<div class="modal fade" id="addModal" #addModal tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true"> <!-- ... -->
import { Component, ElementRef, ViewChild } from '@angular/core'; import { Modal } from 'bootstrap'; //... export class UserComponent { @ViewChild('addModal') addModalRef?: ElementRef //... closeModal() { /*Levesszük a nyomógombról a fókuszt mert aria-hidden figyelmeztetést okoz */ const buttonElement = document.activeElement as HTMLElement; buttonElement.blur(); const modalEl = this.addModalRef?.nativeElement const modal = Modal.getInstance(modalEl) modal?.hide() document.querySelector('.modal-backdrop')?.remove() } }
Modális ablak elrejtése változat 3
Ebben a változatban csak a Modal osztályra van szükség. HTML sablonban az id attribútum értékére fogunk hivatkozni.
import { Modal } from 'bootstrap'; //... export class UserComponent { //... closeModal() { /*Levesszük a nyomógombról a fókuszt mert aria-hidden figyelmeztetést okoz */ const buttonElement = document.activeElement as HTMLElement; buttonElement.blur(); const modalEl = document.getElementById('addModal') const modal = Modal.getInstance(modalEl!) modal?.hide() document.querySelector('.modal-backdrop')?.remove() } }
Toast
Készítsünk a Toastnak egy dobozt:
<div class="toast-container position-fixed top-0 end-0 p-3"> </div>
A Toast-t ebbe a dobozba tesszük.
<div class="toast-container position-fixed top-0 end-0 p-3"> <div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true" #successToast > <div class="d-flex"> <div class="toast-body"> Az adatok sikeresen mentésre kerültek. </div> <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> </div> </div> </div>
mdbootstrap
Egy másik bootstrap:
Használjuk a saját dokumentációját:
Hozzáadás:
ng add mdbootstrap
- styles.css
@import "~mdbootstrap/css/bootstrap.css";
A JavaScript beillesztése:
- angular.json
"build": { "options": { "scripts": [ "node_modules/mdbootstrap/js/jquery.js", "node_modules/mdbootstrap/js/propper.js", "node_modules/mdbootstrap/js/bootstrap.js" ] } }
A szervert újra kell indítani, ha már el volt indítva.
ng-bootstrap
Az ng-bootstrap néhány saját komponenst kínál.
Webhely:
Telepítés parancssorból:
ng add @ng-bootstrap/ng-bootstrap
Használható még az ngx-bootstrap. A ng-bootstrap és az ngx-bootstrap közötti különbség, hogy az utóbbi több modulból áll, hogy ezzel is csökkenthessük a webszerverre feltöltött weboldal méretét.
Tudnivalók:
- A parancs automatikusan importálja src/app/app.module.ts fájlba az ng-bootstrap-t.
- A bootstrap is telepszik, de nem lesz importálva a JavaScript fájl.
Csomagnév séma
Ha nem a szokásos módon hivatkozunk az ng-bootstrap csomagra, ilyen figyelmeztetést kapunk:
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.
Ilyen figyelmeztetést kapunk például: ng add ng-bootstrap beírásakor.
Helyette használjuk:
ng add @ng-bootstrap/ng-bootstrap