Form Field Map

Ready

HTML
View
Context
Info
Notes


        
        
            <!-- Default -->
<div class="inv-form-field ">
    <label for="" class="inv-label ">
        Input File Map
        <small>- obrigatório</small>
    </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
        <small>- obrigatório</small>
    </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
        <small>- obrigatório</small>
    </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
        <small>- obrigatório</small>
    </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
        <small>- desabilitado</small>
    </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
        <small>- desabilitado</small>
    </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
        <small>- obrigatório</small>
    </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
        <small>- obrigatório</small>
    </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": false,
    "disabled": false,
    "search": {
      "visible": false
    }
  },
  "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": false,
    "search": {
      "visible": false
    }
  },
  "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": false,
    "disabled": false,
    "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": false,
    "search": {
      "visible": true
    }
  },
  "input": {
    "placeholder": "Adicionar localização",
    "value": "Restaurante Paixão de Frutos do Mar"
  },
  "input-icon": {
    "icon": "flag"
  },
  "clear-input": {
    "disabled": false
  },
  "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": false,
    "disabled": false,
    "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": false,
    "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": false,
    "disabled": false,
    "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": false,
    "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": false
  },
  "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.