Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@vcl/file-input

0.6.3 • Public • Published

VCL file-input

File input for selecting one or multiple files via tap and drag-and-drop gestures.

Features

A dragged-over sensitive input control that is typically used in drag-and-drop scenarios such as file upload inputs. At the same time it can be focused and and the main action triggered with the same gestures like applicable to a button.

Modifiers for the following available states: dragndrop, busy, error, warning, success, focused, disabled.

Usage

basic example

Sizing

The same properties as for the the input module apply. The difference is that the default height is higher to serve as a proper drop target.

Validation

The validation state of an file input can be visualized by the standard modifiers vclError, vclWarning and vclSuccess.

validation-state example

Focused State

focused-state example

Disabled State

disabled-state example

Drag-N-Drop State

dragndrop-state example

Classes

  • vclFileInput

Modifiers

  • vclFocused
  • vclDisabled
  • vclError
  • vclWarning
  • vclSuccess
  • vclDragndrop: When the input is hovered with a pointer dragging a file(s).
  • vclBusy: When an upload is in progress.

Variables

  • --file-input-color
  • --file-input-bg-color
  • --file-input-border-width
  • --file-input-border-color
  • --file-input-border-radius
  • --file-input-border-focus-color
  • --file-input-bg-focus-color
  • --file-input-disabled-color
  • --file-input-disabled-border-color
  • --file-input-disabled-bg-color
  • --file-input-dragndrop-color
  • --file-input-dragndrop-border-color
  • --file-input-dragndrop-bg-color

Demo

example.html on GH-pages.

Install

npm i @vcl/file-input

DownloadsWeekly Downloads

8

Version

0.6.3

License

MIT

Unpacked Size

11.7 kB

Total Files

12

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar