Ändern der Schriftgröße in Primeng Daten in angular2 Projekt

Ich versuche, die Schriftgröße der Spaltenüberschriften anzupassen und kann auch der Inhalt sein. Ich habe versucht, eine reine CSS-Lösung basierend auf den von Primeng erwähnten Strukturklassen zu machen, aber ohne Erfolg. https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming Ändern der Schriftgröße in Primeng Daten in angular2 Projekt

ich in anderen Stackoverflow sah gefunden, aber auf diese Weise die akzeptierte Antwort.

<p-column field="type" header="Type" 
     [style]="{'text-align': 'center', 'font-size': '0.8em'}"></p-column>

Gibt es einen reinen CSS Weg Schriftgröße von primeng Datentabellen und anderen Komponenten unter Verwendung von reinen CSS Lösungen zu modifizieren.

Erwähnenswert, dass ich nicht wirklich eine UI/UX Person bin. Wenn jemand das schon gelöst hat, wäre ich dankbar. Danke vielmals.

Quelle

2017-04-26 codestruggle

Die PrimeNG-Datentabelle ist im Grunde eine HTML-Tabelle, so dass Sie sie ändern können, indem Sie td und th verwenden, um font-size für die Zellen, Header oder beides zu ändern.

th, td { 
    text-align: center; 
    font-size: 0.8em; 
}

Wenn Sie jedoch wollen einfach für die gesamte Tabelle Stile durch CSS ändern, können Sie die tableStyleClass Eigenschaft verwenden und nur eine neue Klasse für die Tabelle wie folgt erstellen:

<p-dataTable [value]="cars" tableStyleClass="prime-table"> 
    <p-column field="vin" header="Vin"></p-column> 
    <p-column field="year" header="Year"></p-column> 
    <p-column field="brand" header="Brand"></p-column> 
    <p-column field="color" header="Color"></p-column> 
</p-dataTable>

Und fügen Das Styling der Klasse:

.prime-table{ 
     text-align: center; 
     font-size: 0.8em; 
    }

Quelle

2017-04-26 08:00:33 DGarvanski

ich Ihre Lösung versucht, sowohl die Lösungen sind nicht arbeiten, th td one sowie die tableStyleClass one. Die tableStyleClass ist eines ihrer Attribute zum Formatieren der Tabelle. Idealerweise sollte Ihre Lösung funktionieren. Aber irgendwie funktioniert es nicht. Wenn es für jemand anderen arbeitet, sollte dies die akzeptierte Antwort sein. – codestruggle

Das mache ich, aber ich habe auch kein PrimeUI-Thema aufgenommen und alle Elemente selbst gestylt. Vielleicht wird es von etwas in Ihrem CSS überschrieben. Sie können versuchen, eine '! Wichtig'-Regel zu verwenden, um zu sehen, ob das der Fall ist oder etwas anderes. – DGarvanski

Ich denke du brauchst '/ deep /'. –

Sie können es auf zwei Arten lösen.

Priming Datentabelle kann styleclass oder tableStyleClass

Beispiel unter Verwendung von Style-Attribut gestylt werden:

<p-dataTable [value]="cars" tableStyleClass="prime-table"> 
    <p-column field="vin" header="Vin" styleClass="pr-column1"></p-column> 
    <p-column field="year" header="Year" styleClass="pr-column2"></p-column> 
    <p-column field="brand" header="Brand" styleClass="pr-column3"></p-column> 
    <p-column field="color" header="Color" styleClass="pr-column4"></p-column>. 
</p-dataTable>

Sie können jeweils Artklasse geben diese Attribute.

Die zweite Möglichkeit, die Art der Bearbeitung ist bitte https://www.primefaces.org/primeng/#/datatable

Der untere Teil Styling-Header beziehen. Hier erhalten Sie die Gestaltungselemente der Datentabelle. Schreiben Sie Ihren individuellen Stil auf diese Elemente und es wird für Sie funktionieren.

Beispiel:

.ui-datatable-header{ 
    text-align:center; 
    font-size:20px; 
}

Hoffnung diese beide Ihnen das Problem sortieren helfen.

Quelle

2017-04-26 10:47:20

können Sie den folgenden Code verwenden, um Ihre Bedürfnisse

.ui-table, 
.ui-table .ui-table-wrapper table { 
    font-size: 16px !important; 
}

ui-table zu passen, und ui-table-wrapper sind definiert CSS-Klassen in der aktuellen Version von Tabellen von PrimeNG

Quelle

2018-02-13 18:41:39

Ändern der Schriftgröße in Primeng Daten in angular2 Projekt

Antwort

Verwandte Themen