it-swarm.com.de

Wie kann ich die in Protostar enthaltenen Stile BTN-GROUP und BTN-GROUP-YESNO unterstützen?

Während wir unsere Komponente mit Protostar entwickeln, haben wir festgestellt, dass die btn-group und btn-group-yesno Klassen sind per se nicht "native", da sie in anderen Vorlagen wie Rockettheme/Gantry nicht unbedingt unterstützt werden.

Die Klassen werden in Bootstrap gefunden, aber die Vorlage RT=) scheint sie irgendwie zu überschreiben und nutzloses HTML zu rendern, wo die Schaltflächengruppe erwartet wird.

Gibt es eine Möglichkeit, die Bootstrap css/logic in die Komponente einzubeziehen (ohne Erzwingen von Vorlagenüberschreibungen), trotz der möglichen Aktionen der Vorlagen? Ich möchte sicherstellen, dass diese Klassen verfügbar sind und ohne spezielle Anweisungen für eine bestimmte Vorlage funktionieren.

5
GDP

Das btn-group-yesno Klasse von dem, was ich scheine, hat einfach sehr kleine Unterschiede im Styling.

Wenn Sie nach der gleichen Logik suchen (links grün und rot rechts), aber nicht nach Dimensionen wie das btn-group-yesno button group, dann können Sie für Ihre Optionswerte ganze Zahlen verwenden.

Beispielsweise:

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

Dies gibt jedoch dasselbe aus, verwendet jedoch nur den grünen aktiven Zustand:

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

Ich hätte Ihre Frage vielleicht völlig falsch verstanden, aber wenn nicht, dann hoffe ich, dass das oben Genannte hilft

3
Lodder

Ich bin mir nicht sicher, ob dies die Best-Practice-Antwort ist, aber hier ist die einfache Änderung, die ich vorgenommen habe, um btn-group/btn-groupyesno wird in einer Rockettheme -Vorlage unterstützt, hat jedoch anscheinend keine Auswirkung auf die Beez-Vorlage:

Von protostar\js\template.js, Ich habe den folgenden Code in das Javascript kopiert/eingefügt, das für alle meine Formulare geladen wird. Anscheinend war keine CSS-Änderung erforderlich, vermutlich weil dieser Code die Stile aus der bootstrap.css verwendete, die mit joomla installiert wurde

(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