https://github.com/bre97-web/light-dark-switch
适用于任意框架的dark类名switch按钮。
https://github.com/bre97-web/light-dark-switch
component html html-css-js lit no-framework react switch vue web-component
Last synced: 2 months ago
JSON representation
适用于任意框架的dark类名switch按钮。
- Host: GitHub
- URL: https://github.com/bre97-web/light-dark-switch
- Owner: bre97-web
- License: mit
- Created: 2023-06-27T06:09:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-13T09:46:46.000Z (almost 2 years ago)
- Last Synced: 2025-02-01T18:11:18.141Z (4 months ago)
- Topics: component, html, html-css-js, lit, no-framework, react, switch, vue, web-component
- Language: TypeScript
- Homepage: https://bre97-web.github.io/light-dark-switch/
- Size: 142 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# light-dark-switch
light-dark-switch是根据html标签类名驱动的Web Component，它可以在任何位置使用。
# Quick Start
## Install
```
npm i light-dark-switch
```
## Import
in index.html
```html
```
in main.js
```js
import 'light-dark-switch/light-dark-switch.js'
```
in main.ts
```ts
import 'light-dark-switch/light-dark-switch'
```
## Usage
```html
```
# Documents
## Properties
|Property Name|Document|
|:--|:--|
|enable-sync|使按钮在html的dark类名变更后**同步**|
|selected|使按钮在**首次渲染后的选择状态**为已选择（selected）,它会被html的实际类名影响|
|disabled|使按钮**不可用**|
## Methods
|Method|Returns|
|:--|--:|
|select()|void|
|unSelect()|void|
|enableSync()|void|
|disableSync()|void|
|isSelected()|boolean|
|isDisabled()|boolean|
|isSync()|boolean|