Code блоки

В Chakra UI компонент Code предназначен для отображения коротких фрагментов кода или команд внутри текста. Он обеспечивает стилизованное оформление с подсветкой, поддерживает разные размеры и цветовые схемы, а также легко интегрируется с другими компонентами библиотеки.

import { Code } from '@chakra-ui/react';

function Example() {
  return <Code>npm install chakra-ui</Code>;
}

По умолчанию Code применяет базовую стилизацию, включающую моноширинный шрифт, серый фон и легкую границу. Это делает текст легко читаемым и отделяет его от основного контента.

Свойства компонента Code

1. children Содержит текст кода, который нужно отобразить. Обычно это строка или JSX-элемент.

2. variant Определяет визуальный стиль компонента. Chakra UI поддерживает несколько вариантов:

  • subtle — легкая подсветка кода, минималистичный фон.
  • solid — сплошной цветной фон, выделяет код максимально.
<Code variant="solid" colorScheme="yellow">
  yarn add @chakra-ui/react
</Code>

3. colorScheme Позволяет выбрать цветовую палитру из предопределенных схем Chakra UI (red, blue, green, yellow и др.). Цвет применяется к фону и тексту в зависимости от выбранного variant.

4. size Контролирует размер текста. Доступные варианты: sm, md, lg.

<Code size="lg" colorScheme="green">
  console.log('Hello, Chakra!');
</Code>

5. as Позволяет рендерить компонент как другой HTML-элемент. Часто используется для семантической разметки: pre, span, kbd и т.д.

<Code as="kbd">Ctrl + C</Code>

Интеграция с компонентом pre

Для отображения многострочного кода часто используется комбинация <pre> + <Code>, чтобы сохранить форматирование и переносы строк.

import { Code, Box } from '@chakra-ui/react';

function MultiLineCode() {
  return (
    <Box bg="gray.800" p={4} borderRadius="md">
      <Code as="pre" colorScheme="pink">
{`function greet(name) {
  return 'Hello, ' + name;
}`}
      </Code>
    </Box>
  );
}

Здесь используется обертка Box для управления фоном, отступами и скруглениями. Комбинация as="pre" и colorScheme позволяет получить стильный блок многострочного кода.

Комбинация с другими компонентами Chakra UI

1. Встраивание кода в текст:

<Text>
  Для установки Chakra UI используйте <Code>npm install @chakra-ui/react</Code>.
</Text>

2. Визуальные подсказки и клавиши:

<Code as="kbd">Cmd + K</Code>

3. Использование с Tooltip для пояснения кода:

import { Tooltip, Code } from '@chakra-ui/react';

<Tooltip label="Это команда для установки">
  <Code>npm install @chakra-ui/react</Code>
</Tooltip>

Советы по стилю и адаптивности

  • Выбор контраста: Для темной темы использовать светлые цветовые схемы (pink, yellow), для светлой — темные (blue, purple).
  • Многострочные блоки: всегда оборачивать в Box или VStack, чтобы контролировать ширину и перенос строк.
  • Интеграция с темами: Code наследует глобальные настройки шрифтов и цветов из темы Chakra UI, что позволяет поддерживать единый стиль интерфейса.
  • Клавиши и горячие комбинации: as="kbd" всегда семантически корректно, улучшает доступность и SEO.

Пример комплексного применения

import { Box, Code, Text, VStack } from '@chakra-ui/react';

function CodeDemo() {
  return (
    <VStack spacing={4} align="start">
      <Text>
        Установите пакет: <Code>npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion</Code>
      </Text>

      <Box bg="gray.700" p={4} borderRadius="md" width="100%">
        <Code as="pre" colorScheme="teal">
{`import { ChakraProvider } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <YourComponent />
    </ChakraProvider>
  );
}`}
        </Code>
      </Box>

      <Text>
        Используйте комбинацию клавиш <Code as="kbd">Ctrl + C</Code> для копирования.
      </Text>
    </VStack>
  );
}

В этом примере демонстрируются: встроенный код, многострочный блок и клавиатурная комбинация. Все элементы стилизованы единообразно с помощью свойств Chakra UI.

Хотя Code из Chakra UI прост в использовании, правильное сочетание с другими компонентами позволяет создавать чистые, читабельные и визуально приятные блоки кода как для документации, так и для интерфейсов приложений.

Оглавление