Styling-Filter und Paginierung Kontrollen von Angular-Databases mitBootstrapOptions

Question

Ich versuche, das Aussehen der Filterung und Paginierung Kontrollen von Angular-Databases zu beeinflussen und fand heraus, dass es mit den withBootstrapOptions des Rahmens getan werden kann. Ich kann jedoch nicht die Option finden, das Aussehen der Seitentasten, der Eingabefelder für Seitengröße und des Filterfelds zu beeinflussen. Ich möchte nur die Höhe der Eingabefelder und Schaltflächen kleiner machen. Der folgende Code ist, was ich bisher versucht habe:

.withBootstrap() 
.withBootstrapOptions({ 
    TableTools: { 
     classes: { 
      container: 'btn-group', 
      buttons: { 
       normal: 'btn btn-danger' 
      } 
     } 
    }, 
    ColVis: { 
     classes: { 
      masterButton: 'btn btn-primary' 
     } 
    }, 
    pagination: { 
     classes: { 
      ul: 'xxx', 
      li: 'yyy', 
      a: 'zzz' 
     } 
    } 
}) 

Ich habe versucht, meine eigenen Klassen an den Tisch fügen Sie das Styling zu tun, und ich war in der Lage, die Klassen des ul Elements auf xxx von die Paginierung Kontrolle mit dem Code oben, aber wenn ich versuchte, es zu tun, das li oder a Element funktioniert es nicht. Ist das möglich? Kann mir bitte jemand ein Beispiel geben, wie ich das Filtereingabefeld und das Paginierungsfeld/die Schaltflächenhöhe manipulieren kann?

Außerdem weiß jemand, wo ich die Dokumentation für alle verfügbaren Optionen finden kann, die ich mit dem Helfer 'withBootstrapOptions' verwenden konnte? Ich kann es nicht durch meine Suchen finden.

Answer 1

Wenn Sie die Entwicklertools in Ihrem Browser verwenden, werden in angle-databases bereits Klassen auf die Paginat-Schaltflächen gesetzt, die Sie formatieren können. Um die Entwicklerwerkzeuge in Chrome anzuzeigen, klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "Element prüfen". Sie sollten in der Lage sein, die verfügbaren Klassen zu stylen.

Der aktuelle Paginat-Button hat die Klasse: "paginate_button current". Die anderen Schaltflächen haben die Klasse "paginate_button".

Mit CSS sollten Sie in der Lage sein, diese beliebig zu gestalten.

Zum Beispiel

.paginate_button{ 
background: #fff; 
cursor: pointer; 
} 
.paginate_button:hover{ 
    background: #b20000; 
} 
.paginate_button.current{ 
    background: #b20000; 
} 

diese Stile in Ihre Seite ein Put. Sie sollten in der Lage sein, die Auffüllung und Ränder auch zu ändern. Das wird viel sauberer aussehen als zu versuchen, in Javascript zu ändern.