Skip to content

Commit ab8070d

Browse files
qianmoQqianmoQ
committed
[Component] Add Dropdown component
1 parent f34a527 commit ab8070d

File tree

5 files changed

+360
-0
lines changed

5 files changed

+360
-0
lines changed

‎src/renderer/app/layout/layout.routing.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ const LAYOUT_ROUTES: Routes = [
103103
{
104104
path: 'rating',
105105
loadChildren: () => import('../pages/form/rating/rating.module').then(m => m.RatingComponentModule)
106+
},
107+
{
108+
path: 'dropdown',
109+
loadChildren: () => import('../pages/form/dropdown/dropdown.module').then(m => m.DropdownComponentModule)
106110
}
107111
]
108112
},

‎src/renderer/app/layout/navigation/navigation.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@
7474
<li routerLinkActive="navigation__active">
7575
<a [routerLink]="['/form/rating']"><i class="fa fa-random"></i> Rating</a>
7676
</li>
77+
<li routerLinkActive="navigation__active">
78+
<a [routerLink]="['/form/dropdown']"><i class="fa fa-dribbble"></i> Dropdown</a>
79+
</li>
7780
</ul>
7881
</li>
7982
<li routerLinkActive="navigation__sub--active" class="navigation__sub">

‎src/renderer/app/pages/form/dropdown/dropdown.component.html‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Dropdown</h1>
4+
<small>This template is built using <code>ngx-bootstrap/dropdown</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card">
7+
<div class="card-body">
8+
<h4 class="card-title">Dropdown</h4>
9+
<div class="dropdown-demo">
10+
<div dropdown>
11+
<button class="btn btn-primary" dropdownToggle>Primary</button>
12+
<div *dropdownMenu class="dropdown-menu" role="menu">
13+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
14+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
15+
<div class="dropdown-divider"></div>
16+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="dropdown-demo">
21+
<div dropdown>
22+
<button class="btn btn-secondary" dropdownToggle>Secondary</button>
23+
<div *dropdownMenu class="dropdown-menu" role="menu">
24+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
25+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
26+
<div class="dropdown-divider"></div>
27+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="dropdown-demo">
32+
<div dropdown>
33+
<button class="btn btn-info" dropdownToggle>Info</button>
34+
<div *dropdownMenu class="dropdown-menu" role="menu">
35+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
36+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
37+
<div class="dropdown-divider"></div>
38+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
39+
</div>
40+
</div>
41+
</div>
42+
<div class="dropdown-demo">
43+
<div dropdown>
44+
<button class="btn btn-success" dropdownToggle>Success</button>
45+
<div *dropdownMenu class="dropdown-menu" role="menu">
46+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
47+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
48+
<div class="dropdown-divider"></div>
49+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
50+
</div>
51+
</div>
52+
</div>
53+
<div class="dropdown-demo">
54+
<div dropdown>
55+
<button class="btn btn-warning" dropdownToggle>Warning</button>
56+
<div *dropdownMenu class="dropdown-menu" role="menu">
57+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
58+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
59+
<div class="dropdown-divider"></div>
60+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
61+
</div>
62+
</div>
63+
</div>
64+
<div class="dropdown-demo">
65+
<div dropdown>
66+
<button class="btn btn-danger" dropdownToggle>Danger</button>
67+
<div *dropdownMenu class="dropdown-menu" role="menu">
68+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
69+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
70+
<div class="dropdown-divider"></div>
71+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
72+
</div>
73+
</div>
74+
</div>
75+
<div class="dropdown-demo">
76+
<div dropdown>
77+
<button class="btn btn-light" dropdownToggle>Danger</button>
78+
<div *dropdownMenu class="dropdown-menu" role="menu">
79+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
80+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
81+
<div class="dropdown-divider"></div>
82+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
<div class="card">
89+
<div class="card-body">
90+
<h4 class="card-title">Split button Dropdown</h4>
91+
<div class="dropdown-demo">
92+
<div class="btn-group" dropdown>
93+
<button id="split-button" type="button" class="btn btn-primary">Primary</button>
94+
<button type="button" class="btn btn-primary dropdown-toggle-split" dropdownToggle>
95+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
96+
</button>
97+
<ul *dropdownMenu class="dropdown-menu" role="menu">
98+
<li>
99+
<a class="dropdown-item" href="#">Menu one</a>
100+
</li>
101+
<li>
102+
<a class="dropdown-item" href="#">Menu two</a>
103+
</li>
104+
<li class="divider dropdown-divider"></li>
105+
<li>
106+
<a class="dropdown-item" href="#">Split menu</a>
107+
</li>
108+
</ul>
109+
</div>
110+
</div>
111+
<div class="dropdown-demo">
112+
<div class="btn-group" dropdown>
113+
<button type="button" class="btn btn-secondary">Secondary</button>
114+
<button type="button" class="btn btn-secondary dropdown-toggle-split" dropdownToggle>
115+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
116+
</button>
117+
<ul *dropdownMenu class="dropdown-menu" role="menu">
118+
<li>
119+
<a class="dropdown-item" href="#">Menu one</a>
120+
</li>
121+
<li>
122+
<a class="dropdown-item" href="#">Menu two</a>
123+
</li>
124+
<li class="divider dropdown-divider"></li>
125+
<li>
126+
<a class="dropdown-item" href="#">Split menu</a>
127+
</li>
128+
</ul>
129+
</div>
130+
</div>
131+
<div class="dropdown-demo">
132+
<div class="btn-group" dropdown>
133+
<button type="button" class="btn btn-info">Info</button>
134+
<button type="button" class="btn btn-info dropdown-toggle-split" dropdownToggle>
135+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
136+
</button>
137+
<ul *dropdownMenu class="dropdown-menu" role="menu">
138+
<li>
139+
<a class="dropdown-item" href="#">Menu one</a>
140+
</li>
141+
<li>
142+
<a class="dropdown-item" href="#">Menu two</a>
143+
</li>
144+
<li class="divider dropdown-divider"></li>
145+
<li>
146+
<a class="dropdown-item" href="#">Split menu</a>
147+
</li>
148+
</ul>
149+
</div>
150+
</div>
151+
<div class="dropdown-demo">
152+
<div class="btn-group" dropdown>
153+
<button type="button" class="btn btn-success">Success</button>
154+
<button type="button" class="btn btn-success dropdown-toggle-split" dropdownToggle>
155+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
156+
</button>
157+
<ul *dropdownMenu class="dropdown-menu" role="menu">
158+
<li>
159+
<a class="dropdown-item" href="#">Menu one</a>
160+
</li>
161+
<li>
162+
<a class="dropdown-item" href="#">Menu two</a>
163+
</li>
164+
<li class="divider dropdown-divider"></li>
165+
<li>
166+
<a class="dropdown-item" href="#">Split menu</a>
167+
</li>
168+
</ul>
169+
</div>
170+
</div>
171+
<div class="dropdown-demo">
172+
<div class="btn-group" dropdown>
173+
<button type="button" class="btn btn-warning">Warning</button>
174+
<button type="button" class="btn btn-warning dropdown-toggle-split" dropdownToggle>
175+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
176+
</button>
177+
<ul *dropdownMenu class="dropdown-menu" role="menu">
178+
<li>
179+
<a class="dropdown-item" href="#">Menu one</a>
180+
</li>
181+
<li>
182+
<a class="dropdown-item" href="#">Menu two</a>
183+
</li>
184+
<li class="divider dropdown-divider"></li>
185+
<li>
186+
<a class="dropdown-item" href="#">Split menu</a>
187+
</li>
188+
</ul>
189+
</div>
190+
</div>
191+
<div class="dropdown-demo">
192+
<div class="btn-group" dropdown>
193+
<button type="button" class="btn btn-danger">Danger</button>
194+
<button type="button" class="btn btn-danger dropdown-toggle-split" dropdownToggle>
195+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
196+
</button>
197+
<ul *dropdownMenu class="dropdown-menu" role="menu">
198+
<li>
199+
<a class="dropdown-item" href="#">Menu one</a>
200+
</li>
201+
<li>
202+
<a class="dropdown-item" href="#">Menu two</a>
203+
</li>
204+
<li class="divider dropdown-divider"></li>
205+
<li>
206+
<a class="dropdown-item" href="#">Split menu</a>
207+
</li>
208+
</ul>
209+
</div>
210+
</div>
211+
<div class="dropdown-demo">
212+
<div class="btn-group" dropdown>
213+
<button type="button" class="btn btn-light">Danger</button>
214+
<button type="button" class="btn btn-light dropdown-toggle-split" dropdownToggle>
215+
<span class="zmdi zmdi-hc-lg zmdi-caret-down"></span>
216+
</button>
217+
<ul *dropdownMenu class="dropdown-menu" role="menu">
218+
<li>
219+
<a class="dropdown-item" href="#">Menu one</a>
220+
</li>
221+
<li>
222+
<a class="dropdown-item" href="#">Menu two</a>
223+
</li>
224+
<li class="divider dropdown-divider"></li>
225+
<li>
226+
<a class="dropdown-item" href="#">Split menu</a>
227+
</li>
228+
</ul>
229+
</div>
230+
</div>
231+
</div>
232+
</div>
233+
<div class="card">
234+
<div class="card-body">
235+
<h4 class="card-title">Disable Dropdown</h4>
236+
<div class="dropdown-demo">
237+
<div dropdown [isDisabled]="disabled">
238+
<button class="btn btn-primary" dropdownToggle>Primary</button>
239+
<div *dropdownMenu class="dropdown-menu" role="menu">
240+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
241+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
242+
<div class="dropdown-divider"></div>
243+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
244+
</div>
245+
</div>
246+
</div>
247+
<br>
248+
<br>
249+
<hr>
250+
<br>
251+
<button type="button" class="btn btn-light" (click)="disabled = !disabled">
252+
Disable/Enable
253+
</button>
254+
</div>
255+
</div>
256+
<div class="card">
257+
<div class="card-body">
258+
<h4 class="card-title">Position Dropdown</h4>
259+
<div class="dropdown-demo">
260+
<div dropdown>
261+
<button class="btn btn-light" dropdownToggle>Default (left)</button>
262+
<div *dropdownMenu class="dropdown-menu" role="menu">
263+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
264+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
265+
<div class="dropdown-divider"></div>
266+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
267+
</div>
268+
</div>
269+
</div>
270+
<div class="dropdown-demo">
271+
<div dropdown>
272+
<button class="btn btn-light" dropdownToggle>I'm on the right</button>
273+
<div *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
274+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
275+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
276+
<div class="dropdown-divider"></div>
277+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
278+
</div>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
283+
<div class="card">
284+
<div class="card-body">
285+
<h4 class="card-title">Dropup Dropdown</h4>
286+
<div class="dropdown-demo">
287+
<div dropdown [dropup]="true">
288+
<button class="btn btn-light" dropdownToggle>I'm left Dropup</button>
289+
<div *dropdownMenu class="dropdown-menu" role="menu">
290+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
291+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
292+
<div class="dropdown-divider"></div>
293+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
294+
</div>
295+
</div>
296+
</div>
297+
<div class="dropdown-demo">
298+
<div dropdown [dropup]="true">
299+
<button class="btn btn-light" dropdownToggle>I'm Dropup on the right</button>
300+
<div *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
301+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu one</a>
302+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Menu two</a>
303+
<div class="dropdown-divider"></div>
304+
<a [routerLink]="['/form/dropdown']" class="dropdown-item">Split menu</a>
305+
</div>
306+
</div>
307+
</div>
308+
</div>
309+
</div>
310+
</section>

‎src/renderer/app/pages/form/dropdown/dropdown.component.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-component-dropdown',
5+
templateUrl: './dropdown.component.html',
6+
styles: [
7+
'.dropdown-demo {\n' +
8+
' margin: 10px 10px 0 0;\n' +
9+
' display: inline-block;\n' +
10+
'}'
11+
]
12+
})
13+
export class DropdownsComponent implements OnInit {
14+
public disabled = false;
15+
16+
constructor() {
17+
}
18+
19+
ngOnInit() {
20+
}
21+
}

‎src/renderer/app/pages/form/dropdown/dropdown.module.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
5+
import { DropdownsComponent } from './dropdown.component';
6+
7+
const DROPDOWNS_ROUTES = [
8+
{path: '', component: DropdownsComponent}
9+
];
10+
11+
@NgModule({
12+
declarations: [
13+
DropdownsComponent
14+
],
15+
imports: [
16+
CommonModule,
17+
BsDropdownModule.forRoot(),
18+
RouterModule.forChild(DROPDOWNS_ROUTES)
19+
]
20+
})
21+
export class DropdownComponentModule {
22+
}

0 commit comments

Comments
 (0)