使用angular2的主要样式

时间：2016-07-12 20:29:16

标签： html angular primeng

您好我刚开始使用angular 2.我发现这个库PrimeNG，我按照本教程： http://blog.davincisoftware.sk/primeng-web-component-framework-based-on-angularjs-2 这一切都有效，除了风格。 他们不会以某种方式申请，我真的不知道该怎么做。这是我的桌子的样子： primeNG datatable 

<div class="content-wrapper fullscreen-override">
<section class="content-header">
<H1>Users</H1>
</section>

<section class="content">
<div class="row col-lg-10 center">
<div class="box box-primary"> 
<p-dataTable [(value)]="users" selectionMode="single" [(selection)]="selectedUser" (onRowSelect)="onRowSelect($event)" rows="5" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" [globalFilter]="gb" [responsive]="true">

    <p-column field="email" header="email" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="first_name" header="first_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="last_name" header="last_name" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>
    <p-column field="is_superuser" header="is_superuser" [filter]="true" filterMatchMode="contains" [sortable]="true"></p-column>

    <footer>
        <div class="ui-helper-clearfix" style="width:100%">
            <button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>
            <button type="button" pButton icon="fa-pencil-square-o" style="float:left" (click)="showDialogToEdit()" [disabled]="selectedUser == null" label="Edit"></button>
            <button type="button" pButton icon="fa-close" style="float:left" (click)="delete()" [disabled]="selectedUser == null" label="Delete"></button>
        </div>
    </footer>
</p-dataTable>

<p-dialog header="User details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
    <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="displayableUser">
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="email">email</label></div>
            <div class="ui-grid-col-8"><input pInputText id="email" [(ngModel)]="displayableUser.email" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="name">first_name</label></div>
            <div class="ui-grid-col-8"><input pInputText id="first_name" [(ngModel)]="displayableUser.first_name" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="surname">last_name</label></div>
            <div class="ui-grid-col-8"><input pInputText id="last_name" [(ngModel)]="displayableUser.last_name" /></div>
        </div>
        <div class="ui-grid-row">
            <div class="ui-grid-col-4"><label for="country">is_superuser</label></div>
            <div class="ui-grid-col-8"><input pInputText id="is_superuser" [(ngModel)]="displayableUser.is_superuser" /></div>
        </div>
    </div>
    <footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
            <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
        </div>
    </footer>
</p-dialog>
</div>
</div>
</section>
</div>

以上是我的模板。

另外，我不太了解如何在他们的元素上应用我自己的课程。

这是我的组件类（我也尝试删除装饰器组件

中的styles属性 
import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { UsersFormCreation } from './modal_forms/creation/users.forms.creation';
import {DataTable,
        Column,
        TabPanel,
        TabView,
        Header,
        Footer,
        Dialog,
        Button,
        InputText} from 'primeng/primeng';
import { RequestService } from '../../common/request.service';
import {User} from './user';

const template = require('./users.template.html');
const style = require('./style.css');

@Component({
  selector: 'dashboardUsers',
  template: template,
  providers: [RequestService],
  directives: [
        ROUTER_DIRECTIVES,
        DataTable,
        Column,
        TabPanel,
        TabView,
        Header,
        Footer,
        Dialog,
        Button,
        InputText]
  styles: [style]
})
export class DashboardUsersComponent implements OnInit {
  response: string;
  api_path: string;
  users: User[];
  cols: any;
  displayableUser: User = new DisplayableUser();
  selectedUser: User;
  displayDialog: boolean;
  newUser: boolean;
  count: number;
  next: string;
  previous: string;

  constructor(public router: Router, public requestService: RequestService) {
    this.api_path = 'http://127.0.0.1:8000/users/';

  }

7 个答案:

答案 0 :(得分：23)

您需要关闭组件的封装。

基本概念是每个组件都隐藏其他组件的样式，因此它们不会相互覆盖。您可以阅读有关封装here的更多信息。

...
import { ..., ViewEncapsulation } from '@angular/core';

@Component {
    ...
    encapsulation: ViewEncapsulation.None,
} ...

答案 1 :(得分：18)

打开style.css文件并导入样式。

@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';

答案 2 :(得分：7)

您是否在index.html中包含了primeNG css和主题之一？

<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />

看看这是否有帮助。

答案 3 :(得分：7)

我不会关闭ViewEncapsulation，因为你的样式可能会流失，并可能导致其他应用程序出现问题。

我建议使用/ deep / selector强制样式向下穿过子组件树。这可以应用于逐个类或多个类，如下所示。

单个班级 

:host #{"/deep/"} .yourStyle1 {
    color: #ffffff; 
}

多个课程 

:host #{"/deep/"} {

     .yourStyle1 { color: #ffffff; }

     .yourStyle2 { color: #000000; }
}

更多信息：https://angular.io/docs/ts/latest/guide/component-styles.html

答案 4 :(得分：4)

将必要的CSS文件添加到styles的{​​{1}}部分：

.angular-cli.json

另请参阅PrimeNg Setup，＆＃34;样式配置＆＃34;。

答案 5 :(得分：0)

对我来说最好的解决方案是将样式添加到angular.json文件中。不要忘记停止您的项目，并在更改后再次提供服务：

"styles": [
                        "src/styles.scss",
                        "node_modules/primeng/resources/themes/saga-blue/theme.css",
                        "node_modules/primeng/resources/primeng.min.css"

                    ],

答案 6 :(得分：-3)

您的语法错误。

取代

<button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button>

查看样式语法的更改

你应该使用

<button type="button" pButton icon="fa-plus" [style]="{'float':'left'}" (click)="showDialogToAdd()" label="Add"></button>
相关问题
最新问题