8. Quebras de Linha¶

8.1 Método BreakLine¶

Esse método permite quebrar uma linha em um layout flex.

Acompanhe o exemplo:

$inputTemplate = new \Cajudev\UI\Template('input', [
   'fieldset' => [
      'attributes' => [
         'class' => 'form-group col-::col'
      ],
      'children' => [
         'label' => [
            'text' => '::label'
         ],
         'input' => [
            'attributes' => [
            'class' => 'form-control',
            'type'  => '::type'
            ],
         ],
      ]
   ]
]);

$easyForm = new \Cajudev\EasyForm([
   'class' => 'd-flex flex-wrap'
]);

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

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

Se adicionarmos mais um input aqui, ele consequentemente ficará na segunda fileira. Mas caso você queira colocá-lo na linha de baixo, basta fazer uma chamada ao método breakLine e continuar criando os elementos.

// código anterior omitido

$easyForm->breakLine();

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

Resultado:

Você também pode passar por parâmetro o valor do espaçamento desejado:

// código anterior omitido

$easyForm->breakLine();

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->breakLine(60);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

Resultado:

8.2 Método DrawLine¶

O método drawLine também permite inserir uma quebra de linha, porém adicionando também uma borda.

Usaremos o mesmo exemplo anterior:

// código anterior omitido

$easyForm->drawLine();

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

Resultado:

As opções que podem ser passadas por parâmetro são: Espaçamento, Largura da Linha, Cor e Posição. Sendo que a posição pode ser left ou right. Caso não seja informada ficará ao centro.

$line = [30, 70, '#fe9999', 'left'];

$easyForm->drawLine(...$line);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

$easyForm->drawLine(...$line);

$easyForm->create('input', [
   '::col'   => '4',
   '::type'  => 'text',
   '::label' => 'Alguma coisa'
]);

Resultado: