Dotted style horizontal rule web component.
You can install wc-dot-hr
with npm, or just get started quickly with CDN.
To install from npm, open terminal in your project folder and run:
npm install wc-dot-hr
After 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);
}
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/[email protected]"></script>
<html>
<head>
<!-- Load wc-dot-hr WebComponent library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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: https://yishiashia.github.io/wc-dot-hr/
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
}
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 |