Fields

A x-larastrap::field usually wraps an input within a x-larastrap::form , and is responsible for the layout of the input itself and his label. Each input field provides to init his own wrapping x-larastrap::field (until the squeeze parameter is not set to true ), and there is no need to manually place it, but it is possible to create your own fields to wrap custom elements.

All of the following parameters can be passed to an Input element, to be applied to his implicit wrapping Field.

label

The base parameter for a field is his label , used as a description for the child content (which usually is an input box, but can be anything else). 

<x-larastrap::field label="Name">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-665c24d5c9c9cff7f3b69b29ec986ec8" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label_class

The label can be customized assigning one or more CSS classes, using the label_class parameter. 

<x-larastrap::field label="Name" label_class="text-danger">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-f458b38c28c90442c6a1b626e9546644" class="text-danger col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label_html

If you want to use a completely custom HTML label, you have to use the label_html parameter instead of label . Entities in plain label are escaped; when using label_html , those are not. 

<x-larastrap::field label_html="<strong>Name</strong>">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-f0c996d7f2edae217fd1c9261cd23732" class="col-4 col-form-label"><strong>Name</strong></label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

label_width / input_width

With the label_width and input_width parameters it is possible to define the width of each column, within the twelve columns system of Bootstrap. You can specify both an absolute value, or an array of breakpoints to obtain a responsive layout.



Here, the width of label's and input's columns vary accordingly to the responsive breakpoint. 

<x-larastrap::field label="Name" label_width="6" input_width="6">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<br>

<x-larastrap::field label="Name" label_width="2" input_width="10">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<br>

<x-larastrap::field label="Name" :label_width="['md' => 4, 'lg' => 3]" :input_width="['md' => 8, 'lg' => 9]">
    <img src="https://picsum.photos/100">

    <p>
        Here, the width of label's and input's columns vary accordingly to the responsive breakpoint.
    </p>
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-7b6f6a25b6452d89c08458a0c1bdbf9e" class="col-6 col-form-label">Name</label>
  <div class="col-6">
    <img src="https://picsum.photos/100">
  </div>
</div><br>
<div class="row mb-3">
  <label for="field-033e3de41a29037acfe69c469f11f7db" class="col-2 col-form-label">Name</label>
  <div class="col-10">
    <img src="https://picsum.photos/100">
  </div>
</div><br>
<div class="row mb-3">
  <label for="field-10344e2e1e46dc40a2f00eb5df8bd51f" class="col-md-4 col-lg-3 col-form-label">Name</label>
  <div class="col-md-8 col-lg-9">
    <img src="https://picsum.photos/100">
    <p>
      Here, the width of label's and input's columns vary accordingly to the responsive breakpoint.
    </p>
  </div>
</div>

Those parameter are inherited from the parent Container, to avoid to specify for each field. Even better: it is recommended to define those value in the Larastrap's global configuration, once and for all the application, and override them only when required for specific and occasional edge cases. 

<x-larastrap::form label_width="6" input_width="6">
    <x-larastrap::text name="name" label="Name" />
    <x-larastrap::email name="email" label="EMail" />
</x-larastrap::form>

<form id="form-9a1158154dfa42caddbd0694a4e9bdc8" class="" method="post" name="form-9a1158154dfa42caddbd0694a4e9bdc8">
  <input type="hidden" name="_token" value="oEzpcG91wihP3v5WPqvVzatUienvR45kkA3kRmwU">
  <div class="row mb-3">
    <label for="input-7ca59a2aa579c5a85327da78a35c667f" class="col-6 col-form-label">Name</label>
    <div class="col-6">
      <input id="input-7ca59a2aa579c5a85327da78a35c667f" type="text" class="form-control" name="name" value="">
    </div>
  </div>
  <div class="row mb-3">
    <label for="input-302aa49ddf8e35ff9291d91b3f692215" class="col-6 col-form-label">EMail</label>
    <div class="col-6">
      <input id="input-302aa49ddf8e35ff9291d91b3f692215" type="email" class="form-control" name="email" value="">
    </div>
  </div>
  <div class="col-12 text-end">
    <button id="button-7e2cbc2b7c75067084c5545c1ea974be" class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

help

The help parameter implements a classic Bootstrap's pattern: displays a muted text below the actual content, to be used as an explicit hint for the user.

This help line is always displayed 
<x-larastrap::field label="Name" help="This help line is always displayed">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-65b5bb1573a8dfa8c416d667e26dd575" class="col-4 col-form-label">Name</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <div class="form-text">
      This help line is always displayed
    </div>
  </div>
</div>

pophelp

The pophelp parameter is an alternative to help , and provides a popover to be used for more detailed (or less invasive) descriptions of the purpose of each field.

Remember you have to init the Javascript function to handle Bootstrap's popovers! 

<x-larastrap::field label="Name" pophelp="This is a hoverable help box">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-6c95b41b6ef5a22e107a98d726a179c3" class="col-4 col-form-label">Name <span class="badge rounded-pill bg-primary" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="This is a hoverable help box">?</span></label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>

squeeze

It is possible to cut the wrapping field using the squeeze parameter.

This is rendered without a wrapping field. 

<x-larastrap::field squeeze>
    <p>
        This is rendered without a wrapping field.
    </p>
</x-larastrap::field>

<p>
  This is rendered without a wrapping field.
</p>

This is mostly intended for usage within an actual input, and setup it to omit the field when a label is not required (e.g. within a table). 

<table class="table">
    <tbody>
        @foreach(App\Models\User::take(3)->get() as $user)
            <x-larastrap::enclose :obj="$user">
                <tr>
                    <td>
                        <x-larastrap::text name="name" squeeze />
                    </td>
                    <td>
                        <x-larastrap::text name="email" squeeze />
                    </td>
                </tr>
            </x-larastrap::enclose>
        @endforeach
    </tbody>
</table>

<table class="table">
  <tbody>
    <tr>
      <td>
        <input id="input-e5853392127cb5bf89be6f21c0dfa0f6" type="text" class="form-control" name="name" value="Prof. Ethan Schmitt III">
      </td>
      <td>
        <input id="input-42b4e5867e945d9d2561276a288d27f4" type="text" class="form-control" name="email" value="ashly77@example.org">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-490c3a832c8618b9f07ee48f57e36d2f" type="text" class="form-control" name="name" value="Mr. Randall Hyatt">
      </td>
      <td>
        <input id="input-7bdb9a62973ca4565bcce362ccdb14ff" type="text" class="form-control" name="email" value="cwalsh@example.com">
      </td>
    </tr>
    <tr>
      <td>
        <input id="input-0cea4054e22cf461a284f6760a740cf4" type="text" class="form-control" name="name" value="Dr. Darrin Hamill">
      </td>
      <td>
        <input id="input-9a34ca0ce56ad57a231e44b579913247" type="text" class="form-control" name="email" value="lincoln.davis@example.net">
      </td>
    </tr>
  </tbody>
</table>

do_label

The do_label parameter can be valorized to show (the default: the label is formatted accondingly the the parent's formview ), hide (the label is entirely omitted from the final output) or empty (the label is appended to the HTML, but contains an empty string despite any other configuration).

The behavior of do_label is a bit different compared to squeeze , as the first still renders a wrapping HTML node for the child.

Hidden label: in a horizontal form, the content is shifted to the left due the missing node

Empty label: in a horizontal form, the space allocation for the label is still preserved

<x-larastrap::field label="Normal Label" do_label="show">
    <img src="https://picsum.photos/100">
</x-larastrap::field>

<x-larastrap::field label="Name" do_label="hide">
    <img src="https://picsum.photos/100">
    <p>Hidden label: in a horizontal form, the content is shifted to the left due the missing node</p>
</x-larastrap::field>

<x-larastrap::field label="Name" do_label="empty">
    <img src="https://picsum.photos/100">
    <p>Empty label: in a horizontal form, the space allocation for the label is still preserved</p>
</x-larastrap::field>

<div class="row mb-3">
  <label for="field-5907ac742eda291b79e62a6ca1ca560f" class="col-4 col-form-label">Normal Label</label>
  <div class="col-8">
    <img src="https://picsum.photos/100">
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <p>
      Hidden label: in a horizontal form, the content is shifted to the left due the missing node
    </p>
  </div>
</div>
<div class="row mb-3">
  <div class="col-8">
    <img src="https://picsum.photos/100">
    <p>
      Empty label: in a horizontal form, the space allocation for the label is still preserved
    </p>
  </div>
</div>

Larastrap

info@madbob.org

gitlab.com/madbob/larastrap

powered by MAD

PayPal Donation