web-dev-qa-db-fra.com

Comment puis-je ajouter un support pour les styles BTN-GROUP et BTN-GROUP-YESNO que l'on trouve dans Protostar?

Pendant que nous développons notre composant avec Protostar, nous avons constaté que le btn-group et btn-group-yesno Les classes ne sont pas "natives" en ce qu'elles ne sont pas nécessairement prises en charge par d'autres modèles tels que Rockettheme/Gantry.

Les classes sont trouvées dans Bootstrap, mais le modèle RT) semble les remplacer en quelque sorte, ce qui rend un code HTML inutile dans lequel le groupe de boutons doit apparaître.

Existe-t-il un moyen d'inclure le Bootstrap css/logic dans le composant (sans forçant tout remplacement de modèle)), malgré ce que les modèles pourraient être en train de faire? d tiens à vous assurer que ces classes sont disponibles et fonctionnent sans instructions spéciales pour un modèle particulier.

templatescssbootstrap
5
GDP

Le btn-group-yesno La classe de ce que je suis semble avoir simplement des différences de style très mineures.

Si vous recherchez la même logique (à gauche verte et rouge à droite), mais pas les dimensions comme le btn-group-yesno groupe de boutons, vous pouvez alors utiliser des entiers pour vos valeurs d’options.

Par exemple:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="1">JYES</option>
    <option value="0">JNO</option>
</field>

Ceci produira cependant la même chose, mais utilisera uniquement l'état vert actif:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="yes">JYES</option>
    <option value="no">JNO</option>
</field>

J'aurais peut-être complètement mal compris votre question, mais sinon, j'espère que cela aidera

3
Lodder

Pas sûr que ce soit la meilleure pratique, mais voici le simple changement que j'ai apporté pour avoir btn-group/btn-groupyesno pris en charge dans un modèle Rockettheme , même s'il n'a apparemment aucun effet sur le modèle Beez:

De protostar\js\template.js, J'ai copié/collé le code ci-dessous dans le javascript chargé pour tous mes formulaires. Aucune modification CSS n’a apparemment été nécessaire, probablement parce que ce code a engagé les styles du fichier bootstrap.css installé avec joomla.

(function($) {
    $(document).ready(function() {
        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $(".btn-group label:not(.active)").click(function()
            {
                var label = $(this);
                var input = $('#' + label.attr('for'));

                if (!input.prop('checked')) {
                    label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
                    if (input.val() == '') {
                        label.addClass('active btn-primary');
                    } else if (input.val() == 0) {
                        label.addClass('active btn-danger');
                    } else {
                        label.addClass('active btn-success');
                    }
                    input.prop('checked', true);
                }
        });
        $(".btn-group input[checked=checked]").each(function()
            {
                if ($(this).val() == '') {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
                } else if ($(this).val() == 0) {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
                } else {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
                }
        });
    })
})(jQuery);
3
GDP