Предопределенные классы CSS не работают ionic3 - PullRequest
Новая
       35

Предопределенные классы CSS не работают ionic3

0 голосов
/ 24 декабря 2018

Я добавил 

<button ion-button color="light">Light</button>

в home.page.html , но она не работает

кнопка-кнопка не похожа на кнопку, она не выглядитВ качестве кнопки или в соответствии с документацией здесь представлен код home.page.html 

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Hello to Ionic</ion-card-title>
        <button ion-button color="primary">Light</button>
        <button ion-button>Default</button>
        <button ion-button color="secondary">Secondary</button>
        <button ion-button color="danger">Danger</button>
        <button ion-button color="dark">Dark</button>
      </ion-card-header>
      <ion-card-content>
        <p class = "balanced">Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://beta.ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://beta.ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

, и в результате получается

enter image description here

и вот код ---------------------------------------------------------------------- home.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

1 Ответ

0 голосов
/ 24 декабря 2018

Загляните в theme/variables.scss.Если у вас есть цвета, как показано ниже, вы можете использовать их. 

$colors: (
  primary:    #ED1B24,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  orange:     #ffa500
);

Импортировать этот файл в app.scss 

@import './theme/variables.scss';

И использовать вот так <button ion-button color="primary">Submit</button>

...