Input web component
yarn add @conectate/ct-input
#or
npm i @conectate/ct-input
On HTML
<ct-input active="true"></ct-input>
On LitElement
with typescript
import { LitElement, css, customElement, html, property } from "lit";
@customElement("ct-main")
export class CtMain extends LitElement {
@property({ type: Boolean, reflect: true }) active = true;
static styles = css`
:host {
display: block;
}
`;
render() {
return html`<ct-input label="Name" placeholder="Put your name" rawPlaceholcer="John Doe"></ct-input>`;
}
}
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
accept |
accept |
string |
"" | |
autocomplete |
autocomplete |
"on" | "off" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | ... 50 more ... | "work" |
"off" | |
autofocus |
autofocus |
boolean |
false | |
charCounter |
charCounter |
boolean |
false | - |
countChar |
countChar |
number |
0 | Total chars on input |
disabled |
disabled |
boolean |
false | - |
errorMessage |
errorMessage |
string |
"" | Mensaje de error al no complir con el pattern |
inputmode |
inputmode |
"" | "email" | "tel" | "url" | "verbatim" | "latin" | "latin-name" | "latin-prose" | "full-width-latin" | "kana" | "kana-name" | "katakana" | "numeric" |
"" | |
invalid |
boolean |
|||
label |
label |
string |
"" | Change default icon to whatever you like |
max |
max |
string |
"" | |
maxlength |
maxlength |
number |
"MAX_SAFE_INTEGER" | Max length on input |
min |
min |
string |
"" | |
minlength |
minlength |
number |
0 | |
multiple |
multiple |
boolean |
false | |
name |
name |
string |
"" | |
noHover |
noHover |
boolean |
false | Do not show any effects when hovering the searchbox |
pattern |
pattern |
string | RegExp |
"" | regexp |
placeholder |
placeholder |
string |
"" | Placeholder text when searchbox is empty |
raiseForced |
raiseForced |
boolean |
false | Always raise the searchbox whether it is active or not, or whether is has value or not |
raiseOnActive |
raiseOnActive |
boolean |
false | Raise searchbox is it's focused |
raiseOnValue |
raiseOnValue |
boolean |
false | Raise searchbox if it has value |
rawPlaceholder |
rawPlaceholder |
string |
"" | Placeholder text when searchbox is empty |
readonly |
readonly |
boolean |
false | |
required |
required |
boolean |
false | - |
size |
size |
number |
24 | |
step |
step |
string |
"" | |
type |
type |
string |
"text" | Input type |
value |
string |
Method | Type | Description |
---|---|---|
mapIDs |
(): void |
Map all IDs for shadowRoot and save in this.$ like a polymer element.You should add in the first line of firstUpdated()
|
validate |
(): boolean |
Validate required input |
Name | Description |
---|---|
prefix |
Content placed start the main content |
suffix |
Content placed end the main content |