wc-dot-hr
Dotted style horizontal rule web component.
Installation
You can install wc-dot-hr with npm, or just get started quickly with CDN.
Install from npm
To install from npm, open terminal in your project folder and run:
npm install wc-dot-hrAfter the package is installed, then you can import the bubble web component into you code:
import 'wc-dot-hr';
window.onload = function() {
let dotHr = document.createElement('dot-hr');
// specify dot number with css variable
dotHr.style.setProperty('--hr-dots-number', 5)
document.body.appendChild(starInput);
}Install from CDN
There is jsDelivr CDN available for quickly integrated with your web page.
<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/wc-dot-hr"></script>
<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/wc-dot-hr@1.0.0"></script>Basic Usages:
<html>
<head>
<!-- Load wc-dot-hr WebComponent library -->
<script src="https://cdn.jsdelivr.net/npm/wc-dot-hr@1.0.0"></script>
<!-- End Load -->
</head>
<body>
<!-- Using "dot-hr" html tag to generate horizontal rule -->
<p>blablabla...</p>
<dot-hr></dot-hr>
<p>blablabla...</p>
</form>
</body>
</html>Demo page
Demo: https://yishiashia.github.io/wc-dot-hr/
Usage
If you want to customize this web component, you can import the library and
implement your new class by extend DotHr.
import DotHr from "wc-dot-hr";
class customizedDotHr extends DotHr {
// override here
}Customized star style
To customize the dotted hr style, you can use the css variables.
| CSS variable | Description |
|---|---|
| --hr-dots-number | The number of dots, default value is 3
|
| --hr-light-color | The color of dot when the prefers-color-scheme is light. The default value is #666
|
| --hr-dark-color | The color of dot when the prefers-color-scheme is dark. The default value is #ccc
|
| --hr-dot-size | The size of dot. The default value is 8px
|
| --hr-space-between | The space between dots. The default value is 24px
|