Ioni c 4 и Angular 5 ion-кнопок цвет и атрибуты не работают - PullRequest
0 голосов
/ 16 января 2020

Я использую ioni c 4 и angular 5, и по какой-то причине элемент Press Button ion-buttons ниже не задает цвет или какие-либо атрибуты для кнопки, и я попробовал я знаю, как установить цвет, но ничего не работает?

<ion-row>
      <ion-col col-12>
        <ion-card>
          <ion-card-header>
            <h1>Companies</h1>
          </ion-card-header>
          <ion-card-content>
            <ion-row>
              <ion-col col-md-4>
                <ion-label>Comp</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_sector" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let sector of sectors" value="{{ sector }}">{{ sector }}</ion-option>
          </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Country</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_country" multiple="true" interface="popover"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let country of countries" value="{{ country }}">{{ country }}</ion-option>
                </ion-select>
              </ion-col>
              <ion-col col-md-4>
                <ion-label>Investment</ion-label>
                <ion-select [(ngModel)]="filter_data_quick_investment_type" multiple="true" interface="popver"
                      (ionChange)="quickSearch()">
            <ion-option *ngFor="let investment_type of investment_types" value="{{ investment_type }}">{{
              investment_type }}
            </ion-option>
          </ion-select>
            **<ion-row text-right>
                <ion-col col-md-6 offset-1="">
                  <ion-buttons slot="primary" fill="solid" style="--background:blue" size="small">
                    Press Button
                  </ion-buttons>
                </ion-col>
              </ion-row>**
              </ion-col>
            </ion-row>
            <ion-row>

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Только что понял, что я должен был поместить атрибут ion-button в элемент button, обернутый в элемент ion-button для версии angular и ioni c Я использую так:

      <button ion-button slot="" offset-2="">Apply</button>
    </ion-buttons>```
0 голосов
/ 16 января 2020

Вам необходимо использовать поле цвета, чтобы изменить цвет кнопки

<ion-button color="secondary">Button</ion-button>

цвета определены в src / app / theme / variables.s css

  /** secondary **/
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;

Также Я заметил, что вы назвали элемент <ion-buttons> во множественном числе s. Я думаю, что это должно быть <ion-button>

...