Violin.css

Form Field File 

<!-- Default -->
<div class="inv-form-field ">
    <label for="default" class="inv-label ">
        Input File label
        <small></small>
    </label>

    <div class="inv-input-file ">
        <label for="input-file" class="inv-input-file__text ">
            <span>Enviar arquivo</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>

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

    </div>
</div>


<!-- Active -->
<div class="inv-form-field ">
    <label for="" class="inv-label ">
        Input File label
        <small></small>
    </label>

    <div class="inv-input-file ">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--active">
            <span>Enviar arquivo</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>

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

    </div>
</div>


<!-- File Name -->
<div class="inv-form-field ">
    <label for="" class="inv-label ">
        Input File label
        <small></small>
    </label>

    <div class="inv-input-file inv-input-file--selected">
        <label for="input-file" class="inv-input-file__text ">
            <span>file.txt</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input">
            <i class="material-icons">clear</i>
        </button>
    </div>

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

    </div>
</div>


<!-- Long File Name -->
<div class="inv-form-field ">
    <label for="" class="inv-label ">
        Input File label
        <small></small>
    </label>

    <div class="inv-input-file inv-input-file--selected">
        <label for="input-file" class="inv-input-file__text ">
            <span>esse arquivo tem um nome grande demais.pdf</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input">
            <i class="material-icons">clear</i>
        </button>
    </div>

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

    </div>
</div>


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

    <div class="inv-input-file inv-input-file--disabled">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--disabled">
            <span>Enviar arquivo</span>
            <i class="material-icons inv-input-file-icon inv-input-file-icon--disabled">file_upload</i>
        </label>
        <input id="input-file" type="file" disabled />
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>

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

    </div>
</div>


<!-- Error -->
<div class="inv-form-field ">
    <label for="error" class="inv-label ">
        Input File label
        <small>- obrigatório</small>
    </label>

    <div class="inv-input-file inv-input-file--error">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--error">
            <span>Enviar arquivo</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input" disabled>
            <i class="material-icons">clear</i>
        </button>
    </div>

    <div class="inv-form-text inv-form-text--error">
        Nenhum arquivo selecionado
    </div>
</div>


<!-- Error Uploaded -->
<div class="inv-form-field ">
    <label for="error" class="inv-label ">
        Input File label
        <small>- obrigatório</small>
    </label>

    <div class="inv-input-file inv-input-file--selected inv-input-file--error">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--error">
            <span>file.txt</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input">
            <i class="material-icons">clear</i>
        </button>
    </div>

    <div class="inv-form-text inv-form-text--error">
        Mano, o arquivo selecionado é inválido
    </div>
</div>


<!-- Error Active -->
<div class="inv-form-field ">
    <label for="error" class="inv-label ">
        Input File label
        <small>- obrigatório</small>
    </label>

    <div class="inv-input-file inv-input-file--selected inv-input-file--error">
        <label for="input-file" class="inv-input-file__text inv-input-file__text--error inv-input-file__text--error-active">
            <span>file.txt</span>
            <i class="material-icons inv-input-file-icon ">file_upload</i>
        </label>
        <input id="input-file" type="file" />
        <button class="inv-clear-input">
            <i class="material-icons">clear</i>
        </button>
    </div>

    <div class="inv-form-text inv-form-text--error">
        Mano, o arquivo selecionado é inválido
    </div>
</div>


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

  {{> @input-file}}

  {{> @form-text}}
</div>
 
/* Default */
{
  "label": {
    "value": "Input File label",
    "show": true,
    "for": "default"
  },
  "input-file": {
    "placeholder": "Enviar arquivo"
  },
  "clear-input": {
    "disabled": true
  },
  "input": {
    "for": "default"
  }
}


/* Active */
{
  "label": {
    "value": "Input File label",
    "show": true
  },
  "input-file": {
    "placeholder": "Enviar arquivo",
    "text": {
      "modifier": "inv-input-file__text--active"
    }
  },
  "clear-input": {
    "disabled": true
  }
}


/* File Name */
{
  "label": {
    "value": "Input File label",
    "show": true
  },
  "input-file": {
    "placeholder": "file.txt",
    "modifier": "inv-input-file--selected"
  },
  "clear-input": {
    "disabled": false
  }
}


/* Long File Name */
{
  "label": {
    "value": "Input File label",
    "show": true
  },
  "input-file": {
    "placeholder": "esse arquivo tem um nome grande demais.pdf",
    "modifier": "inv-input-file--selected"
  },
  "clear-input": {
    "disabled": false
  }
}


/* Disabled */
{
  "label": {
    "value": "Input File label",
    "show": true,
    "posfix": "- desabilitado",
    "modifier": "inv-label--disabled"
  },
  "input-file": {
    "placeholder": "Enviar arquivo",
    "modifier": "inv-input-file--disabled",
    "text": {
      "modifier": "inv-input-file__text--disabled"
    },
    "icon": {
      "modifier": "inv-input-file-icon--disabled"
    },
    "input": {
      "disabled": true
    }
  },
  "clear-input": {
    "disabled": true
  }
}


/* Error */
{
  "label": {
    "value": "Input File label",
    "show": true,
    "posfix": "- obrigatório",
    "for": "error"
  },
  "input-file": {
    "placeholder": "Enviar arquivo",
    "modifier": "inv-input-file--error",
    "text": {
      "modifier": "inv-input-file__text--error"
    }
  },
  "clear-input": {
    "disabled": true
  },
  "form-text": {
    "value": "Nenhum arquivo selecionado",
    "modifier": "inv-form-text--error"
  }
}


/* Error Uploaded */
{
  "label": {
    "value": "Input File label",
    "show": true,
    "posfix": "- obrigatório",
    "for": "error"
  },
  "input-file": {
    "placeholder": "file.txt",
    "modifier": "inv-input-file--selected inv-input-file--error",
    "text": {
      "modifier": "inv-input-file__text--error"
    }
  },
  "clear-input": {
    "disabled": false
  },
  "form-text": {
    "value": "Mano, o arquivo selecionado é inválido",
    "modifier": "inv-form-text--error"
  }
}


/* Error Active */
{
  "label": {
    "value": "Input File label",
    "show": true,
    "posfix": "- obrigatório",
    "for": "error"
  },
  "input-file": {
    "placeholder": "file.txt",
    "modifier": "inv-input-file--selected inv-input-file--error",
    "text": {
      "modifier": "inv-input-file__text--error inv-input-file__text--error-active"
    }
  },
  "clear-input": {
    "disabled": false
  },
  "form-text": {
    "value": "Mano, o arquivo selecionado é inválido",
    "modifier": "inv-form-text--error"
  }
}

There are no notes for this item.