9.0.1 • Published 5 months ago
qing-button v9.0.1
qing-button
A simple button component based on lit.
Demo
Installation
npm i qing-button lit
Usage
Properties
disabled: boolean
indicates whether the button is disabled.autofocus: boolean
indicates whether the button is focused when the page loads.href: string
navigates to the given URL when clicked on.disableSelectedStyle: boolean
opts out of default dimmed background when selected.
Events
click
fires when clicked, doesn't bubble up.
CSS Shadow Parts
button
the underlying button.
qing-button.colored-border::part(button) {
border: 4px solid yellowgreen;
border-radius: 10px;
}
CSS Variables
qing-button also has some CSS variables for quick customization.
--button-outline-color
focus outline color, defaults to 8dc3eb
.
Examples
See demo for more examples.
html`
<qing-button @click=${() => alert('Hello world')}>Default</qing-button>
<qing-button disabled>Disabled</qing-button>
<qing-button autofocus>Auto-focused</qing-button>
`;
9.0.1
5 months ago
9.0.0
5 months ago
8.2.6
2 years ago
8.2.3
2 years ago
8.2.5
2 years ago
8.2.4
2 years ago
8.2.1
3 years ago
8.2.0
3 years ago
8.1.0
3 years ago
8.0.3
3 years ago
8.0.2
3 years ago
8.0.1
3 years ago
8.0.0
3 years ago
7.1.0
3 years ago
7.0.0
3 years ago
7.0.1
3 years ago
6.1.0
4 years ago
6.0.0
4 years ago
5.3.0
4 years ago
5.2.0
4 years ago
5.1.0
4 years ago
5.0.0
4 years ago