Segmented Buttons

[cukabeka]

Hi, ich wünsche mir als Alternative zu den Selectboxen oder den Radio/Checkboxen die Möglichkeit für Segmented Buttons, am besten inklusive icons. So ließen sich platzsparend und ohne tausende Klicks in den Selectboxen komplexe Interfaces stark vereinfachen und übersichtlicher machen.

Ich meine sowas (hier nur mit icon-platzhaltern):

Ich dachte an so eine Verwendung:

$mform = new MForm();
$mform->addSegmentedButtonsField(1, 
    [
        'grid' => ['icon' => 'bi bi-grid', 'label' => 'Grid Layout'],
        'align' => ['icon' => 'bi bi-text-center', 'label' => 'Zentriert'],
        'spacing' => ['icon' => 'bi bi-arrows-expand', 'label' => 'Mit Spacing']
    ], 
    ['label' => 'Layout'],
    'horizontal'
);
echo $mform->show();

Und hier ein snippet, das vielleicht schon in die Richtung geht (funktioniert aber noch nicht, verstehe die Einbindung in MFORM nicht):

public function addSegmentedButtonsField(float|int|string $id, array $options = null, array $attributes = null, string $layout = 'horizontal', string $defaultValue = null): MForm
{
    $newOptions = [];

    foreach ($options as $key => $option) {
        if (is_array($option) && isset($option['label']) && isset($option['icon'])) {
            $newOptions[$key] = "<i class=\"{$option['icon']}\"></i><span> {$option['label']}</span>";
        }
    }

    // Layout-Option setzen (horizontal oder vertikal)
    $groupClass = ($layout === 'vertical') ? 'mform-inline-vertical' : 'mform-inline-horizontal';
    $attributes['form-group-class'] = 'mform-inline-segmented-buttons ' . $groupClass;

    $this->addOptionField('radio', $id, $attributes, $newOptions, $defaultValue);
    return $this;
}

[cukabeka]

Ich habe inzwischen die Radio Icons ausprobieren können, die gehen auch schon in eine ähnliche Richtung. Allerdings ist deren Style noch etwas seltsam, springt und passt nicht zum Rest. Darum (und weil es auch etwas Anderes ist, z.B. multiselect, horizontal + vertikales layout) finde ich die Segmented Buttons weiterhin eine interessante Auswahlmethode.