packages/loading-button/loadingButton.story.mdx - develop - kaws/ui-kit-ce

packages/loading-button/loadingButton.story.mdx
169 строк7 KB
Калиниченко Никита Артемович
feat(loading-button): добавлена возможность контроллировать уровень состояния загрузки
26 мар 2025, 16:51
26 мар 2025, 16:51152b206
import { Meta, Story, Title, Subtitle } from '@storybook/addon-docs'
import { LoadingButton } from '@v-uik/loading-button'
import {
  createTitle,
  COMPONENTS,
  createStory,
} from '../../docs/showroom/config'
import { Preview, Code } from '@v-uik/showroom/components'
import { default as CanvasStory } from './examples/Canvas'
import {
  FilledLoadingButtons,
  Default,
  OutlinedLoadingButtons,
  IconLoadingButtons,
  GhostLoadingButtons,
  DifferentSizeLoadingButtons,
  AnimatedLoadingButtons,
  CustomComponents,
  LoadingSuffix,
  LoadingTitle,
  LoadingIconButton,
  PercentLoadingButton,
} from './examples'
import RawCanvas from '!!raw-loader!./examples/Canvas'
import RawFilledLoadingButtons from '!!raw-loader!./examples/FilledLoadingButtons'
import RawOutlinedLoadingButtons from '!!raw-loader!./examples/OutlinedLoadingButtons'
import RawIconLoadingButtons from '!!raw-loader!./examples/IconLoadingButtons'
import RawGhostLoadingButtons from '!!raw-loader!./examples/GhostLoadingButtons'
import RawDifferentSizeLoadingButtons from '!!raw-loader!./examples/DifferentSizeLoadingButtons'
import RawAnimatedLoadingButtons from '!!raw-loader!./examples/AnimatedLoadingButtons'
import RawDefault from '!!raw-loader!./examples/Default'
import RawCustomComponents from '!!raw-loader!./examples/CustomComponents'
import RawLoadingSuffix from '!!raw-loader!./examples/LoadingSuffix'
import RawLoadingTitle from '!!raw-loader!./examples/LoadingTitle'
import RawLoadingIconButton from '!!raw-loader!./examples/LoadingIconButton'
import RawPercentLoadingButton from '!!raw-loader!./examples/PercentLoadingButton'

export const story = createStory(CanvasStory, RawCanvas)

<Meta
  title={createTitle([COMPONENTS.controls, 'LoadingButton', 'LoadingButton'])}
  component={LoadingButton}
/>

<Story
  name="LoadingButton"
  parameters={{
    ...story.parameters,
    controls: {
      disable: true,
    },
    docs: { disable: true },
  }}
>
  {story.component}
</Story>

<Title>LoadingButton</Title>
<Subtitle>
  Интерактивный компонент кнопки с поддержкой состояния загрузки
</Subtitle>

## Импорт

<Code code="import { LoadingButton } from '@v-uik/base'" />

или

<Code code="import { LoadingButton } from '@v-uik/loading-button'" />

## Базовая функциональность

Компонент представляет из себя стандартную кнопку `Button` с поддержкой отображения в состоянии загрузки.

Чтобы активировать состояние загрузки, передайте в компонент свойство `isLoading` со значением `true`. В этом состоянии кнопка становится **не интерактивной**.

Ниже представлен пример базового использования компонента `LoadingButton`.

<Preview code={RawDefault}>
  <Default />
</Preview>

## Заполненные кнопки (default)

Данный тип кнопок имеет высокий акцент с точки зрения дизайна, т.е. такие кнопки сильно выделяются в пользовательском интерфейсе.

<Preview code={RawFilledLoadingButtons}>
  <FilledLoadingButtons />
</Preview>

## Контурные кнопки

<Preview code={RawOutlinedLoadingButtons}>
  <OutlinedLoadingButtons />
</Preview>

## Текстовые кнопки

<Preview code={RawGhostLoadingButtons}>
  <GhostLoadingButtons />
</Preview>

## Кнопки разных размеров

<Preview code={RawDifferentSizeLoadingButtons}>
  <DifferentSizeLoadingButtons />
</Preview>

## Текст загрузки

Для изменения текста кнопки в состоянии загрузки передайте необходимое значение в свойстве `loadingTitle`.

<Preview code={RawLoadingTitle}>
  <LoadingTitle />
</Preview>

## Видимость индикаторов загрузки

Свойства `hideLoaderPrefix` и `showLoaderSuffix` предоставляют возможность скрывать или отображать индикаторы загрузки в соответствующих местах кнопки.
Например, для скрытия индикатора загрузки слева передайте свойство `hideLoaderPrefix` со значением `true`, а для отображения индикатора
загрузки справа — `showLoaderSuffix` со значением `true`.

<Preview code={RawLoadingSuffix}>
  <LoadingSuffix />
</Preview>

## Настройка индикатора загрузки

Свойства `prefixProps` и `suffixProps` предоставляют возможность настраивать индикаторы загрузки по желанию пользователя.

<Preview code={RawPercentLoadingButton}>
  <PercentLoadingButton />
</Preview>

## Компоненты кнопки

`LoadingButton` позволяет переопределить части своих компонентов по желанию пользователя. Для этого необходимо передать соответствующие компоненты в
свойство `components`. В кнопке возможно переопределить следующие компоненты:

| Название                  | Тип                            | Описание                                                        |
| ------------------------- | ------------------------------ | --------------------------------------------------------------- |
| <code>LoaderPrefix</code> | <code>LoaderPrefixProps</code> | Компонент индикатора загрузки, отображаемый перед дочерним JSX  |
| <code>LoaderSuffix</code> | <code>LoaderSuffixProps</code> | Компонент индикатора загрузки, отображаемый после дочернего JSX |

<Preview code={RawCustomComponents}>
  <CustomComponents />
</Preview>

## Примеры использования

### Вариации отображения кнопок в состоянии загрузки

<Preview code={RawIconLoadingButtons}>
  <IconLoadingButtons />
</Preview>

### Кнопка с индикатором загрузки и иконкой

С помощью свойств `suffixIcon` и `prefixIcon` возможно указать иконки для кнопки, которые будут отображаться вне
зависимости от свойства `isLoading` при отсутствии компонента соответствующего индикатора загрузки.

<Preview code={RawLoadingIconButton}>
  <LoadingIconButton />
</Preview>

## Связанные компоненты

- [CircularProgress](?path=/docs/обратная-связь-progress-progress--progress#circularprogress);
- [PolymorphicButton](?path=/docs/элементы-управления-button-polymorphicbutton--polymorphic-button).