Ionic 2: Wie überschreiben Sie den Stil der ionischen Komponente

Ich bin neu auf Ionic 2, möchte ich fragen, wie man den Stil der ionischen Komponente ändern?Ionic 2: Wie überschreiben Sie den Stil der ionischen Komponente

traf ich ein Problem wie unten gezeigt:

<form action=""> 
    <ion-list> 
     <ion-item> 
      <ion-label fixed>Username</ion-label> 
      <ion-input type="text" value="" clearInput></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-label fixed>Password</ion-label> 
      <ion-input type="password" clearInput></ion-input> 
     </ion-item> 
    </ion-list> 
</form>

Das Layout wird so wiedergegeben werden:

Es 3 graue Linien zwischen jeweils Elemente sind, die lang einer Ionenliste gebührt und der kurze ist wegen ion-item.

Ich habe versucht, den Stil in theme/variables.scss zu überschreiben, aber es scheint, dass es keine Einstellung dafür gibt.

ich tief in Chrome sah und fand die html wie diese

ist Ich glaube nicht, den Stil „.list-ios .item-Block .item-Innen“ überschrieben ist eine gute Idee, Gibt es eine andere Möglichkeit, dieses Problem zu lösen?

Danke.

Quelle

2017-03-23 user2504831

Sie müssen nur no-lines auf dieses Element <ion-list> geben. Doc about it.

So: Working Plunker

<ion-list no-lines> 

    <ion-item> 
    <ion-label fixed>Username</ion-label> 
    <ion-input type="text"></ion-input> 
    </ion-item> 

    <ion-item> 
    <ion-label fixed>Password</ion-label> 
    <ion-input type="password"></ion-input> 
    </ion-item> 

</ion-list>

Wenn Sie lernen müssen, wie sie auf Ionic2 Standard zu ändern, empfehle ich zu sehr diesen Artikel zu lesen. A Guide to Styling an Ionic 2 Application

Sie müssen !import hack nicht verwenden, wenn Sie Stile verwenden, wie unten in der Komponente der Seite gezeigt. Verwenden Sie .ios,.md wie folgt aus:

login.scss

.ios, 
    .md { 
     page-login { 
      .margin-top-35 { 
       margin-top: 35px; 
      } 
     } 
}

Quelle

2017-03-23 07:00:08 Sampath

-1

Unmittelbar nach der CSS Eigenschaft hinzufügen !important.

für zB:

.ion-nav-button-right { 
     margin-top: -7px !important; 
     margin-right: 0 !important; 
    }

Für Ihr Problem, entfernen Sie einfach das Label wie:

<ion-item style="background: #f3f3f3 !important"> 
      <ion-input type="text" placeholder="Write Your Comments"></ion-input> 
     </ion-item>

Quelle

2017-03-23 06:16:03 devanshsadhotra

'important' ist keine akzeptable Antwort, wenn wir ein Projekt wartbar und wiederverwendbar halten wollen!. Auch das Einfügen von Stilen ist etwas, das die Spezifität in der CSS zerstört und das Projekt nicht wartbar macht. Das ist der Grund, warum ich gewählt habe. –

@GeorgeAntonakos akzeptiert Ihre Vorschläge, das ist der Grund, warum ich – devanshsadhotra

@George Antonakos Upwored Ich fühle mich in Ionic, wenn die meisten Element-Styling während der Laufzeit passiert. Sie werden nicht wissen, welche Klasse Elemente hinzugefügt werden. da Sie diese Klassen nicht direkt im Code sehen können. Sie müssen also möglicherweise einige Male hinzufügen! – Vasanth

Zum Entfernen von Linien gibt es ein Attribut für ion-item: no-lines

<ion-item no-lines> 
      <ion-label fixed>Username</ion-label> 
      <ion-input type="text" value="" clearInput></ion-input> 
     </ion-item>

Es gibt auch utility attributes, die verwendet werden können.

Quelle

2017-03-23 06:24:27

'! Wichtig' ist in keiner Situation ein Weg. Es wäre am besten, die verwendete Bibliothek zu respektieren und dem gleichen Muster zu folgen und Ihr Design zu ändern oder nur die bereitgestellten Funktionen zu verwenden. –

@GeorgeAntonakos wahr .. deshalb hatte ich als letzten Ausweg erwähnt .. entfernt es sowieso .. –

Ionic 2: Wie überschreiben Sie den Stil der ionischen Komponente

Antwort

Verwandte Themen