Comment rendre responsive les Smart Fields d’un cadre

Prérequis

Afin de pouvoir suivre ce guide, il faut préalablement savoir Comment modifier l’aspect d’un Smart Field à l’aide d’une option de représentation.

Comment rendre responsive les Smart Fields d’un cadre?

On utilise l’option setResponsiveColumns pour rendre responsive les Smart Fields d’un cadre.

Recommandations

Si vous n’êtes pas familier avec le concept dOption de présentation, en particulier de l’option setResponsiveColumns, il est recommandé de lire la documentation associée disponible ici

<?php
namespace Cogip\Restauratec\SmartStructures\Plat\Render;

use Anakeen\Ui\CommonRenderOptions;
use Anakeen\Ui\EnumRenderOptions;
use Anakeen\Ui\FrameRenderOptions;
use Anakeen\Ui\RenderOptions;
use SmartStructure\Fields\Plat as PlatFields;

class PlatEditRender extends \Anakeen\Ui\DefaultConfigEditRender
{
    public function getOptions(\Anakeen\Core\Internal\SmartElement $document): RenderOptions
    {
        $options = parent::getOptions($document);
        $options->enum(PlatFields::plat_type)->setDisplay(EnumRenderOptions::verticalDisplay);
        $options->commonOption()->setLabelPosition(CommonRenderOptions::upPosition);
        $options->frame(PlatFields::consommable_frame) ->setResponsiveColumns(
            array(
                [
                    "number" => 2,
                    "minWidth" => "60rem",
                    "maxWidth" => "100rem",
                    "direction" => FrameRenderOptions::topBottomDirection
                ],
                [
                    "number" => 3,
                    "minWidth" => "100rem",
                    "maxWidth" => "140rem",
                    "direction" => FrameRenderOptions::topBottomDirection],
                [
                    "number" => 4,
                    "minWidth" => "140rem",
                    "maxWidth" => "160rem",
                    "direction" => FrameRenderOptions::topBottomDirection],
                [
                    "number" => 5,
                    "minWidth" => "160rem",
                    "direction" => FrameRenderOptions::topBottomDirection],
            )
        );
        return $options;
    }
}

Le nombre des colonnes affichées est défini par le largeur du cadre. Dans l’exemple,les smart fields sont divisé par:

1 colonne si le largeur < 60rem
2 colonnes si le largeur est entre 60rem et 100rem

Deux colonnes

3 colonnes si le largeur est entre 100rem et 140rem

Trois colonnes

4 colonnes si le largeur est entre 140rem et 160rem

Quatre colonnes

5 colonnes si le largeur est supérieur ou égal à 160rem

Vous pouvez maintenant déployer vos modifications :

npx @anakeen/anakeen-cli deploy -c http://localhost:8080/control -s . -u admin -p anakeen --reinstall

Et voir le résultat sur un PLAT en création ou modification :

http://localhost:8080/api/v2/smart-elements/PLAT/views/!defaultCreation.html

Et ensuite ?

Comment ajouter une description sur un Smart Field du formulaire

# Comment rendre responsive les Smart Fields d’un cadre

# Prérequis