@studio-west/component-sw 0.2.16 → 0.2.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
Находится в разработке !
|
|
2
2
|
# Component SW - UI компоненты с поддержкой светлой и темной системной темы
|
|
3
3
|
|
|
4
|
-
Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.
|
|
4
|
+
Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов на vue 3 для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# Component SW - UI Components with Light and Dark Theme Support
|
|
9
9
|
|
|
10
|
-
The `Component SW` library provides a set of ready-to-use UI components for rapid interface development. Each component has a set of properties that can be customized to achieve the desired behavior and appearance. It supports both light and dark system themes.
|
|
10
|
+
The `Component SW` library provides a set of ready-to-use UI components on Vue 3 for rapid interface development. Each component has a set of properties that can be customized to achieve the desired behavior and appearance. It supports both light and dark system themes.
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
@@ -31,6 +31,22 @@ import '@studio-west/component-sw/dist/component-sw.css';
|
|
|
31
31
|
|
|
32
32
|
app.use(Library)
|
|
33
33
|
```
|
|
34
|
+
Установка в ручную светлой и темной темы - добавление к тегу `html` классов `dark` или `light` / Installation in a manual light and dark theme - adding to the tag `html` classes` dark` or `light`
|
|
35
|
+
|
|
36
|
+
пример:
|
|
37
|
+
```js
|
|
38
|
+
const darkMode = () => {
|
|
39
|
+
if(mode.value === 'dark-theme') {
|
|
40
|
+
document.querySelector('html').classList.remove('light')
|
|
41
|
+
document.querySelector('html').classList.add('dark')
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
document.querySelector('html').classList.remove('dark')
|
|
45
|
+
document.querySelector('html').classList.add('light')
|
|
46
|
+
}
|
|
47
|
+
mode.value = (document.querySelector('html').classList.contains('dark')) ? 'light-theme' : 'dark-theme'
|
|
48
|
+
}
|
|
49
|
+
```
|
|
34
50
|
## SwButton
|
|
35
51
|
|
|
36
52
|
Компонент `SwButton` представляет собой кнопку с различными настраиваемыми параметрами.
|
|
@@ -114,6 +130,10 @@ suffix - клик иконке after
|
|
|
114
130
|
</sw-input>
|
|
115
131
|
```
|
|
116
132
|
---
|
|
133
|
+
## SwSwitch
|
|
134
|
+
|
|
135
|
+
Компонент SwSwitch представляет собой чекбокс с возможностью настройки внешнего вида галочка | переключатель | переключатель с подписью и поведения.
|
|
136
|
+
--
|
|
117
137
|
|
|
118
138
|
### Лицензия / License
|
|
119
139
|
|