Utilidades de dimensionamiento de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar las utilidades de Sizing en Angular MDBootstrap.

Las utilidades de tamaño se utilizan para establecer el tamaño del elemento, en relación con su elemento principal, especificando las utilidades de ancho y alto.

Sintaxis:

<div class='w-25 p-2'> Content </div>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• Después de crear la carpeta de su proyecto, es decir , el nombre de la aplicación, acceda a ella con el siguiente comando:

cd appname

• sirva el proyecto usando el siguiente comando.

ng serve

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Estructura del proyecto

Ejemplo 1: este es el ejemplo básico que ilustra cómo usar las utilidades de dimensionamiento en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Sizing Utilities</h4>
    <br />
    <div class="w-25 p-2" 
         style="background-color: rgb(226, 230, 26);">25%
    </div>
    <br>
    <div class="w-50 p-2" 
         style="background-color: rgb(170, 26, 158);">50%
    </div>
    <br>
    <div class="w-75 p-2" 
         style="background-color: rgb(46, 223, 247);">75%
    </div>
    <br>
    <div class="w-100 p-2" 
         style="background-color: rgb(221, 20, 20);">100%
    </div>
    <br>
    <div class="w-auto p-2" 
         style="background-color: rgb(72, 185, 91);">auto
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Utilidad de dimensionamiento de Angular MDBootstrap

Ejemplo 2: este ejemplo ilustra la reorganización de las utilidades de altura en Angular MDBootstrap.

<div id='gfg'>
    <h2>GeeksforGeeks</h2>
    <h4>Angular MDBootstrap Sizing Utilities</h4>
    <br />
    <div style="height: 100px; 
                background-color: rgba(18, 20, 1, 0.1);">
        <div class="h-25 d-inline-block" 
             style="width: 120px; 
                    background-color: rgb(226, 230, 26);">25%
        </div>
        <div class="h-50 d-inline-block" 
             style="width: 120px; 
                    background-color: rgb(170, 26, 158);">50%
        </div>
        <div class="h-75 d-inline-block" 
             style="width: 120px;  
                    background-color: rgb(46, 223, 247);">75%
        </div>
        <div class="h-100 d-inline-block" 
             style="width: 120px; 
                    background-color: rgb(221, 20, 20);">100%
        </div>
        <div class="h-auto d-inline-block" 
             style="width: 120px; 
                    background-color: rgb(72, 185, 91);">auto
        </div>
    </div>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Reorganizar la utilidad de altura en Angular MDBootstrap

Referencia: https://mdbootstrap.com/docs/angular/utilities/sizing/