mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Update for table
This commit is contained in:
@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
import { RouteReuseStrategy } from '@angular/router';
|
||||
|
||||
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
|
||||
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
|
||||
// import { SplashScreen } from '@ionic-native/splash-screen/ngx';
|
||||
import { StatusBar } from '@ionic-native/status-bar/ngx';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
@@ -48,7 +48,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
],
|
||||
providers: [
|
||||
StatusBar,
|
||||
SplashScreen,
|
||||
//SplashScreen,
|
||||
HttpClientModule,
|
||||
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
|
||||
InAppBrowser,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
ion-tab-bar{
|
||||
--background: #f9f9f9;
|
||||
--color: #061b52;
|
||||
--background: #f9f9f9;
|
||||
--color: #061b52;
|
||||
}
|
||||
|
||||
// Badge
|
||||
@@ -37,7 +37,8 @@ ion-badge {/* */
|
||||
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
|
||||
ion-tabs.tab .bottoms{
|
||||
// display: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -3,12 +3,6 @@ import { EventsService } from '../services/events.service';
|
||||
import { Event } from '../models/event.model';
|
||||
import { ProcessesService } from '../services/processes.service';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { PublicationDetailPage } from '../../app/pages/publications/view-publications/publication-detail/publication-detail.page';
|
||||
import { ViewPublicationsPage } from '../../app/pages/publications/view-publications/view-publications.page';
|
||||
import { ExpedienteDetailPage } from '../../app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page'
|
||||
import { ViewEventPage } from '../../app/pages/agenda/view-event/view-event.page'
|
||||
/* import { ApproveEventModalPage } from '../../app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page'; */
|
||||
|
||||
/* import { Plugins, PushNotification, PushNotificationToken, PushNotificationActionPerformed, Modals } from '@capacitor/core'; */
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
|
||||
@@ -211,7 +211,7 @@ export class AgendaPage implements OnInit {
|
||||
|
||||
onCurrentChanged = (ev: Date) => {
|
||||
// timeline change date
|
||||
this.timelineDate = new Date(ev).toLocaleString();
|
||||
this.timelineDate = momentG(new Date(ev),'dd MMMM yyyy');
|
||||
this.viewDate = new Date(ev);
|
||||
// calendar change date
|
||||
this.eventSelectedDate = new Date(ev);
|
||||
|
||||
@@ -1,27 +1,69 @@
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-toolbar class="bg-blue pb-10">
|
||||
|
||||
<ion-grid>
|
||||
|
||||
<ion-row class="div-top-header ion-justify-content-between">
|
||||
<ion-col>
|
||||
<div (click)="openSearch()" class="div-search">
|
||||
<div class="mobile d-flex div-top-header justify-space-between">
|
||||
<div (click)="openSearch()" class="div-search">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="div-logo height-fit-content">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
<div class="div-profile">
|
||||
<ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
|
||||
<ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="desktop div-top-header">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div tab="events" class="div-logo height-fit-content">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-1 pr-20 pl-50">
|
||||
|
||||
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/events')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
|
||||
<span>Ínicio</span>
|
||||
</div>
|
||||
|
||||
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/agenda')" >
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
|
||||
<span>Agenda</span>
|
||||
</div>
|
||||
|
||||
<div class="mr-20 d-flex align-center" (click)="changeRoute('/home/gabinete-digital')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
|
||||
<span>Gabinete</span>
|
||||
</div>
|
||||
|
||||
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/publications')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
|
||||
<span>Ações</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" mr-20 d-flex align-center" (click)="changeRoute('/home/chat')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
|
||||
<span>Chat</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<div (click)="openSearch()" class="div-search mr-10">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
|
||||
<div class="div-profile">
|
||||
<ion-icon *ngIf="profile == 'mdgpr' " src='assets/images/icons-profile.svg'></ion-icon>
|
||||
<ion-icon *ngIf="profile == 'pr' " src='assets/images/icons-profile-pr-header.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-grid>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
@import '~src/function.scss';
|
||||
|
||||
.div-top-header{
|
||||
margin: 0 auto;
|
||||
margin: 0 em(20px);
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
padding-top: em(15px);
|
||||
border: 0!important;
|
||||
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
margin: 0 0 0 10px
|
||||
ion-icon{
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: em(140px);
|
||||
margin: 0px auto;
|
||||
margin-top: 5px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
@@ -25,8 +23,22 @@
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
margin-right: 10px;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
|
||||
.mobile{
|
||||
display: none !important;
|
||||
}
|
||||
.desktop{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { SearchPage } from 'src/app/pages/search/search.page';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-header',
|
||||
@@ -11,7 +12,8 @@ export class HeaderPage implements OnInit {
|
||||
|
||||
profile: string = 'mdgpr';
|
||||
|
||||
constructor(private modalController: ModalController) {
|
||||
constructor(private modalController: ModalController,
|
||||
private router: Router) {
|
||||
|
||||
window['header'] = (profile:string) => {
|
||||
this.profile = profile;
|
||||
@@ -32,4 +34,7 @@ export class HeaderPage implements OnInit {
|
||||
return await modal.present();
|
||||
}
|
||||
|
||||
changeRoute(path){
|
||||
this.router.navigateByUrl(path)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,67 @@
|
||||
<ion-toolbar class="bg-blue">
|
||||
<ion-toolbar class="bg-blue pb-10">
|
||||
|
||||
<ion-grid>
|
||||
|
||||
<ion-row class="div-top-header ion-justify-content-between">
|
||||
<ion-col>
|
||||
<!-- <div (click)="openSearch()" class="div-search">
|
||||
<div class="mobile d-flex div-top-header justify-space-between">
|
||||
<div (click)="openSearch()" class="div-search">
|
||||
<!-- <ion-icon src='assets/images/icons-search.svg'></ion-icon> -->
|
||||
</div>
|
||||
<div class="div-logo height-fit-content">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
<div class="div-profile">
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="desktop div-top-header">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div tab="events" class="div-logo height-fit-content">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-1 pr-20 pl-50">
|
||||
|
||||
<div class=" mr-20 div-search d-flex align-center" (click)="changeRoute('/home/events')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-home-active.svg'></ion-icon>
|
||||
<span>Ínicio</span>
|
||||
</div>
|
||||
|
||||
<div class=" mr-20 div-search d-flex align-center" (click)="changeRoute('/home/agenda')" >
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-agenda-inactive.svg'></ion-icon>
|
||||
<span>Agenda</span>
|
||||
</div>
|
||||
|
||||
<div class="mr-20 div-search d-flex align-center" (click)="changeRoute('/home/gabinete-digital')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-home-dk.svg'></ion-icon>
|
||||
<span>Gabinete</span>
|
||||
</div>
|
||||
|
||||
<div class=" mr-20 div-search d-flex align-center" (click)="changeRoute('/home/publications')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
|
||||
<span>Ações</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class=" mr-20 div-search d-flex align-center" (click)="changeRoute('/home/chat')">
|
||||
<ion-icon class="font-40" src='assets/images/icons-nav-a-es-inactive.svg'></ion-icon>
|
||||
<span>Chat</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="d-flex">
|
||||
<!-- <div (click)="openSearch()" class="div-search mr-10">
|
||||
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
|
||||
</div> -->
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div class="div-logo">
|
||||
<img src='assets/images/logo-no-bg.png' alt='logo'>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div (click)="openSearch()" class="div-profile">
|
||||
|
||||
<div class="div-profile">
|
||||
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-grid>
|
||||
|
||||
</div>
|
||||
|
||||
</ion-toolbar>
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
@import '~src/function.scss';
|
||||
|
||||
.div-top-header{
|
||||
margin: 0 auto;
|
||||
margin: 0 em(20px);
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
padding-top: em(15px);
|
||||
border: 0!important;
|
||||
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: em(140px);
|
||||
margin: 0px auto;
|
||||
margin-top: 5px;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
@@ -25,8 +19,22 @@
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
margin-right: 10px;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
|
||||
.mobile{
|
||||
display: none !important;
|
||||
}
|
||||
.desktop{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -3,6 +3,7 @@ import { AnimationController, ModalController } from '@ionic/angular';
|
||||
import { SearchPage } from 'src/app/pages/search/search.page';
|
||||
import { MenuController } from '@ionic/angular';
|
||||
import { ProfileComponent } from './profile/profile.component';
|
||||
import { Router } from '@angular/router';
|
||||
@Component({
|
||||
selector: 'app-header-no-search',
|
||||
templateUrl: './header-no-search.page.html',
|
||||
@@ -12,7 +13,8 @@ export class HeaderNoSearchPage implements OnInit {
|
||||
|
||||
constructor(private modalController: ModalController,
|
||||
private menu: MenuController,
|
||||
private animationController: AnimationController,) { }
|
||||
private animationController: AnimationController,
|
||||
private router: Router) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
@@ -53,4 +55,8 @@ export class HeaderNoSearchPage implements OnInit {
|
||||
});
|
||||
return await modal.present();
|
||||
}
|
||||
|
||||
changeRoute(path){
|
||||
this.router.navigateByUrl(path)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<filter id="1jaqcqp9za">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g stroke="#797979" stroke-width="2" filter="url(#1jaqcqp9za)" transform="translate(-546 -12) translate(20) translate(176) translate(350 12)">
|
||||
<path d="M20.5 34.5c5.523 0 10.5-.977 10.5-6.5s-4.477-10-10-10-10 4.477-10 10 3.977 6.5 9.5 6.5z"/>
|
||||
<circle cx="21" cy="12" r="6"/>
|
||||
<path stroke-linejoin="round" d="M29.157 23.343L17.843 34.657m-5.186-1.564l13.686-13.186"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 922 B |
@@ -0,0 +1,21 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<filter id="xhyequtz0a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#xhyequtz0a)" transform="translate(-306 -12) translate(20) translate(176)">
|
||||
<g stroke="#797979" stroke-width="2">
|
||||
<g transform="translate(110 12) translate(7 7)">
|
||||
<rect width="26" height="26" rx="2"/>
|
||||
<path d="M2 7H24V8H2zM18 12H20V14H18zM12 12H14V14H12zM12 18H14V20H12zM18 18H20V20H18zM6 12H8V14H6zM6 18H8V20H6z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 919 B |
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<filter id="enll4xclfa">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#enll4xclfa)" transform="translate(-201 -12) translate(20) translate(176) translate(5 12)">
|
||||
<path stroke="#061B52" stroke-width="2" d="M20 8.136l12 6.461V30c0 .552-.224 1.052-.586 1.414-.362.362-.862.586-1.414.586h0-5v-5c0-.788-.304-1.505-.8-2.04-.51-.549-1.222-.906-2.017-.954h0L18 24c-.788 0-1.505.304-2.04.8-.549.51-.906 1.222-.954 2.017h0L15 32H10c-.552 0-1.052-.224-1.414-.586C8.224 31.052 8 30.552 8 30h0V14.597l12-6.461z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 953 B |
@@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
|
||||
<defs>
|
||||
<filter id="s0gcyzi44a">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
<filter id="j3jkn6sx0b">
|
||||
<feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g>
|
||||
<g>
|
||||
<g filter="url(#s0gcyzi44a)" transform="translate(-422 -12) translate(20) translate(176)">
|
||||
<g>
|
||||
<path stroke="#797979" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M26 31H8V13h25v18m0 0h-7M26 9L26 13 15 13 15 9 23 9z" transform="translate(226 12)"/>
|
||||
<g filter="url(#j3jkn6sx0b)" transform="translate(226 12)">
|
||||
<g>
|
||||
<path stroke="#061B52" d="M.5 15.5L22.5.5M2.5 17.5L24.5 2.5" transform="translate(8 13)"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -246,6 +246,9 @@
|
||||
.height-100{
|
||||
height: 100%;
|
||||
}
|
||||
.height-fit-content{
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.width-50{
|
||||
width: 50%;
|
||||
@@ -257,3 +260,65 @@
|
||||
}
|
||||
|
||||
|
||||
.flex-0{
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
// system spacing
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@for $i from 0 through 10 {
|
||||
|
||||
$size: $i * 5;
|
||||
|
||||
$properties:
|
||||
"margin" "m",
|
||||
"padding" "p";
|
||||
|
||||
@each $property, $short in $properties {
|
||||
// all directions
|
||||
.#{$short}a-#{$size} {
|
||||
#{$property}-left: #{$size}px !important;
|
||||
#{$property}-right: #{$size}px !important;
|
||||
#{$property}-top: #{$size}px !important;
|
||||
#{$property}-bottom: #{$size}px !important;
|
||||
}
|
||||
// top
|
||||
.#{$short}t-#{$size} {
|
||||
#{$property}-top: #{$size}px !important
|
||||
}
|
||||
// bottom
|
||||
.#{$short}b-#{$size} {
|
||||
#{$property}-bottom: #{$size}px !important
|
||||
}
|
||||
// left
|
||||
.#{$short}l-#{$size} {
|
||||
#{$property}-left: #{$size}px!important
|
||||
}
|
||||
// right
|
||||
.#{$short}r-#{$size} {
|
||||
#{$property}-right: #{$size}px!important
|
||||
}
|
||||
// left and right
|
||||
.#{$short}x-#{$size} {
|
||||
#{$property}-left: #{$size}px!important;
|
||||
#{$property}-right: #{$size}px!important;
|
||||
}
|
||||
// top and bottom
|
||||
.#{$short}y-#{$size} {
|
||||
#{$property}-top: #{$size}px !important;
|
||||
#{$property}-bottom: #{$size}px !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@for $i from 0 through 50 {
|
||||
.font-#{$i} {
|
||||
font-size: #{$i}px ;
|
||||
}
|
||||
}
|
||||
@@ -135,3 +135,46 @@
|
||||
<ul>
|
||||
<li><strong>.float-left</strong></li> <li><strong>.float-right</strong></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## <span id="Spacing">Spacing</span>
|
||||
<br>
|
||||
|
||||
<p>The helper classes apply <strong>margin</strong> or <strong>padding</strong> to an element ranging from <em>0 to 5</em>. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format <code>{property}{direction}-{size}</code>.</p>
|
||||
|
||||
<p>The <strong>property</strong> applies the type of spacing:</p>
|
||||
|
||||
<div ><ul>
|
||||
<li><code>m</code> - applies <code>margin</code></li>
|
||||
<li><code>p</code> - applies <code>padding</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>The <strong>direction</strong> designates the side the property applies to:</p>
|
||||
|
||||
<div ><ul>
|
||||
<li><code>t</code> - applies the spacing for <code>*-top</code></li>
|
||||
<li><code>b</code> - applies the spacing for <code>*-bottom</code></li>
|
||||
<li><code>l</code> - applies the spacing for <code>*-left</code></li>
|
||||
<li><code>r</code> - applies the spacing for <code>*-right</code></li>
|
||||
<li><code>x</code> - applies the spacing for both <code>*-left</code> and <code>*-right</code></li>
|
||||
<li><code>y</code> - applies the spacing for both <code>*-top</code> and <code>*-bottom</code></li>
|
||||
<li><code>a</code> - applies the spacing for the property in all directions</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>The <strong>size</strong> controls the increment of the property:</p>
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<span class="pl-3">Test</span><br>
|
||||
<span class="ml-5 "
|
||||
>Test</span>
|
||||
<div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user