Skip to content

Commit

Permalink
docs(sdds-serv): TextArea doc updated due to dev updates
Browse files Browse the repository at this point in the history
  • Loading branch information
denivladislav committed Jun 25, 2024
1 parent 9a9c390 commit cd5bb26
Showing 1 changed file with 50 additions and 9 deletions.
59 changes: 50 additions & 9 deletions website/sdds-serv-docs/docs/components/TextArea.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@ id: textarea
title: TextArea
---

import { PropsTable, Description } from '@site/src/components';
import { PropsTable, Description, StorybookLink } from '@site/src/components';

# TextArea
<Description name="TextArea" />
<PropsTable name="TextArea" exclude={['$isFocused']} />
<StorybookLink name="TextArea" />

## Использование
Компонент `TextArea` может содержать иконку (или кнопку) справа.
Для этого используйте свойство `contentRight`:

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/sdds-serv';
import { TextArea } from '@salutejs/plasma-web';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
Expand All @@ -31,19 +32,59 @@ export function App() {
}
```

Также можно регулировать высоту и ширину, используя свойства `height` и `width`,
### Размеры компонента
Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
указав значения в `rem` или соответствующие свойствам css значения.
`height` и `width` отвечают за **всю** высоту и ширину компонента.

## Autoresize
```tsx live
import React from 'react';
import { TextArea } from '@salutejs/plasma-web';

export function App() {
return (
<div>
<TextArea
placeholder="Введите значение"
defaultValue="Значение"
height={10}
width={20}
/>
</div>
);
}
```

Свойства `rows` и `cols` указываются в абсолютных единицах, отвечают за фиксированное количество строк и столбцов.

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/plasma-web';

export function App() {
return (
<div>
<TextArea
placeholder="Введите значение"
defaultValue="Значение"
rows={5}
cols={20}
/>
</div>
);
}
```

### Autoresize
Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
Для этого необходимо использовать свойство `autoResize`.
Для этого необходимо использовать свойство `autoResize`.
При этом, если пользователь вручную регулирует высоту(`resize`), то она так и остается пользовательской.

В этом режиме можно указать крайние значения высоты поля ввода, используя свойства `autoMin`, `autoMax`,
указав их в `rem`.
Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/sdds-serv';
import { TextArea } from '@salutejs/plasma-web';

export function App() {
const [value, setValue] = React.useState('Значение');
Expand All @@ -70,7 +111,7 @@ export function App() {

```tsx live
import React from 'react';
import { TextArea } from '@salutejs/sdds-serv';
import { TextArea } from '@salutejs/plasma-web';

export function App() {
return (
Expand Down

0 comments on commit cd5bb26

Please sign in to comment.