Violin.css

# Form Field Map

Ready

- HTML
- View
- Context
- Info
- Notes

`

    <!-- Default -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <i class="material-icons">map</i>

            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Selected -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png" alt="">

            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Search Empty -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <i class="material-icons">map</i>

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input " value="" placeholder="Adicionar localização" />
                <i class="material-icons inv-input-icon ">
            flag
          </i>
                <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Search Value -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png" alt="">

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input " value="Restaurante Paixão de Frutos do Mar" placeholder="Adicionar localização" />
                <i class="material-icons inv-input-icon ">
            flag
          </i>
                <button class="inv-clear-input">
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Search Disabled -->
    <div class="inv-form-field ">
        <label for="" class="inv-label inv-label--disabled">
          Input File Map
          <span>- desabilitado</span>
        </label>

        <div class="inv-input-map inv-input-map--disabled">
            <div class="inv-input-map__preview">

                <i class="material-icons">map</i>

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input " value="" placeholder="Adicionar localização" disabled />
                <i class="material-icons inv-input-icon inv-input-icon--disabled">
            flag
          </i>
                <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Search Value Disabled -->
    <div class="inv-form-field ">
        <label for="" class="inv-label inv-label--disabled">
          Input File Map
          <span>- desabilitado</span>
        </label>

        <div class="inv-input-map inv-input-map--disabled">
            <div class="inv-input-map__preview">

                <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png" alt="">

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input " value="Restaurante Paixão de Frutos do Mar" placeholder="Adicionar localização" disabled />
                <i class="material-icons inv-input-icon inv-input-icon--disabled">
            flag
          </i>
                <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text ">

        </div>
    </div>

    <!-- Search Empty Error -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <i class="material-icons">map</i>

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input inv-input--error" value="" placeholder="Adicionar localização" />
                <i class="material-icons inv-input-icon ">
            flag
          </i>
                <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text inv-form-text--error">
            Cara, não pode ser assim
        </div>
    </div>

    <!-- Search Value Error -->
    <div class="inv-form-field ">
        <label for="" class="inv-label ">
          Input File Map
          <span>- obrigatório</span>
        </label>

        <div class="inv-input-map ">
            <div class="inv-input-map__preview">

                <img src="https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png" alt="">

            </div>
            <div class="inv-input-map__search">
                <input id="" name="" type="text" class="inv-input inv-input--error" value="Restaurante Paixão de Frutos do Mar" placeholder="Adicionar localização" />
                <i class="material-icons inv-input-icon ">
            flag
          </i>
                <button class="inv-clear-input">
            <i class="material-icons">clear</i>
          </button>
            </div>
        </div>
        <div class="inv-form-text inv-form-text--error">
            Cara, não pode ser assim
        </div>
    </div>

`
`

    <div class="inv-form-field {{ formField.modifier }}">
      {{#if label.show}}
        {{> @label}}
      {{/if}}

      {{> @input-map}}

      {{> @form-text}}
    </div>

`
`

    /* Default */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": null,
        "disabled": null,
        "search": {
          "visible": null
        }
      },
      "input": {
        "placeholder": "Adicionar localização"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      }
    }

    /* Selected */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": true,
        "disabled": null,
        "search": {
          "visible": null
        }
      },
      "input": {
        "placeholder": "Adicionar localização"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      }
    }

    /* Search Empty */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": null,
        "disabled": null,
        "search": {
          "visible": true
        }
      },
      "input": {
        "placeholder": "Adicionar localização"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      }
    }

    /* Search Value */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": true,
        "disabled": null,
        "search": {
          "visible": true
        }
      },
      "input": {
        "placeholder": "Adicionar localização",
        "value": "Restaurante Paixão de Frutos do Mar"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": null
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      }
    }

    /* Search Disabled */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": null,
        "disabled": null,
        "search": {
          "visible": true
        },
        "modifier": "inv-input-map--disabled"
      },
      "input": {
        "placeholder": "Adicionar localização"
      },
      "input-icon": {
        "icon": "flag",
        "modifier": "inv-input-icon--disabled"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- desabilitado",
        "show": true,
        "modifier": "inv-label--disabled"
      },
      "disabled": true
    }

    /* Search Value Disabled */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": true,
        "disabled": null,
        "search": {
          "visible": true
        },
        "modifier": "inv-input-map--disabled"
      },
      "input": {
        "placeholder": "Adicionar localização",
        "value": "Restaurante Paixão de Frutos do Mar"
      },
      "input-icon": {
        "icon": "flag",
        "modifier": "inv-input-icon--disabled"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- desabilitado",
        "show": true,
        "modifier": "inv-label--disabled"
      },
      "disabled": true
    }

    /* Search Empty Error */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": null,
        "disabled": null,
        "search": {
          "visible": true
        }
      },
      "input": {
        "placeholder": "Adicionar localização",
        "modifier": "inv-input--error"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": true
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      },
      "form-text": {
        "value": "Cara, não pode ser assim",
        "modifier": "inv-form-text--error"
      }
    }

    /* Search Value Error */
    {
      "input-map": {
        "img": "https://raw.githubusercontent.com/involvestecnologia/violin.css/master/public/assets/images/map.png",
        "selected": true,
        "disabled": null,
        "search": {
          "visible": true
        }
      },
      "input": {
        "placeholder": "Adicionar localização",
        "modifier": "inv-input--error",
        "value": "Restaurante Paixão de Frutos do Mar"
      },
      "input-icon": {
        "icon": "flag"
      },
      "clear-input": {
        "disabled": null
      },
      "label": {
        "value": "Input File Map",
        "posfix": "- obrigatório",
        "show": true
      },
      "form-text": {
        "value": "Cara, não pode ser assim",
        "modifier": "inv-form-text--error"
      }
    }

`

- Handle: @form-field-map
- Variants (8): Default , Selected , Search Empty , Search Value , Search Disabled , Search Value Disabled , Search Empty Error , Search Value Error
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/form-field-map/form-field-map.hbs
- References (3): @label, @input-map, @form-text

There are no notes for this item.