0.1.1 • Published 9 months ago
@substrate-system/text-input v0.1.1
text input
A text input web component.
install
npm i -S @substrate-system/text-inputAPI
This exposes ESM and common JS via package.json exports field.
ESM
import '@substrate-system/text-input'Common JS
require('@substrate-system/text-input')CSS
Import CSS
import '@substrate-system/text-input/css'Or minified:
import '@substrate-system/text-input/css/min'Customize CSS via some variables
text-input {
--text-input-error-border: pink;
--gray-text: #999999;
--radius: 4px;
}use
This calls the global function customElements.define. Just import, then use
the tag in your HTML.
JS
import '@substrate-system/text-input'
import '@substrate-system/text-input/css'!NOTE The
nameattribute is used as anidalso, so it should be unique per page.
HTML
<div>
<text-input
display-name="text input component"
title="At least 3 letters, but less than 7"
required
minlength=3
maxlength=7
name="text-input"
></text-input>
</div>pre-built JS
This package exposes minified files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/text-input/dist/index.min.js ./public/text-input.js
cp ./node_modules/@substrate-system/text-input/dist/style.min.css ./public/text-input.cssHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<!-- CSS -->
<link rel="stylesheet" href="./text-input.css">
</head>
<body>
<!-- use the tag -->
<text-input
display-name="text input component"
title="At least 3 letters, but less than 7"
required
minlength=3
maxlength=7
name="text-input"
></text-input>
<!-- JS -->
<script type="module" src="./text-input.js"></script>
</body>
</html>