web-dev-qa-db-fra.com

Comment personnaliser la taille de la police dans Ionic Framework

J'utilise un framework ionique (avec Cordova) pour développer des applications mobiles ..___ Ce que je veux faire, c'est augmenter la taille de la police (en général, dans mon application).

Je l'ai vu dans la documentation officielle: http://ionicframework.com/tutorials/customizing-ionic-with-sass/ . Mais je ne comprends pas comment personnaliser une fois que sass fonctionne.

Je travaille dans une application à base d'onglets comme celle-ci: http://forum.ionicframework.com/uploads/default/269/9934610f0a08b8d2.png J'ai essayé d'ajouter manuellement une classe sur l'onglet mais le résultat n'est pas très propre ... le texte est recadré ...

Existe-t-il un moyen officiel de changer la taille de la police?

cssfont-sizeionic-framework
13
psv

Je pense que vous n'avez pas besoin de tout comprendre en dessous de Sass . Dans votre répertoire de projet,

.../yourProject/www/lib/ionic/scss

Il existe un fichier nommé _variables.scss où vous verrez quelque chose comme ceci: enter image description hereenter image description here Ce sont des variables de taille de police, il vous suffit de les modifier, puis de construire le fichier css ionique . Je vous suggère d'utiliser https://prepros.io/ . J'espère que cela vous a aidé.

21
luharanu

Je pensais partager ce que j'ai appris dans Ionic.

Fondamentalement, Ionic a un ensemble par défaut de tailles, couleurs et polices pour chaque élément que vous pouvez concevoir. Cet ensemble est stocké dans le fichier _variables.scss. Ce fichier se trouve dans lib/ionic/scss/_variables.scss

Ouvrez ce fichier et recherchez ce que vous voulez modifier. Par exemple, je devais augmenter la taille de la police de l'en-tête. J'ai donc cherché dans le fichier _variables.scss et trouvé $ bar-title-font-size.

Il a été défini comme $bar-title-font-size: 17px !default;

Ouvrez maintenant votre fichier ionic.app.scss et écrivez quelque chose comme:

$bar-title-font-size: 25px !default;

*** N'oubliez pas d'écrire l'instruction ci-dessus avant l'instruction @import "ionic/scss/ionic";.

Enregistrez le fichier et vos modifications prendront effet instantanément. Ionic a rendu cela aussi simple !!! :)

6
mutp

Recherchez votre projet/www/css et éditez style.css, puis écrivez dans le fichier:

{font-size:55px !important;}

changer 55px à la taille dont vous avez besoin.

5
user5195107

Pour que la taille de police soit sensible en fonction du périphérique pour ionic2, .__

// breakpoint mixin
@mixin breakpoint($mq01: 0, $mq2: false, $maxmin: max-width) {
  @if $mq2 == false {
      @media ($maxmin: $mq01) {
          @content;
      }
  }
  @else {
      @media (min-width: $mq01) and (max-width: $mq2) {
          @content;
      }
  }
}

// breakpoint variables
$lg: 1170px;
$md: 1024px;
$sm: 640px;
$xs: 480px;

// responsive font size mixin
@mixin font-size-map($font-size-map) {
    @each $breakpoint, $font-size in $font-size-map {
        @if $breakpoint == null {
            font-size: $font-size;
        } @else {
            @include breakpoint($breakpoint) {
                font-size: $font-size;
            }
        }
    }
}

// font sizes

$html-font-size: (null: 16px, $md: 15px, $sm: 14px, $xs: 13px);
$paragraph-font-size: (null: 18px, $lg: 17px, $md: 16px, $sm: 15px, $xs: 14px);

inclure une variable dans le fichier scss local en ajoutant: @include font-size-map ($ html-font-size);

// html

html {
    @include font-size-map($html-font-size);
}

p {
    @include font-size-map($paragraph-font-size);
}
1
pavanidasari

Souvent, vous voulez décider quand utiliser la taille de l'icône, alors j'ai proposé la solution suivante. 

CSS

/* Ionicon icons resizing css */
.ion-1x { font-size: 24px !important;}
.ion-2x { font-size: 48px !important;}

HTML 

// in iconics framework
<ion-icon name="logo-pinterest" class="ion-1x"></ion-icon>
<ion-icon name="logo-Twitter" class="ion-2x"></ion-icon>

// without ionics framework
<i class="ion-1x ion-social-pinterest"></i>
<i class="ion-2x ion-social-Twitter"></i>
1
Hexodus