angular2之ngClass

时间：2017-06-29 19:15:17 阅读：242 评论：0 收藏：0 [点我收藏+]

标签：struct width rgba null sch direct play data icon

1.页面

<i>

</i>

<span>{{secM.label}}</span>

</i>

</div>

<span>{{thrM.label}}</span>

</div>

</div>

2.ts组件

import { Component, OnInit ,OnDestroy} from ‘@angular/core‘;

import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from ‘@angular/router‘;

import { EventManager, AlertService } from ‘ng-jhipster‘;

import { Subscription } from ‘rxjs/Rx‘;

import { Title } from ‘@angular/platform-browser‘;

import { Principal, StateStorageService } from ‘../../shared‘;

@Component({

selector: ‘jhi-main‘,

templateUrl: ‘./main.component.html‘,

styleUrls: [

‘main.css‘

]

})

export class JhiMainComponent implements OnInit, OnDestroy {

isHidden: boolean;

isSidebarCollapsed: boolean;

hiddenMemu: boolean = false;

divStyle:any;

eventSubscriber: Subscription;

secMenuList: any;

firstClass:number = 0;

secondClass:number = -1;

constructor(

private titleService: Title,

private router: Router,

private principal: Principal,

private $storageService: StateStorageService,

private eventManager: EventManager // 事件管理

) {

this.isHidden = true;

this.secMenuList = [];

}

private getPageTitle(routeSnapshot: ActivatedRouteSnapshot) {

let title: string = (routeSnapshot.data && routeSnapshot.data[‘pageTitle‘]) ? routeSnapshot.data[‘pageTitle‘] : ‘schintacloudApp‘;

if (routeSnapshot.firstChild) {

title = this.getPageTitle(routeSnapshot.firstChild) || title;

}

return title;

}

hiddenMemuDiv(){

if( this.hiddenMemu ==false){

this.hiddenMemu = true;

this.divStyle = "hide";

} else {

this.hiddenMemu = false;

this.divStyle = "show";

}

ngOnInit() {

this.eventSubscriber = this.eventManager.subscribe(‘menuChange‘, (response) => this.changeMenu(response));

this.router.events.subscribe((event) => {

if (event instanceof NavigationEnd) {

this.titleService.setTitle(this.getPageTitle(this.router.routerState.snapshot.root));

}

if (event instanceof RoutesRecognized) {

let params = {};

let destinationData = {};

let destinationName = ‘‘;

let destinationEvent = event.state.root.firstChild.children[0];

if (destinationEvent !== undefined) {

params = destinationEvent.params;

destinationData = destinationEvent.data;

destinationName = destinationEvent.url[0] ? destinationEvent.url[0].path : ‘‘;

}

let from = {name: this.router.url.slice(1)};

let destination = {name: destinationName, data: destinationData};

this.$storageService.storeDestinationState(destination, params, from);

}

});

}

changeDetroy(event){

if(event && event !=null && event ==‘navbarNgOnDestroy‘) {

this.isHidden = true;

}

ngOnDestroy() {

this.eventManager.destroy(this.eventSubscriber);

}

isAuthenticated() {

return this.principal.isAuthenticated();

}

toggleSidebar() {

this.isSidebarCollapsed = !this.isSidebarCollapsed;

}

changeMenu(data) {

if (data.content) {

if (data.content.sign == ‘1‘) {

this.secMenuList = data.content.res;

this.showOrOpen(this.secMenuList[0]);

this.isHidden = false;

} else if (data.content.sign == ‘2‘) {

this.showOrOpen(data.content.res);

this.isHidden = true;

} else if (data.content.sign == ‘3‘) {

this.secMenuList = data.content.res;

this.isHidden = false;

} else if (data.content.sign == ‘4‘) {

this.isHidden = true;

}

} else {

this.router.navigate([‘/‘]);

this.isHidden = true;

}

showOrOpen(secM,firstIndex?:any) {

if(firstIndex || firstIndex == 0) {

this.firstClass = firstIndex;

} else {

this.firstClass = 0;

}

if (secM && secM.children.length > 0) {

secM.showFlag = !secM.showFlag;

} else {

this.openWin(secM);

}

openWin(obj,secondIndex?:any) {

if(secondIndex || secondIndex == 0) {

this.firstClass = -1;

this.secondClass = secondIndex;

} else {

this.secondClass = -1;

}

if (obj.data) {

this.router.navigate([‘/‘+obj.data.menuIdPath]);

}

3.css文件

/* ==========================================================================

Main

========================================================================== */

.layout-sidebar{

width: 260px;

height: 100%;

position: fixed;

z-index: 102;

overflow-y: auto;

transition: margin-left .3s;

background: #4e5159;

background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4e5159),color-stop(100%,#1f2023));

background: -webkit-linear-gradient(top,#4e5159,#1f2023);

background: linear-gradient(180deg,#4e5159 0,#1f2023);

}

.main-content{

/*margin-left: 260px;*/

/*padding-top: 50px;*/

transition: margin-left .3s;

/*padding-bottom: 40px;*/

padding: 0;

padding-right: 0rem;

}

.folder-box{

display: flex;

background: #4c545f;

flex-direction: column;

position: relative;

box-shadow: 0 0 10px #6d6d6d;

-webkit-box-shadow: 0 0 10px #6d6d6d;

-moz-box-shadow: 0 0 10px #6d6d6d;

-ms-box-shadow: 0 0 10px #6d6d6d;

-o-box-shadow: 0 0 10px #6d6d6d;

margin-right: 1rem;

}

.folder-menu{

display: flex;

flex-direction: column;

overflow-y: scroll;

width: 13rem;

}

.folder-menu::-webkit-scrollbar{

width: 6px;

height: 6px;

background-color: transparent;

}

/*定义滚动条的轨道，内阴影及圆角*/

.folder-menu::-webkit-scrollbar-track{

border-radius: 5px;

background-color: transparent;

}

/*定义滑块，内阴影及圆角*/

.folder-menu::-webkit-scrollbar-thumb{

/*width: 10px;*/

height: 10px;

border-radius: 5px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #4c545f;

}

.folder-menu .first-class{

display: flex;

width: 100%;

height: 3rem;

line-height: 3rem;

border-bottom: 1px solid #5F5D5D;

cursor: pointer;

}

.folder-menu .first-class:hover{

background: #6c737d;

}

.folder-menu .first-class.this{

background-image: url(../../../content/images/icon05.png);

background-position: right center;

background-repeat: no-repeat;

background-color: #6c737d;

}

.folder-menu .first-class i{

display: -webkit-box;

width: 3rem;

height: 3rem;

-webkit-box-pack: center;

justify-content: center;

}

.folder-menu .first-class i img{

height: 18px;

width: auto;

}

.folder-menu .first-class span{

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -o-box;

display: box;

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

-o-box-flex: 1;

box-flex: 1;

color: #fff;

/*font-weight: bold;*/

-webkit-box-align: center;

width: 7rem;

/*padding-left: 1rem;*/

}

.folder-menu .first-class i{

display: -webkit-box;

width: 3rem;

height: 3rem;

-webkit-box-pack: center;

justify-content: center;

}

.folder-menu .first-class i.folder{

width: 2rem;

}

.folder-menu .first-class i.folder img{

height: 10px;

width: auto;

}

.folder-menu .first-class i.unfolder img{

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

}

.folder-menu .submenu{

display: -webkit-box;

display: box;

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-box-flex: 1;

-moz-box-flex: 1;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-box-orient: vertical;

}

.folder-menu .submenu .second-class{

display: flex;

width: 100%;

height: 3rem;

line-height: 3rem;

margin-bottom: 1px;

/**/

cursor: pointer;

}

.folder-menu .submenu .second-class:hover{

background-color: #05C9D9;

}

.folder-menu .submenu .second-class.this{

background-image: url(../../../content/images/icon05.png);

background-position: right center;

background-repeat: no-repeat;

background-color: #6c737d;

}

.folder-menu .submenu .second-class span{

display: -webkit-box;

display: box;

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-box-flex: 1;

-moz-box-flex: 1;

color: #fff;

-webkit-box-align: center;

width: 100%;

padding-left: 4.5rem;

background: url(../../../content/images/icon04.png) 3rem center no-repeat;

}

.show{

display: -webkit-box;

position: absolute;

top: 50%;

left: 13rem;

width: 20px;

height: 40px;

background: #3F4752;

-webkit-box-align: center;

-ms-box-align: center;

-moz-box-align: center;

-o-box-align: center;

-webkit-box-pack: center;

-ms-box-pack: center;

-moz-box-pack: center;

-o-box-pack: center;

margin-top: -10px;

z-index: 99;

cursor: pointer;

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

-moz-transform:rotate(180deg);

-o-transform:rotate(180deg);

-ms-transform:rotate(180deg);

}

.hide{

display: -webkit-box;

position: fixed;

top: 50%;

left: 0rem;

width: 20px;

height: 40px;

background: #3F4752;

-webkit-box-align: center;

-ms-box-align: center;

-moz-box-align: center;

-o-box-align: center;

-webkit-box-pack: center;

-ms-box-pack: center;

-moz-box-pack: center;

-o-box-pack: center;

margin-top: -10px;

z-index: 99;

cursor: pointer;

-webkit-transform:rotate(0deg);

transform:rotate(0deg);

-moz-transform:rotate(0deg);

-o-transform:rotate(0deg);

-ms-transform:rotate(0deg);

}

.navbar{

position: fixed;

// left: 260px;

right: 0;

top: 0;

z-index: 102;

padding: 0;

height: 50px;

background: #0388e5;

transition: left .3s;

color: #fff;

padding: 9px 20px;

line-height: 1.15;

}*/

.navbar{

padding: 0;

display: initial !important;

}

:host >>> .footer {

border-top: 1px solid rgba(0,0,0,.125);

/*margin-left: 260px;*/

transition: margin-left .3s;

}

.sidebar-collapsed .layout-sidebar{

margin-left: -260px;

}

.sidebar-collapsed .main-content{

margin-left: 0;

}

.sidebar-collapsed .navbar{

left: 0;

}

:host >>> .sidebar-collapsed .footer{

margin-left: 0;

}

angular2之ngClass

标签：struct width rgba null sch direct play data icon

原文地址：http://www.cnblogs.com/zb347954263/p/7095787.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行