@studio-west/component-sw 0.1.42 → 0.1.43
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 +99 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,102 @@
|
|
|
1
|
-
|
|
1
|
+
находится в разработке !
|
|
2
|
+
# Component SW - UI компоненты с поддержкой светлой и темной системной темы
|
|
2
3
|
|
|
4
|
+
Библиотека компонентов `Component SW` предоставляет набор готовых UI-компонентов для быстрой разработки интерфейсов. Каждый компонент имеет набор свойств, которые можно настраивать для достижения желаемого поведения и внешнего вида. Имеет поддержку светлой и темной системной темы.
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
---
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
# Component SW - UI Components with Light and Dark Theme Support
|
|
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.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Содержание / Table of Contents
|
|
15
|
+
|
|
16
|
+
- [SwButton](#swbutton)
|
|
17
|
+
- [SwInput](#swinput)
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## SwButton
|
|
22
|
+
|
|
23
|
+
Компонент `SwButton` представляет собой кнопку с различными настраиваемыми параметрами.
|
|
24
|
+
|
|
25
|
+
### Свойства / Properties
|
|
26
|
+
|
|
27
|
+
| Имя | Тип | Значения/Описание |
|
|
28
|
+
|----------|------------|----------------------------------------------------------------------------------|
|
|
29
|
+
| `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
|
|
30
|
+
| `size` | `String` | Размер кнопки: `'large'`, `'small'`. |
|
|
31
|
+
| `type` | `String` | Тип кнопки: `'primary'`, `'success'`, `'info'`, `'warning'`, `'danger'`. |
|
|
32
|
+
| `round` | `Boolean` | Делает кнопку визуально закругленной. |
|
|
33
|
+
| `text` | `Boolean` | Делает кнопку визуально похожей на текст (без фона). |
|
|
34
|
+
| `link` | `Boolean` | Преобразует кнопку в ссылку. |
|
|
35
|
+
| `href` | `String` | URL, на который будет перенаправлен пользователь при клике (если `link=true`). |
|
|
36
|
+
|
|
37
|
+
### Пример использования / Example Usage
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<sw-button
|
|
41
|
+
class="custom-class"
|
|
42
|
+
size="large"
|
|
43
|
+
type="primary"
|
|
44
|
+
round
|
|
45
|
+
text
|
|
46
|
+
link
|
|
47
|
+
href="https://example.com"
|
|
48
|
+
>
|
|
49
|
+
Нажми меня / Click Me
|
|
50
|
+
</sw-button>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## SwInput
|
|
56
|
+
|
|
57
|
+
Компонент SwInput представляет собой поле ввода с возможностью настройки внешнего вида и поведения.
|
|
58
|
+
|
|
59
|
+
### Свойства / Properties
|
|
60
|
+
|
|
61
|
+
| Имя | Тип | Значения/Описание |
|
|
62
|
+
|---------------|-----------|----------------------------------------------------------|
|
|
63
|
+
| `name` | `String` | Обязателен! нужен для связывания через id input и label |
|
|
64
|
+
| `class` | `String` | Добавляет пользовательский CSS-класс к компоненту. |
|
|
65
|
+
| `size` | `String` | Размер поля: `'large'`, `'small'`. |
|
|
66
|
+
| `type` | `String` | Тип поля: `'text'`- по умолчанию, `'phone'`- телефон. |
|
|
67
|
+
| `before` | `String` | Название svg в спрайте загружаемое в начале. |
|
|
68
|
+
| `after` | `String` | Название svg в спрайте загружаемое в конце. |
|
|
69
|
+
| `placeholder` | `String` | текст Placeholder. |
|
|
70
|
+
| `label` | `String` | Текст в Label |
|
|
71
|
+
|
|
72
|
+
### Слоты / Slots
|
|
73
|
+
|
|
74
|
+
#prefix - вставка при отсутствии before не обязательно / Insertion when before is not used (optional).
|
|
75
|
+
|
|
76
|
+
#suffix - вставка при отсутствии after не обязательно / Insertion when after is not used (optional).
|
|
77
|
+
|
|
78
|
+
### Пример использования
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<sw-input
|
|
82
|
+
name="input"
|
|
83
|
+
class="custom-class"
|
|
84
|
+
size="large"
|
|
85
|
+
type="phone"
|
|
86
|
+
before="phone"
|
|
87
|
+
after=""
|
|
88
|
+
placeholder="input"
|
|
89
|
+
label="input"
|
|
90
|
+
>
|
|
91
|
+
<template #suffix>#</template>
|
|
92
|
+
</sw-input>
|
|
93
|
+
```
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
### Лицензия / License
|
|
97
|
+
|
|
98
|
+
Этот проект распространяется под лицензией MIT. Подробности см. в файле LICENSE .
|
|
99
|
+
This project is distributed under the MIT License. For details, see the LICENSE file.
|
|
100
|
+
---
|
|
101
|
+
Если у вас есть вопросы или предложения, пожалуйста, создайте issue на почту info@studiowest.ru.
|
|
102
|
+
If you have any questions or suggestions, please create an issue to E-mail info@studiowest.ru.
|