UI компоненти

Тази страница съдържа copy-ready примери за:

• InfoSpot (1:4)
• InfoSpotReverse (4:1)
• DocCard
• DocCard2 (2 карти)
• DocCard3 (3 карти)
• InfoCard
• InfoCard2 (2 info карти)
• InfoCard3 (3 info карти)

Импорти

import InfoSpot from '@site/src/components/InfoSpot';
import InfoSpotReverse from '@site/src/components/InfoSpotReverse';
import DocCard from '@site/src/components/DocCard';
import DocCard2 from '@site/src/components/DocCard2';
import DocCard3 from '@site/src/components/DocCard3';
import InfoCard from '@site/src/components/InfoCard';
import InfoCard2 from '@site/src/components/InfoCard2';
import InfoCard3 from '@site/src/components/InfoCard3';

InfoSpot (1:4)

<InfoSpot imageSrc="/img/undraw_docusaurus_react.svg" imageAlt="Пример" variant="info">

### Заглавие

Текст в дясната зона.

</InfoSpot>

Пример InfoSpot

Вляво е изображението, вдясно е Markdown съдържанието.

InfoSpotReverse (4:1)

<InfoSpotReverse imageSrc="/img/undraw_docusaurus_tree.svg" imageAlt="Пример" variant="tip">

### Заглавие

Текст в лявата зона.

</InfoSpotReverse>

Пример InfoSpotReverse

Вляво е Markdown съдържанието, вдясно е изображението.

DocCard

<DocCard
  title="Кратко заглавие"
  headerImageSrc="/img/docusaurus.png"
  headerImageAlt="Икона"
>

Това е body частта с нормален Markdown.

- Списък
- Линкове
- Форматиране

</DocCard>

Примерна карта

Това е body частта с нормален Markdown.

• Списък
• Линкове
• Форматиране

DocCard2 (2 карти)

<DocCard2>
  <DocCard title="Карта 1" headerImageSrc="/img/docusaurus.png">Съдържание 1</DocCard>
  <DocCard title="Карта 2" headerImageSrc="/img/docusaurus.png">Съдържание 2</DocCard>
</DocCard2>

Карта 1

Съдържание 1

Карта 2

Съдържание 2

DocCard3 (3 карти)

<DocCard3>
  <DocCard title="Карта A" headerImageSrc="/img/docusaurus.png">Съдържание A</DocCard>
  <DocCard title="Карта B" headerImageSrc="/img/docusaurus.png">Съдържание B</DocCard>
  <DocCard title="Карта C" headerImageSrc="/img/docusaurus.png">Съдържание C</DocCard>
</DocCard3>

Карта A

Съдържание A

Карта B

Съдържание B

Карта C

Съдържание C

InfoCard (без header)

<InfoCard variant="info" iconSrc="/img/docusaurus.png" iconAlt="Икона" iconText="Информация">

Това е InfoCard без header. Поддържа 4 flavor варианта:

- `info`
- `success`
- `warning`
- `error`

</InfoCard>

<InfoCard variant="success" compact iconText="Кратък статус">

Това е compact вариант за по-плътни изгледи.

</InfoCard>

Информация

Това е InfoCard без header. Поддържа 4 flavor варианта.

Успех

Операцията е изпълнена успешно.

Кратък статус

Това е compact вариант за по-плътни изгледи.

Внимание

Проверете входните данни преди продължение.

Грешка

Възникна проблем и действието не може да продължи.

InfoCard2 (2 info карти)

<InfoCard2>
  <InfoCard variant="success" iconText="Статус">Съдържание 1</InfoCard>
  <InfoCard variant="warning" iconText="Статус">Съдържание 2</InfoCard>
</InfoCard2>

Успех

Съдържание 1

Внимание

Съдържание 2

InfoCard3 (3 info карти)

<InfoCard3>
  <InfoCard variant="info" iconText="A">Съдържание A</InfoCard>
  <InfoCard variant="success" iconText="B">Съдържание B</InfoCard>
  <InfoCard variant="error" iconText="C">Съдържание C</InfoCard>
</InfoCard3>

Info

Съдържание A

Success

Съдържание B

Error

Съдържание C

Бележки

• DocCard2 е responsive: 2 -> 1.
• DocCard3 е responsive: 3 -> 2 -> 1.
• DocCard поддържа опционални headerImageSrc и headerImageAlt.
• InfoCard е без header, с rounded corners и variants: info | success | warning | error.
• InfoCard поддържа compact режим за по-малка височина.
• InfoCard2 е responsive: 2 -> 1.
• InfoCard3 е responsive: 3 -> 2 -> 1.
• InfoSpot и InfoSpotReverse поддържат variant="info" | "warning" | "tip".