@usb-ai/retag-search-input
v0.0.2
Published
@usb-ai/retag-search-input is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
Downloads
3
Readme
@usb-ai/retag-search-input
@usb-ai/retag-search-input is a vanilla javascript component which will work in any frontend framework. You can install from npm like this:
npm install --save @usb-ai/retag-search-inputUsage: Javascript (assumes es module)
import SearchInput from '@usb-ai/retag-search-input'
let searchInput = new SearchInput({target:document.body, props: { label: 'Search' });
searchInput.label = 'Updated Value';The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element').
You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI.
Usage: Legacy Javascript
Below you can see how to use the component with vanilla js.
...
<head>
...
<script src="https://unpkg.com/@usb-ai/[email protected]/index.js"></script>
</head>
<body>
<script>
let searchInput = new SearchInput({ target: document.body });
</script>
</body>Usage: Web Component (aka. Custom Element)
You can use it as a web component.
<head>
<script src="https://unpkg.com/@usb-ai/[email protected]/index.js"></script>
</head>
<body>
<retag-search-input label="Search" />
</body>Svelte Component
<script>
import SearchInput from "@usb-ai/retag-search-input";
</script>
<SearchInput />Theme
In order to use the provided theme you should import root.css (TODO: add it to the bundle, download it here in the meantime: https://github.com/usb-ai/retag-search/tree/main/packages/%40usb-ai/retag-search-input/), which sets different css variables used in the component which you can adapt for your own.
FIXME: href path of link is not yet available in this bundle
<head>
...
<link href="root.css" rel="stylesheet" />
</head>
Alternatively you can set the variables in inline style in your prefered html
document of your website: ```html
<style>
:root {
--color-bg: #fff;
--color-bg-secondary: #e9e9e9;
--color-text: #000;
--color-text-secondary: #999;
--border-radius: 5px;
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--width-card-wide: 800px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #333;
--color-bg-secondary: #555;
--color-text: #f7f7f7;
--color-text-secondary: #aaa;
}
}
</style>Pelte
This component was created by pelte (aka publish-svelte)