35 |
--------------------------------------------------------------------------------
/src/lib/components/Blocks/Badge/Badge.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
20 |
43 |
--------------------------------------------------------------------------------
/src/lib/components/Blocks/Link/Link.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
21 |
22 |
23 |
24 |
25 |
26 |
46 |
--------------------------------------------------------------------------------
/src/lib/components/Blocks/CardGrid/README.md:
--------------------------------------------------------------------------------
1 | # CardGrid
2 |
3 | Сетка для [Card](Card). Согласно дизайну, высота Card должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
4 |
5 | - `size="s"`: высота равна 92% ширины;
6 | - `size="m"`: высота равна 62% ширины;
7 | - `size="l"`: высота равна 30% ширины.
8 |
9 | ```svelte scroll
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | ```
42 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2022-present Daniil Suvorov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
--------------------------------------------------------------------------------
/src/lib/components/Forms/FormLayoutGroup/README.md:
--------------------------------------------------------------------------------
1 | # FormLayoutGroup
2 |
3 | Компонент помогает сгруппировать несколько `FormItem` по какому-то признаку, расположив их по вертикали или по горизонтали.
4 |
5 | ```svelte scroll
6 |
11 |
12 |
13 | {
15 | e.preventDefault();
16 | }}
17 | >
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {#if !showDates}
27 | (showDates = true)}>Указать даты поездки
28 | {:else}
29 | (showDates = false)}>
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {/if}
38 |
39 |
40 | ```
41 |
--------------------------------------------------------------------------------
/src/lib/components/Blocks/InitialsAvatar/README.md:
--------------------------------------------------------------------------------
1 | # InitialsAvatar
2 |
3 | Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения). Для лучшего отображения, рекомендуется использовать длину текста **не более 2 символов**.
4 |
5 | ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](/VKSUI/utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
6 |
7 | ```svelte mini
8 |
14 |
15 |
28 |
29 |
30 |
63 |
--------------------------------------------------------------------------------
/src/lib/components/Blocks/Spinner/Spinner.svelte:
--------------------------------------------------------------------------------
1 |
13 |
14 |
19 |
20 |
21 | {#if size === 'large'}
22 |
23 | {:else if size === 'medium'}
24 |
25 | {:else if size === 'small'}
26 |
27 | {:else}
28 |
29 | {/if}
30 |
31 |
32 |
67 |
--------------------------------------------------------------------------------
/src/lib/components/Typography/Headline/Headline.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 |
21 |
22 |
23 |
24 |
64 |
--------------------------------------------------------------------------------
/src/lib/components/Service/AppearanceProvider/AppearanceProvider.svelte:
--------------------------------------------------------------------------------
1 |
30 |
31 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/routes/modes.md:
--------------------------------------------------------------------------------
1 | # Режимы подключения
2 |
3 | Библиотека VKSUI поддерживает 3 режима подключения:
4 |
5 | - Full — ваше приложение полностью реализовано с помощью данной библиотеки и контролируется VKSUI.
6 | - Embedded — ваше приложение будет реализовано в виде блока, встроенного в основное приложение (например, Марусю или базовое приложение ВКонтакте).
7 | - Partial — ваше приложение реализовано с помощью сторонних решений и использует некоторые компоненты библиотеки VKSUI.
8 |
9 | Режим выставляется в компоненте `AppRoot` с помощью свойства `mode`. Любое приложение должно быть обёрнуто в этот компонент.
10 |
11 | ## Full
12 |
13 | Данный режим позволяет VKSUI полностью контролировать страницы вашего приложения.
14 | В этом случае root-элемент должен находиться непосредственно внутри ``.
15 | Режим full включен по умолчанию. Его рекомендуется использовать для [VK Mini Apps](https://vk.com/miniapps) и standalone проектов.
16 |
17 | > **Важно**
18 | >
19 | > При работе с SSR нужно изначально добавить классы vkui в теги html и vkui\_\_root корневого контейнера, чтобы избежать изменений стилей после гидратации.
20 |
21 | ## Embedded
22 |
23 | Данный режим позволяет вам подключить VKSUI не на всю страницу приложения, а только к определенному контейнеру.
24 | Как и с full режимом, VKSUI добавит свои классы в корневой контейнер.
25 |
26 | ## Partial
27 |
28 | Данный режим подходит для случаев, когда вам нужно сверстать небольшой блок, а не страницу целиком. В partial режиме не
29 | подразумевается использование компонентов из раздела Layout. Чтобы подключить VKSUI в этом режиме, необходимо вручную
30 | добавить класс `.vkui__root` на выбранный контейнер, а потом использовать VKSUI компоненты внутри него.
31 |
32 | ```html
33 |
34 | ...
35 |
36 |