Skip to content

Commit 810c24c

Browse files
vvtimofeevvvtimofeev
committed
feat: add ru readme to landing components
1 parent 52e2952 commit 810c24c

File tree

6 files changed

+1346
-0
lines changed

6 files changed

+1346
-0
lines changed

‎src/components/Calendar/loc/README-ru.md

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<!--GITHUB_BLOCK-->
2+
3+
# Calendar
4+
5+
<!--/GITHUB_BLOCK-->
6+
7+
```tsx
8+
import {Calendar} from '@gravity-ui/date-components';
9+
```
10+
11+
`Calendar` — это гибкий и удобный компонент календаря для React-приложений. Он позволяет пользователям легко выбирать, просматривать и настраивать даты, что делает его отличным решением для планирования событий, систем бронирования и других задач, требующих выбора даты. Компонент становится контролируемым при установке свойства `value`. Если это значение не задано, компонент используется в неконтролируемом режиме. В этом случае задать начальное состояние можно через дополнительное свойство `defaultValue`. По умолчанию `Calendar` — неконтролируемый компонент.
12+
13+
### Полезная рекомендация
14+
15+
Для установки дат в правильном формате может понадобиться подключение вспомогательных функций из [библиотеки Date Utils](https://gravity-ui.com/libraries/date-utils).
16+
17+
```tsx
18+
import {dateTimeParse} from '@gravity-ui/date-utils';
19+
```
20+
21+
## Размер
22+
23+
Для изменения размера `Calendar` используйте свойство `size`. Размер по умолчанию — `m`.
24+
25+
<!--LANDING_BLOCK
26+
<ExampleBlock
27+
code={`
28+
<Calendar size="m" />
29+
<Calendar size="l" />
30+
<Calendar size="xl" />
31+
`}
32+
>
33+
<DateComponents.Calendar size="m" />
34+
<DateComponents.Calendar size="l" />
35+
<DateComponents.Calendar size="xl" />
36+
</ExampleBlock>
37+
LANDING_BLOCK-->
38+
39+
<!--GITHUB_BLOCK-->
40+
41+
```tsx
42+
<Calendar size="m" />
43+
<Calendar size="l" />
44+
<Calendar size="xl" />
45+
```
46+
47+
<!--/GITHUB_BLOCK-->
48+
49+
## Значение
50+
51+
### Минимальное и максимальное значения
52+
53+
Свойство `minValue` позволяет задать наиболее ранние дату и время, которые может ввести пользователь. Свойство `maxValue`, в свою очередь, определяет наиболее поздние дату и время, которые доступны для ввода. Все остальные значения будут недоступны для пользователя.
54+
55+
<!--LANDING_BLOCK
56+
<ExampleBlock
57+
code={`
58+
<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />
59+
`}
60+
>
61+
<DateComponentsExamples.CalendarExample minValue={'01.01.2024'} maxValue={'01.01.2025'}/>
62+
</ExampleBlock>
63+
LANDING_BLOCK-->
64+
65+
<!--GITHUB_BLOCK-->
66+
67+
```tsx
68+
<Calendar minValue={dateTimeParse('01.01.2024')} maxValue={dateTimeParse('01.01.2025')} />
69+
```
70+
71+
<!--/GITHUB_BLOCK-->
72+
73+
## Режим отображения
74+
75+
Определяет временной интервал, который будет отображаться в компоненте `Calendar`. С помощью свойства `mode` можно задать нужный интервал для контролируемого компонента. Для неконтролируемого компонента значение этого свойства указывать не требуется, а начальный режим отображения можно задать через `defaultMode`.
76+
77+
`days` — режим по умолчанию для `Calendar`. Отображает календарь с днями месяца.
78+
79+
`months` — отображает календарь с месяцами года.
80+
81+
`quarters` — отображает календарь с кварталами по годам (недоступно в качестве значения для `defaultMode`).
82+
83+
`years` — отображает календарь с несколькими годами для выбора.
84+
85+
С помощью свойства `modes` можно указать, какие режимы будут доступны пользователю.
86+
87+
<!--LANDING_BLOCK
88+
<ExampleBlock
89+
code={`
90+
<Calendar defaultMode="months"/>
91+
`}
92+
>
93+
<DateComponents.Calendar defaultMode="months" />
94+
</ExampleBlock>
95+
LANDING_BLOCK-->
96+
97+
<!--GITHUB_BLOCK-->
98+
99+
```tsx
100+
<Calendar defaultMode="months" />
101+
```
102+
103+
<!--/GITHUB_BLOCK-->
104+
105+
## Состояния
106+
107+
### `Disabled` (отключен)
108+
109+
Состояние `Calendar`, при котором пользователь не может взаимодействовать с компонентом.
110+
111+
<!--LANDING_BLOCK
112+
<ExampleBlock
113+
code={`
114+
<Calendar disabled={true} />
115+
`}
116+
>
117+
<DateComponents.Calendar disabled={true} />
118+
</ExampleBlock>
119+
LANDING_BLOCK-->
120+
121+
<!--GITHUB_BLOCK-->
122+
123+
```tsx
124+
<Calendar disabled={true} />
125+
```
126+
127+
<!--/GITHUB_BLOCK-->
128+
129+
### `readOnly` (только для чтения)
130+
131+
`readOnly` — это булев атрибут, который при установке в `true` делает компонент `Calendar` недоступным для редактирования пользователем. Это означает, что пользователи видят текущее значение поля, но не могут его изменить.
132+
133+
<!--LANDING_BLOCK
134+
<ExampleBlock
135+
code={`
136+
<Calendar readOnly={true} />
137+
`}
138+
>
139+
<DateComponents.Calendar readOnly={true} />
140+
</ExampleBlock>
141+
LANDING_BLOCK-->
142+
143+
<!--GITHUB_BLOCK-->
144+
145+
```tsx
146+
<Calendar readOnly={true} />
147+
```
148+
149+
<!--/GITHUB_BLOCK-->
150+
151+
## Значение, получающее фокус
152+
153+
Позволяет выбрать дату, на которой будет установлен фокус представления `Calendar`. Если необходимо контролировать это значение, используйте свойство `focusedValue`. Для неконтролируемого компонента начальное значение, получающее фокус, можно установить через `defaultFocusedValue`.
154+
155+
<!--LANDING_BLOCK
156+
<ExampleBlock
157+
code={`
158+
<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />
159+
`}
160+
>
161+
<DateComponentsExamples.CalendarExample defaultFocusedValue={'01.01.2020'} />
162+
</ExampleBlock>
163+
LANDING_BLOCK-->
164+
165+
<!--GITHUB_BLOCK-->
166+
167+
```tsx
168+
<Calendar defaultFocusedValue={dateTimeParse('01.01.2020')} />
169+
```
170+
171+
<!--/GITHUB_BLOCK-->
172+
173+
## Часовой пояс
174+
175+
`timeZone` — это свойство, позволяющее задать часовой пояс для значения в поле ввода. Подробнее о часовых поясах см. [здесь](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List).
176+
177+
## Свойства
178+
179+
| Имя | Описание | Тип | Значение по умолчанию |
180+
| :------------------------------------ | :------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------: | :---------------------------------------------------------: |
181+
| aria-describedby | Атрибут `aria-describedby` для контрола. | `string` | |
182+
| aria-details | Атрибут `aria-details` для контрола. | `string` | |
183+
| aria-label | Атрибут `aria-label` для контрола. | `string` | |
184+
| aria-labelledby | Атрибут `aria-labelledby` для контрола. | `string` | |
185+
| autoFocus | Атрибут `autofocus` для контрола. | `boolean` | |
186+
| className | Имя класса обертки контрола. | `string` | |
187+
| [defaultFocusedValue](#focused-value) | Дата, на которую устанавливается фокус при первом открытии календаря (если компонент неконтролируемый). | `DateTime` | |
188+
| [defaultMode](#mode) | Начальный режим отображения календаря. | `days` `months` `quarters` `years` | |
189+
| [defaultValue](#value) | Задает начальное значение для неконтролируемого компонента. | `DateTime` | |
190+
| [disabled](#disabled) | Указывает на то, что пользователь не может взаимодействовать с контролом. | `boolean` | `false` |
191+
| [focusedValue](#focused-value) | Устанавливает вид неконтролируемого компонента по умолчанию, включающий данное значение. | `DateTime` `null` | |
192+
| id | Атрибут `id` для контрола. | `string` | |
193+
| isDateUnavailable | Функция обратного вызова для каждой даты в календаре. Если она возвращает `true`, дата недоступна для выбора. | `((date: DateTime) => boolean)` | |
194+
| isWeekend | Функция обратного вызова для каждой даты в календаре. Если она возвращает `true`, дата является выходным днем. | `((date: DateTime) => boolean)` | |
195+
| [maxValue](#min-and-max-value) | Верхний предел выбора даты. | `DateTime` | |
196+
| [minValue](#min-and-max-value) | Нижний предел выбора даты. | `DateTime` | |
197+
| [mode](#mode) | Определяет временной интервал, который будет отображаться в контролируемом компоненте `Calendar`. | `days` `months` `quarters` `years` | |
198+
| modes | Режимы, доступные для выбора пользователем. | `Partial<Record<CalendarLayout, boolean>>` | `{days: true, months: true, quarters: false, years: true }` |
199+
| onBlur | Срабатывает, когда контрол теряет фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<Element, Element>) => void)` | |
200+
| onFocus | Срабатывает, когда контрол получает фокус. Передает событие фокуса в качестве аргумента обратного вызова. | `((e: FocusEvent<Element, Element>) => void)` | |
201+
| onFocusUpdate | Срабатывает при изменении даты, на которой фокусируется контрол. | `((date: DateTime) => void)` | |
202+
| onUpdate | Срабатывает при изменении значения. | `((value: DateTime) => void` | |
203+
| onUpdateMode | Срабатывает при изменении режима. | `((value: 'days' \| 'months' \| 'quarters' \| 'years' ) => void` | |
204+
| [readOnly](#readonly) | Определяет, можно ли изменять значение календаря. | `boolean` | `false` |
205+
| [size](#size) | Размер контрола. | `"m"` `"l"` `"xl"` | `"m"` |
206+
| style | Задает инлайн-стиль для элемента. | `CSSProperties` | |
207+
| [timeZone](#time-zone) | Задает часовой пояс. Подробнее о часовых поясах см. [здесь](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List). | `string` | |
208+
| [value](#calendar) | Значение контрола. | `DateTime` `null` | |

0 commit comments

Comments
 (0)