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-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);
}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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent