Skip to content

Commit

Permalink
feat(plex): actualiza demostracion de componentes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ma7payne
ma7payne committed Nov 1, 2023
1 parent 0ce97e3 commit 816c74b
Show file tree
Hide file tree
Showing 9 changed files with 294 additions and 417 deletions.
3 changes: 3 additions & 0 deletions src/demo/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ export class AppComponent implements OnInit {
{ label: 'Dropdown', icon: 'menu-right', route: '/dropdown' },
{ label: 'Help', icon: 'help-circle', route: '/help' },
{ label: 'Float', icon: 'decimal', route: '/float' },
{ label: 'Group', icon: 'group', route: '/group' },
{ label: 'Icon', icon: 'emoticon', route: '/icon' },
{ label: 'Int', icon: 'numeric', route: '/int' },
{ label: 'Item List', icon: 'format-list-checks', route: '/item' },
{ label: 'Label', icon: 'account-circle', route: '/label' },
Expand All @@ -63,6 +65,7 @@ export class AppComponent implements OnInit {
{ label: 'Tabs', icon: 'folder', route: '/tabs' },
{ label: 'Text', icon: 'form-textbox', route: '/text' },
{ label: 'Templates', icon: 'view-grid', route: '/templates' },
{ label: 'Title', icon: 'abecedario', route: '/title' },
{ label: 'Wizard', icon: 'auto-fix', route: '/wizard' },
{ label: 'Wrapper', icon: 'view-quilt', route: '/wrapper' },
{ label: 'Grid', icon: 'view-grid', route: '/grid' },
Expand Down
7 changes: 6 additions & 1 deletion src/demo/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ import { CamaService } from './templates/service/cama.service';
import { InternacionComponent } from './templates/modulos/internacion/internacion';
import { RecursosListadoComponent } from './templates/modulos/internacion/listado/recursos-listado.component';
import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
import { DemoTitleComponent } from './title/title.component';
import { DemoGroupComponent } from './group/group.component';


@NgModule({
declarations: [
Expand Down Expand Up @@ -145,7 +148,9 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
AlignDemoComponent,
InternacionComponent,
RecursosListadoComponent,
RecursoDetalleComponent
RecursoDetalleComponent,
DemoTitleComponent,
DemoGroupComponent
],
entryComponents: [
HeaderPacienteComponent
Expand Down
5 changes: 4 additions & 1 deletion src/demo/app/app.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ import { AlignDemoComponent } from './directives/componentes/align/align.compone
import { InternacionComponent } from './templates/modulos/internacion/internacion';
import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
import { SliderDemoComponent } from './slider/slider.component';
import { DemoTitleComponent } from './title/title.component';
import { DemoGroupComponent } from './group/group.component';

const appRoutes: Routes = [
{ path: 'inicio', component: HomeDemoComponent },
Expand Down Expand Up @@ -106,7 +108,8 @@ const appRoutes: Routes = [
{ path: ':id', component: RecursoDetalleComponent },
]
},

{ path: 'title', component: DemoTitleComponent },
{ path: 'group', component: DemoGroupComponent },
{ path: 'item', component: ItemDemoComponent },
{ path: 'detail', component: DetailDemoComponent },
{ path: 'icon', component: DemoIconComponent },
Expand Down
9 changes: 9 additions & 0 deletions src/demo/app/group/group.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { Component } from '@angular/core';

@Component({
selector: 'plex-group-demo',
templateUrl: 'group.html',
})
export class DemoGroupComponent {

}
98 changes: 98 additions & 0 deletions src/demo/app/group/group.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<plex-layout main="8">
<plex-layout-main>
<plex-title titulo="plex-group"> </plex-title>
<p class="lead">El componente <em>plex-group</em> se utiliza para incorporar los títulos que definen cada pantalla o sección.</p>

<plex-title titulo="Atributo SIZE" size="sm"></plex-title>
<p>El atributo size es opcional y su valor por defecto es 'lg'.</p>
<section class="my-4">
<div class="d-flex flex-column justify-content-start w-100 outline-dashed-default">
<div class="row mt-2" align="center">
<div class="col-12 col-md-6">
<plex-title titulo="Titulo 'sm'" size="sm"></plex-title>
<p class="lead">size="sm"</p>
</div>
<div class="col-12 col-md-6">
<plex-title titulo="Titulo 'md'" size="md"></plex-title>
<p class="lead">size="md"</p>
</div>
</div>
<div class="row mt-2" align="center">
<div class="col-12 col-md-6">
<plex-title titulo="Titulo 'lg'" size="lg"></plex-title>
<p class="lead">size="lg"</p>
</div>
<div class="col-12 col-md-6">
<plex-title titulo="Titulo 'xl'" size="xl"></plex-title>
<p class="lead">size="xl"</p>
</div>
</div>
</div>
</section>

<plex-title titulo="Contenido" size="sm"></plex-title>
<p>Puede agregar componentes Plex u otro elemento al titulo para visualizar información o disparar acciones.</p>
<section class="mt-4">
<div class="d-flex flex-column justify-content-start w-100 outline-dashed-default">
<div class="row mt-2" align="center">
<div class="col-12 col-md-6">
<plex-title titulo="Titulo con botón'" size="sm">
<plex-button type="warning" label="Disparar acción" size="sm"></plex-button>
</plex-title>
</div>
<div class="col-12 col-md-6">
<plex-title titulo="Titulo con plex-help" size="md">
<plex-help type="help" titulo="Ayuda de este panel" size="sm">
<div class="ml-4 mb-4" *plHelp>
<label>Organización:</label>
prestacion.solicitud.organizacion.nombre
</div>
</plex-help>
</plex-title>
</div>
</div>
<div class="row mt-4" align="center">
<div class="col-12 col-md-6">
<plex-title titulo="Titulo con Badge + Icono" size="md">
<plex-badge size="sm" type="warning" class="mr-1">TEMPORAL
<plex-button icon="clock" size="sm"></plex-button>
</plex-badge>
</plex-title>
</div>
<div class="col-12 col-md-6">
<plex-title titulo="Titulo con badge" size="md">
<plex-badge size="sm" type="warning" class="mr-1">warning</plex-badge>
<plex-badge size="sm" type="info">info</plex-badge>
</plex-title>
</div>
</div>
</div>
</section>
</plex-layout-main>
<plex-layout-sidebar type="invert">
<plex-title titulo="Atributo type"></plex-title>
<p>El atributo type es opcional y su valor por defecto es 'info'.</p>
<section class="mt-4">
<div class="d-flex flex-column justify-content-start w-100">
<div class="row mt-2" align="center">
<div class="col-12">
<plex-title titulo="Titulo de ejemplo" size="md" type="info"></plex-title>
<p>type="info"</p>
</div>
<div class="col-12">
<plex-title titulo="Titulo de ejemplo" size="md" type="warning"></plex-title>
<p>type="warning"</p>
</div>
<div class="col-12">
<plex-title titulo="Titulo de ejemplo" size="md" type="success"></plex-title>
<p>type="success"</p>
</div>
<div class="col-12">
<plex-title titulo="Titulo de ejemplo" size="md" type="danger"></plex-title>
<p>type="danger"</p>
</div>
</div>
</div>
</section>
</plex-layout-sidebar>
</plex-layout>
73 changes: 66 additions & 7 deletions src/demo/app/icon/icon.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,70 @@
<plex-layout>
<plex-layout main="8">
<plex-layout-main>
<ng-container *ngFor="let icon of adi">
<plex-title titulo="plex-icon"> </plex-title>
<p class="lead">El componente <em>plex-icon</em> se utiliza para agrupar botones, badges y texto de manera ordenada.</p>
<p>Listado de íconos disponibles en <a target="_blank"
href="https://www.andes.gob.ar/andes-font-icon/">https://www.andes.gob.ar/andes-font-icon/</a>.</p>

<span>
<plex-icon [name]="icon" type="info"></plex-icon>
</span>

</ng-container>
<section class="d-flex flex-row justify-content-between w-100 mt-4">
<div class="d-flex flex-column justify-content-start w-100">
<plex-title titulo="Atributo SIZE" size="sm"></plex-title>

<div class="row mt-4" align="center">
<div class="col">
<plex-icon name="emoticon" size="xs"></plex-icon>
<p class="lead">xs</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="sm"></plex-icon>
<p class="lead">sm</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="md"></plex-icon>
<p class="lead">md</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="lg"></plex-icon>
<p class="lead">lg</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="xl"></plex-icon>
<p class="lead">xl</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="xxl"></plex-icon>
<p class="lead">xxl</p>
</div>
</div>
</div>
</section>
</plex-layout-main>
<plex-layout-sidebar type="invert">
<plex-title titulo="Atributo type"></plex-title>
<section class="d-flex flex-row justify-content-between w-100 mt-4">
<div class="d-flex flex-column justify-content-start w-100">
<div class="row mt-2" align="center">
<div class="col">
<plex-icon name="emoticon" size="lg"></plex-icon>
<p>light</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="lg" type="success"></plex-icon>
<p>success</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="lg" type="warning"></plex-icon>
<p>warning</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="lg" type="info"></plex-icon>
<p>info</p>
</div>
<div class="col">
<plex-icon name="emoticon" size="lg" type="danger"></plex-icon>
<p>danger</p>
</div>
</div>
</div>
</section>
</plex-layout-sidebar>
</plex-layout>
Loading

0 comments on commit 816c74b

Please sign in to comment.