web-dev-qa-db-fra.com

Bootstrap 4 Réduire l'état d'affichage avec l'icône Font Awesome

J'ai un seul Bootstrap 4 repli comme suit ...

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
<div class="row collapse in" id="collapseNEWS">Content</div>

Cela affiche automatiquement le contenu, sauf si vous cliquez sur l'icône géniale de la police. J'affiche l'icône fa-chevron-circle-up lors du chargement initial.

Une fois que l'icône est cliquée, le contenu se ferme et je voudrais plutôt montrer l'icône fa-chevron-circle-down. Comment pourrais-je y parvenir?

J'ai regardé la documentation alpha: http://v4-alpha.getbootstrap.com/components/collapse/

... mais je ne sais pas comment j'établis l'État pour montrer non plus ...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i>

ou...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i>

Merci NJ

bootstrap-4icons
18
NathonJones

Vous pouvez ajouter l'icône de police génial avec CSS personnalisé (propriété de contenu):

Utilisez simplement <i class="fa"></i> et

[data-toggle="collapse"] .fa:before {   
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}

Exemple dans codepen

43
tmg

Pour étendre cela plus loin, utilisez maintenant Bootstrap 4 Beta si cela fait une différence:

Cela ne fonctionnera pas lorsque l'état initial est réduit - l'icône sera inversée. Cliquer sur le bouton à travers un cycle le réparera - mais ce serait bien de commencer correctement. Le secret: ajouter

class="collapsed"

au (x) lien (s) de basculement. Un exemple avec un en-tête de texte cliquable ainsi que l'icône:

<div class="card-header d-flex justify-content-between" id="headingCollapse1">
    <div>
        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
            Card Header
        </a>
    </div>
    <div>
        <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button">
            <i class="fa" aria-hidden="true"></i>
            <span class="sr-only">Expand/Collapse Card 1</span>
        </a>
    </div>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1">
    <div class="card-body">
        Here is some wonderful content that you can't see...until expanded!
    </div>
</div>

Je trouve également les symboles plus/moins plus intuitifs - avec des flèches, je ne sais jamais très bien si cela signifie "l'état actuel est ouvert/fermé" ou "appuyez dessus pour ouvrir/fermer". Sur la base des vues arborescentes, entre autres, je suis habitué à "+" signifie "fermé/cliquez pour ouvrir", et "-" signifie "ouvert/cliquez pour fermer". Donc, bien que cela ne fasse pas directement partie de la question, je laisserai cela aux autres (crédit complet à @tmg ci-dessus pour le format - je viens de brancher les caractères "corrects"):

[data-toggle="collapse"] i:before{
    content: "\f146";
}

[data-toggle="collapse"].collapsed i:before{
    content: "\f0fe";
}
20
Daniel Miller

Vous pouvez ajouter toggleClass() à onclick événement de <a></a> élément et classe supplémentaire fa-rotate-180 pour l'élément de Font Awesome icon.

fa-rotate-180 - classe standard de Font Awesome.

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')">
   <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i>
   Link Text
</a>
6
ak-j

Utilisation de Rails et Bootstrap 4 avec Fontawesome 5.5

Cela ne fonctionnait pas tout à fait pour moi, il le retournait à la fermeture. J'ai dû ajouter un autre contrôle d'état:

[data-toggle="collapse"] .fas:before {  
  content: "\f055";
}

[aria-expanded="true"] .fas:before {  
  content: "\f056";
}

[data-toggle="collapse"].collapsed .fas:before {
  content: "\f055";
}
2
mudl

Pour la version SASS de FontAwesome 5, utilisez le mixage fa-content()

HTML:

<i class="fas"></i>

TOUPET:

[data-toggle="collapse"] i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-down);
}

[data-toggle="collapse"].collapsed i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-right);
}

je préfère utiliser le chevron dans un fond de cercle

2
Bert Oost

Voici une solution sans utiliser unicode FontAwesome.

Incluez les deux icônes là où vous en avez actuellement une:

HTML:

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
</a>

CSS:

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}
0
Josh Withee