Skip to content

Commit ea82b95

Browse files
JSantarelliJSantarelli
committed
feat(plex-mininav): componente de navegación
1 parent 67879c0 commit ea82b95

15 files changed

+547
-5
lines changed

‎src/demo/app/app.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export class AppComponent implements OnInit {
4343
{ label: 'Wrapper', icon: 'view-quilt', route: '/wrapper' },
4444
{ label: 'Grid', icon: 'view-grid', route: '/grid' },
4545
{ label: 'Slider', icon: 'interaccion', route: '/slider' },
46+
{ label: 'Mininav', icon: 'compare', route: '/mininav' },
4647
{ divider: true, },
4748
{ label: 'Directivas', icon: 'sign-direction', route: 'directives' },
4849
{ label: 'Directiva Align', icon: 'vector-difference', route: '/directives/listado-sidebar/align' },

‎src/demo/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import { WrapperDemoComponent } from './wrapper/wrapper.component';
4848
import { GridDemoComponent } from './grid/grid.component';
4949
import { CardDemoComponent } from './card/card.component';
5050
import { SliderDemoComponent } from './slider/slider.component';
51+
import { MininavDemoComponent } from './mininav/mininav.component';
5152

5253
// Template
5354
import { ListadoSidebarComponent } from './templates/listado-sidebar/listado-sidebar';
@@ -119,6 +120,7 @@ import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar
119120
GridDemoComponent,
120121
CardDemoComponent,
121122
SliderDemoComponent,
123+
MininavDemoComponent,
122124
ListadoSidebarComponent,
123125
SidebarDetalleComponent,
124126
MainListadoComponent,

‎src/demo/app/app.routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ import { AlignDemoComponent } from './directives/componentes/align/align.compone
4747
import { InternacionComponent } from './templates/modulos/internacion/internacion';
4848
import { RecursoDetalleComponent } from './templates/modulos/internacion/sidebar/detalle/recurso-detalle.component';
4949
import { SliderDemoComponent } from './slider/slider.component';
50+
import { MininavDemoComponent } from './mininav/mininav.component';
5051

5152
const appRoutes: Routes = [
5253
{ path: 'inicio', component: HomeDemoComponent },
@@ -82,6 +83,7 @@ const appRoutes: Routes = [
8283
{ path: 'grid', component: GridDemoComponent },
8384
{ path: 'card', component: CardDemoComponent },
8485
{ path: 'slider', component: SliderDemoComponent },
86+
{ path: 'mininav', component: MininavDemoComponent },
8587
{ path: 'templates', component: TemplateInicioComponent },
8688
{ path: 'templates/form', component: TemplateFormComponent },
8789
{ path: 'templates/form-sidebar', component: TemplateBotoneraSidebarComponent },

‎src/demo/app/mininav/mininav.component.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
templateUrl: './mininav.html'
5+
})
6+
export class MininavDemoComponent {
7+
8+
9+
menu = [
10+
{
11+
nombre: 'accordion',
12+
icono: 'view-day',
13+
link: 'accordion'
14+
},
15+
{
16+
nombre: 'card',
17+
icono: 'card-account-details',
18+
link: 'card'
19+
},
20+
{
21+
nombre: 'detail',
22+
icono: 'account',
23+
link: 'detail'
24+
},
25+
{
26+
nombre: 'templates',
27+
icono: 'view-grid',
28+
link: 'templates'
29+
},
30+
{
31+
nombre: 'wrapper',
32+
icono: 'view-quilt',
33+
link: 'wrapper'
34+
},
35+
{
36+
nombre: 'grid',
37+
icono: 'view-grid',
38+
link: 'grid'
39+
},
40+
{
41+
nombre: 'slider',
42+
icono: 'interaccion',
43+
link: 'slider'
44+
},
45+
];
46+
47+
anchors = [
48+
{
49+
nombre: 'mi huds',
50+
icono: 'paciente',
51+
target: 'miHuds'
52+
},
53+
{
54+
nombre: 'mis consultas',
55+
icono: 'medico',
56+
target: 'misConsultas'
57+
},
58+
{
59+
nombre: 'mis documentos',
60+
icono: 'documento',
61+
target: 'misDocumentos'
62+
},
63+
];
64+
}

‎src/demo/app/mininav/mininav.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<plex-layout main="6" resizable="true" [min]="2" [max]="6" [steps]="2">
2+
<plex-layout-main>
3+
<plex-title main titulo="atributo links"></plex-title>
4+
5+
<!-- Mininav -->
6+
<plex-mininav color="#EA1E79">
7+
<ul sup>
8+
<li plex-mininav-item *ngFor="let item of menu" titulo="{{ item.nombre }}" link="{{ item.link }}"
9+
icono="{{ item.icono }}">
10+
</li>
11+
</ul>
12+
<ul inf>
13+
<li plex-mininav-item titulo="Navegar por ruteo" link="templates" icono="logo-twitter">
14+
</li>
15+
</ul>
16+
</plex-mininav>
17+
<section>
18+
<plex-title size="sm" titulo="plex-mininav"></plex-title>
19+
<h5 class="mt-4">
20+
<b>Es un recurso de navegación con doble función:</b>
21+
<ul class="mt-2">
22+
<li>Agrupar/secuenciar información extensa en espacios reducidos a partir de la navegación entre
23+
anclas
24+
(anchors).</li><br>
25+
<li>Navegación de las diferentes secciones de un módulo (submódulos) a partir de ruteos.</li>
26+
</ul>
27+
</h5>
28+
</section>
29+
</plex-layout-main>
30+
<plex-layout-sidebar type="invert">
31+
32+
<plex-title titulo="atributo target (anchors)" main>
33+
<plex-button type="danger" icon="close" size="sm"></plex-button>
34+
</plex-title>
35+
36+
<plex-mininav>
37+
<ul sup>
38+
<li plex-mininav-item *ngFor="let item of anchors" target="{{ item.target }}" titulo="{{ item.nombre }}"
39+
icono="{{ item.icono }}">
40+
</li>
41+
</ul>
42+
<ul inf>
43+
<li plex-mininav-item titulo="" link="accordion" titulo="Navegar por ruteo" icono="logo-youtube">
44+
</li>
45+
</ul>
46+
</plex-mininav>
47+
<div>
48+
<plex-title anchor="miHuds" size="sm" titulo="mi huds"></plex-title>
49+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
50+
Lorem
51+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
52+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
53+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
54+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
55+
Lorem
56+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
57+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
58+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
59+
<plex-title size="sm" titulo="subtitulo 2"></plex-title>
60+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
61+
Lorem
62+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
63+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
64+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
65+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
66+
Lorem
67+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
68+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
69+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
70+
<plex-title size="sm" titulo="subtitulo 1"></plex-title>
71+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
72+
Lorem
73+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
74+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
75+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
76+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
77+
Lorem
78+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
79+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
80+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
81+
<plex-title size="sm" titulo="subtitulo 2"></plex-title>
82+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
83+
Lorem
84+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
85+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
86+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
87+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
88+
Lorem
89+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
90+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
91+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
92+
<plex-title anchor="misConsultas" size="sm" titulo="mis consultas"></plex-title>
93+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
94+
Lorem
95+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
96+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
97+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
98+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
99+
Lorem
100+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
101+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
102+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
103+
<plex-title size="sm" titulo="subtitulo 3"></plex-title>
104+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
105+
Lorem
106+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
107+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
108+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
109+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
110+
Lorem
111+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
112+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
113+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
114+
<plex-title size="sm" titulo="subtitulo 4"></plex-title>
115+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
116+
Lorem
117+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
118+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
119+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
120+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
121+
Lorem
122+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
123+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
124+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
125+
<plex-title size="sm" titulo="subtitulo 5"></plex-title>
126+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
127+
Lorem
128+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
129+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
130+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
131+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
132+
Lorem
133+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
134+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
135+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
136+
<plex-title anchor="misDocumentos" size="sm" titulo="mis documentos"></plex-title>
137+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
138+
Lorem
139+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
140+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
141+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus Lorem ipsum dolor sit amet,
142+
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
143+
Lorem
144+
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
145+
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
146+
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus</p>
147+
</div>
148+
</plex-layout-sidebar>
149+
</plex-layout>

‎src/lib/css/layout.scss‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,48 @@ plex-layout {
6666
}
6767
}
6868

69+
// mininav
70+
plex-layout-main {
71+
div.plex-box-content {
72+
display: grid;
73+
grid-template-columns: auto 1fr;
74+
grid-template-rows: min-content 1fr;
75+
76+
> plex-mininav {
77+
grid-column: 1;
78+
grid-row: 2 / -1;
79+
margin-right: .5rem;
80+
}
81+
82+
div.plex-content {
83+
grid-column: 2;
84+
grid-row: 1 / -1;
85+
padding-right: .5rem;
86+
}
87+
}
88+
}
89+
90+
91+
plex-layout-sidebar {
92+
div.plex-box-content {
93+
display: grid;
94+
grid-template-columns: auto 1fr;
95+
grid-template-rows: min-content 1fr;
96+
97+
> plex-mininav {
98+
grid-column: 1;
99+
grid-row: 2 / -1;
100+
margin-right: .5rem;
101+
}
102+
103+
div.plex-content {
104+
grid-column: 2;
105+
grid-row: 1 / -1;
106+
padding-right: .5rem;
107+
}
108+
}
109+
}
110+
69111
&[resizable="true"] > section {
70112
> div.row {
71113
> div[class*="col-"] {

0 commit comments

Comments
 (0)