4. Estilização Dinâmica¶

Agora que temos uma melhor estrutura, adicionaremos variáveis responsáveis pela estilização dos nossos elementos

$inputTemplate = new \Cajudev\UI\Template('input', [
   'fieldset' => [
      'attributes' => [
         'class' => 'form-group col-::col' // nova variável
      ],
      'children' => [
         'label' => [
            'attributes' => [
               'for'   => '::id',
               'class' => 'color-::color' // nova variável
            ],
            'text' => '::label'
         ],
         'input' => [
            'attributes' => [
               'id'    => '::id',
               'class' => 'form-control',
               'type'  => '::type'
            ],
         ],
         'small' => [
            'text' => '::small',
            'attributes' => [
               'class' => 'color-light-::color'  // nova variável
            ]
         ]
      ]
   ],
]);

Também colocaremos algumas informações básicas na criação do objeto

$easyForm = new \Cajudev\EasyForm([
   'id'     => 'form',
   'action' => '#',
   'class'  => 'd-flex flex-wrap',
]);

$easyForm->templates->add($inputTemplate);

Adicionamos também no css algumas classes

.color-blue {
   color: #0d4cac;
}
.color-light-blue {
   color: #00c3ff;
}
.color-purple {
   color: #770d69;
}
.color-light-purple {
   color: #c515a8;
}

Finalmente atribuímos valores às novas variáveis

$easyForm->create('input', [
   '::col'   => '12',
   '::id'    => 'username',
   '::label' => 'Nome de Usuário',
   '::type'  => 'text',
   '::small' => 'Informe um nome de usuário sem caracteres especiais',
   '::color' => 'blue'
]);

$easyForm->create('input', [
   '::col'   => '6',
   '::id'    => 'password',
   '::label' => 'Senha',
   '::type'  => 'password',
   '::small' => 'Informe uma senha de 8 caracteres, incluindo letras e números',
   '::color' => 'blue'
]);

$easyForm->create('input', [
   '::col'   => '6',
   '::id'    => 'password',
   '::label' => 'Repita a Senha',
   '::type'  => 'password',
   '::small' => 'Confirme a senha informada anteriormente',
   '::color' => 'blue'
]);

echo $template->render(['formulario' => $easyForm]);

Resultado:

Caso queira depois alterar o estilo, basta trocar a variável ::color e tudo será atualizado.

$easyForm->create('input', [
   '::col'   => '12',
   '::id'    => 'username',
   '::label' => 'Nome de Usuário',
   '::type'  => 'text',
   '::small' => 'Informe um nome de usuário sem caracteres especiais',
   '::color' => 'blue'
]);

$easyForm->create('input', [
   '::col'   => '6',
   '::id'    => 'password',
   '::label' => 'Senha',
   '::type'  => 'password',
   '::small' => 'Informe uma senha de 8 caracteres, incluindo letras e números',
   '::color' => 'purple' // alterado aqui
]);

$easyForm->create('input', [
   '::col'   => '6',
   '::id'    => 'password',
   '::label' => 'Repita a Senha',
   '::type'  => 'password',
   '::small' => 'Confirme a senha informada anteriormente',
   '::color' => 'purple'  // alterado aqui
]);

echo $template->render(['formulario' => $easyForm]);

Resultado