Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(search): add animated search-field (#1)

Browse source
This commit is contained in:
mishkolesnikov 2017-05-19 19:45:42 +03:00 • committed by Lex Zhukov
parent a3dede33cf
commit ea94441c8d
7 changed files with 119 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/@theme/components/header/header.component.ts
View file

@ -15,7 +15,7 @@ import { NgaThemeService } from '@nga/theme/services/theme.service';
</div>
<nga-actions size="medium" inverse class="right">
<nga-action><ngx-search-input></ngx-search-input></nga-action>
<nga-action><nga-search type="rotate-layout"></nga-search></nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>

2
src/app/@theme/theme.module.ts
View file

@ -11,6 +11,7 @@ import {
NgaMenuModule,
NgaUserModule,
NgaActionsModule,
NgaSearchModule,
} from '@nga/theme';
import {
@ -36,6 +37,7 @@ const NGA_MODULES = [
NgaMenuModule,
NgaUserModule,
NgaActionsModule,
NgaSearchModule,
];
const COMPONENTS = [

10
src/app/pages/pages-menu.ts
View file

@ -30,9 +30,13 @@ export const menuItems: List<NgaMenuItem> = List([{
title: 'Typography',
link: '/pages/ui-features/typography',
}, {
title: 'Tabs',
link: '/pages/ui-features/tabs',
}]),
title: 'Animated Searches',
link: '/pages/ui-features/search-fields',
},
{
title: 'Tabs',
link: '/pages/ui-features/tabs',
}]),
}, {
title: 'Components',
icon: 'ion ion-ios-gear-outline',

93
src/app/pages/ui-features/search-fields/search-fields.component.html Normal file
View file

@ -0,0 +1,93 @@
<div class="row">
<div class="col-md-6">
<nga-card>
<nga-card-header>
Simple search
</nga-card-header>
<nga-card-body>
<nga-search type="simple-search" tag="simple-search"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Layout Rotate Search
</nga-card-header>
<nga-card-body>
<nga-search type="rotate-layout" tag="rotate-layout"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nga-card>
<nga-card-header>
Modal Zoomin Search
</nga-card-header>
<nga-card-body>
<nga-search type="modal-zoomin" tag="modal-zoomin"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Modal Move Search
</nga-card-header>
<nga-card-body>
<nga-search type="modal-move" tag="modal-move"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Modal Drop Search
</nga-card-header>
<nga-card-body>
<nga-search type="modal-drop" tag="modal-drop"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Modal Half Search
</nga-card-header>
<nga-card-body>
<nga-search type="modal-half" tag="modal-half"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Curtain Search
</nga-card-header>
<nga-card-body>
<nga-search type="curtain" tag="curtain"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Column Curtain Search
</nga-card-header>
<nga-card-body>
<nga-search type="column-curtain" tag="column-curtain"></nga-search>
</nga-card-body>
<nga-card-footer></nga-card-footer>
</nga-card>
</div>
</div>

8
src/app/pages/ui-features/search-fields/search-fields.component.ts Normal file
View file

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-search-fields',
templateUrl: 'search-fields.component.html',
})
export class SearchComponent {
}

4
src/app/pages/ui-features/ui-features-routing.module.ts
View file

@ -8,6 +8,7 @@ import { IconsComponent } from './icons/icons.component';
import { ModalsComponent } from './modals/modals.component';
import { TypographyComponent } from './typography/typography.component';
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
import { SearchComponent } from './search-fields/search-fields.component';
const routes: Routes = [{
path: '',
@ -27,6 +28,9 @@ const routes: Routes = [{
}, {
path: 'typography',
component: TypographyComponent,
}, {
path: 'search-fields',
component: SearchComponent,
}, {
path: 'tabs',
component: TabsComponent,

5
src/app/pages/ui-features/ui-features.module.ts
View file

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { NgaTabsetModule, NgaRouteTabsetModule } from '@nga/theme';
import { NgaTabsetModule, NgaRouteTabsetModule, NgaSearchModule } from '@nga/theme';
import { SharedModule } from '../../shared.module';
@ -20,6 +20,7 @@ import { LargeButtonsComponent } from './buttons/large/large.component';
import { ModalComponent } from './modals/modal/modal.component';
import { TypographyComponent } from './typography/typography.component';
import { TabsComponent, Tab1Component, Tab2Component } from './tabs/tabs.component';
import { SearchComponent } from './search-fields/search-fields.component';
const COMPONENTS = [
UiFeaturesComponent,
@ -40,6 +41,7 @@ const COMPONENTS = [
TabsComponent,
Tab1Component,
Tab2Component,
SearchComponent,
];
@NgModule({
@ -48,6 +50,7 @@ const COMPONENTS = [
UiFeaturesRoutingModule,
NgaTabsetModule,
NgaRouteTabsetModule,
NgaSearchModule,
],
declarations: [
...COMPONENTS,