data-fields
Render fields for various types of input.
Installation
npm install data-fields --save
API
fields.string(h, options[, value])
Create a field to display text. If editable
is set to true the text will be placed inside a textarea
element.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.size
-String
- Set the size of the field. Defaults tonormal
, other possible choices aresmall
andlarge
.options.value
-String
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-String
- Value of the field. Takes precedence overoptions.value
Example
var fields = var h = var stringField = fields
fields.number(h, options[, value])
Create a field to display a number. If editable
is set to true the value will be placed inside an input
element with type
set to number
.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.value
-Number
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-Number
- Value of the field. Takes precedence overoptions.value
Example
var fields = var h = var numberField = fields
fields.url(h, options[, value])
Create a field to display a url. If editable
is set to true the url will be placed inside an input
element. If editable
is set to false the url will be displayed as an a
element.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.value
-String
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-String
- Value of the field. Takes precedence overoptions.value
Example
var fields = var h = var urlField = fields
fields.list(h, options[, value])
Create a field to display a list, either from an array or an object. If editable
is set to true list-editor will be used to display the list.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.value
-Array|Object
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-Array|Object
- Value of the field. Takes precedence overoptions.value
.
Example
var fields = var h = var listField = fields
fields.image(h, options[, value])
Create a field to display an image. If editable
is set to true the image's path will be placed inside an input
field. If editable
is set to false the image itself will be displayed.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.value
-String
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-String
- Value of the field. Takes precedence overoptions.value
Example
var fields = var h = var imageField = fields
fields.geoJSON(h, options[, value])
Create a field to display geoJSON data on a leaflet map. If editable
is set to true the map will include drawing controls.
Arguments
h
- Ahyperscript
style DOM builderoptions
- Options object.options.accessToken
-String
- Mapbox access token if you'd like to use Mapbox.options.tileLayer
-String
- Leaflet tile layer to use.options.imagePath
-String
- Path to leaflet images.options.editable
-Boolean
- Set whether the value is editable or not. Defaults to true.options.value
-Object
- The value of the field.options.*
- Extra properties will be passed to the DOM builder when creating the field.
value
-Object
- Value of the field. Takes precedence overoptions.value
Example
var fields = var h = var geoJSON = type: 'Feature' geometry: type: 'Point' coordinates: -12233636 47621958 var geoField = fields
Tests
npm installnpm test