intl-tel-input-wc
v1.0.3
Published
International phone code selector web component that can search, auto-binding flag icon.
Downloads
12
Maintainers
swaggyplinReadme
Svelte Intl Phone Code Selector
Read this in other languages:
International phone code selector web component that can search, auto-binding flag icon.
Css reference from: vue-tel-input/sprite.css at master · iamstevendao/vue-tel-input (github.com)https://github.com/jackocnr/intl-tel-input/blob/master/build/css/intlTelInput.css)
Country data from: vue-tel-input/all-countries.js at master · iamstevendao/vue-tel-input (github.com)
Demo:
https://tmx.freesty1e.cn/storybook-intl/
Features
- Filter by number code and country name
- Append to the body to avoid other elements covering the popup
- CSS in JS, no need to import any CSS file
- Web component, use in any framework or vanilla JS
Installation
npm install intl-tel-input-wcCDN
https://cdn.jsdelivr.net/npm/intl-tel-input-wcUsage
<html>
<head>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/intl-tel-input-wc"
></script>
</head>
<body>
<intl-select flag_only="true" id="intl_select"></intl-select>
</body>
<script type="text/javascript">
document.querySelector("intl-select").$on("select", (event) => {
const data = event.detail;
console.log(data);
});
document.querySelector("intl-select").$on("clear", (event) => {
console.log("on click clear button");
});
</script>
</html>Properties
| Name | Description | Default | | ------------------ | ---------------------------------------------------- | ----------------------------- | | placeholder | string | Please select your country... | | flag_only | boolean | false | | cross | boolean | true | | append_to_body | Set the selection popup is if append to body element | true |
Events
| Name | Description | | ------ | ----------------------------- | | select | Trigger on value selected | | clear | Trigger on click clear button |