text-input

WebJar for text-input

License

License

MIT
GroupId

GroupId

org.webjars.bowergithub.fooloomanzoo
ArtifactId

ArtifactId

text-input
Last Version

Last Version

2.0.9
Release Date

Release Date

Type

Type

jar
Description

Description

text-input
WebJar for text-input
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/fooloomanzoo/text-input

Download text-input

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/text-input/ -->
<dependency>
    <groupId>org.webjars.bowergithub.fooloomanzoo</groupId>
    <artifactId>text-input</artifactId>
    <version>2.0.9</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/text-input/
implementation 'org.webjars.bowergithub.fooloomanzoo:text-input:2.0.9'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.fooloomanzoo/text-input/
implementation ("org.webjars.bowergithub.fooloomanzoo:text-input:2.0.9")
'org.webjars.bowergithub.fooloomanzoo:text-input:jar:2.0.9'
<dependency org="org.webjars.bowergithub.fooloomanzoo" name="text-input" rev="2.0.9">
  <artifact name="text-input" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.fooloomanzoo', module='text-input', version='2.0.9')
)
libraryDependencies += "org.webjars.bowergithub.fooloomanzoo" % "text-input" % "2.0.9"
[org.webjars.bowergithub.fooloomanzoo/text-input "2.0.9"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.bowergithub.polymer : polymer jar [2,3)
org.webjars.bowergithub.fooloomanzoo : input-picker-pattern jar [2,3)

Project Modules

There are no modules declared in this project.

Published on NPM Published on webcomponents.org

API & Demo

<text-input>

An input for text values.

Motivation

The normal input with type="text" is fairly good to use, but it has some flaws, because it should if wanted e.g.:

  • guarantee live-value to be valid
  • to be styled easily
  • auto resize on input

Example

  <p>
    hex-color: <text-input id="hex" value="{{value}}" input="{{input}}" default="#111" required pattern="^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$" size="7" maxlength="7" minlength="4"></text-input>
  </p>
  <p>pattern: <b>^#(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$</b></p>
  <p>input: <b>[[input]]</b></p>
  <p>value: <b>[[value]]</b></p>

Styling

Have a look at input-picker-pattern#input-shared-style to see how to style the element.

Installation

npm i @fooloomanzoo/text-input

License

MIT

Versions

Version
2.0.9
2.0.8
2.0.5