Ionic3 ActionSheet: как использовать пользовательские иконки из Fontawesome? - PullRequest
Новая
       16

Ionic3 ActionSheet: как использовать пользовательские иконки из Fontawesome?

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

У меня проблема с использованием пользовательских иконок из Fontawesome в моих ActionSheet кнопках в Ionic3.

Насколько я знаю, вы могли бы добавить, например, такой код: <i class="fas fa-ad"></i> в свойстве title/text кнопки вашей панели действий, и появился значок.

Но после Ionic 3 title/text Свойство ограничено только строкой, и это больше не работает.

Я также попробовал эти потрясающие значки как png, а затем использовал их в качестве собственного фона CSS, как в этом Вопрос Stackoverflow , но это также не работаетРабота.Изображения просто не отображаются.

Итак, я только что закончил тем, что использовал те ионные, которые представлены в виде значков ionic, например: 

import { Component } from '@angular/core';

import { Platform, ActionSheetController } from 'ionic-angular';


@Component({
  templateUrl: 'basic.html'
})
export class BasicPage {
  constructor(
    public platform: Platform,
    public actionsheetCtrl: ActionSheetController
  ) { }

  openMenu() {
    let actionSheet = this.actionsheetCtrl.create({
      title: 'Albums',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: !this.platform.is('ios') ? 'trash' : null,
          handler: () => {
            console.log('Delete clicked');
          }
        },
        {
          text: 'Share',
          icon: !this.platform.is('ios') ? 'share' : null,
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: 'Play',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }
        },
        {
          text: 'Favorite',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: 'Cancel',
          role: 'cancel', // will always sort to be on the bottom
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}

Ребята, вы знаете, как добавить потрясающие значки в кнопки ActionSheet?Кажется, я не могу найти никакой полезной помощи.

1 Ответ

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

Я бы предложил сделать аналогично тому, как вы можете изменить значок в ионных вкладках. Ionic Forum (ионные вкладки с пользовательскими svgs) Основная идея заключается в том, чтобы Ionic выполнял тяжелую работу по настройке html и применению тегов css.Затем вы просто размещаете свой svg там, где будут их иконки шрифтов (Ionic 3), но вы используете имена, которых нет в их наборе иконок.Это может быть сделано в вашем app.scss 

ion-action-sheet {
  ion-icon {
    width: 3rem;
    height: 3rem;
  }

  .ion-ios-trash-solid,
  .ion-md-trash-solid {
    content: url(../assets/icon/trash-solid.svg);
  }

  .ion-ios-share-alt-square-solid,
  .ion-md-share-alt-square-solid {
    content: url(../assets/icon/share-alt-square-solid.svg);
  }

  .ion-ios-play-solid,
  .ion-md-play-solid {
    content: url(../assets/icon/play-solid.svg);
  }

  .ion-ios-heart-regular,
  .ion-md-heart-regular {
    content: url(../assets/icon/heart-regular.svg);
  }

  .ion-ios-times-solid,
  .ion-md-times-solid {
    content: url(../assets/icon/times-solid.svg);
  }
}

Затем лист действий можно создать с помощью 

let actionSheet = this.actionsheetCtrl.create({
    title: 'Albums',
    cssClass: 'action-sheets-basic-page',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: 'trash-solid',
        handler: () => {
          console.log('Delete clicked');
        }
      },
      {
        text: 'Share',
        icon: 'share-alt-square-solid',
        handler: () => {
          console.log('Share clicked');
        }
      },
      {
        text: 'Play',
        icon: 'play-solid',
        handler: () => {
          console.log('Play clicked');
        }
      },
      {
        text: 'Favorite',
        icon: 'heart-regular',
        handler: () => {
          console.log('Favorite clicked');
        }
      },
      {
        text: 'Cancel',
        role: 'cancel',
        icon: 'times-solid',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
  actionSheet.present();

Также вам нужно будет добавить нужные svgs в src / assets / iconили другой каталог и измените пути в css, если вы выбрали другое местоположение.

...