Компонент Surface в WordPress: Руководство с примерами

Главная - WordPress Codex - Компонент Surface в WordPress: Руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент Surface в WordPress — это экспериментальный компонент, предназначенный для создания основного фона. В зависимости от настроек компонента можно управлять цветом и отображением границ, а также использовать различные стили фона, такие как точки или сетка.

Пример базового использования

В следующем примере Surface используется для отображения текста на фоне, который адаптируется под режимы светлого или тёмного экрана.

import {
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function BasicSurfaceExample() {
    return (
        <Surface>
            <Text>Код — это поэзия</Text>
        </Surface>
    );
}

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

Рассмотрим все параметры компонента Surface, чтобы понять, как управлять его внешним видом.

СвойствоТипПо умолчаниюОписание
backgroundSizenumber12Определяет размер сетки для вариантов фона «dotted» и «grid».
borderBottombooleanfalseОтображает нижнюю границу, если установлено в true.
borderLeftbooleanfalseОтображает левую границу, если установлено в true.
borderRightbooleanfalseОтображает правую границу, если установлено в true.
borderTopbooleanfalseОтображает верхнюю границу, если установлено в true.
variantstring‘primary’Управляет фоновым цветом и стилем Surface. Возможные значения: primary, secondary, tertiary, dotted, grid.

Пример с вариантами фона и границами

В этом примере показаны различные варианты фона Surface, а также добавление границ.

import {
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function SurfaceVariantsExample() {
    return (
        <div>
            <Surface variant="primary" borderBottom borderTop>
                <Text>Основной фон с верхней и нижней границей</Text>
            </Surface>
            <Surface variant="secondary" borderLeft borderRight>
                <Text>Вторичный фон с боковыми границами</Text>
            </Surface>
            <Surface variant="dotted" backgroundSize={8}>
                <Text>Фон с точками</Text>
            </Surface>
            <Surface variant="grid" backgroundSize={16}>
                <Text>Фон с сеткой</Text>
            </Surface>
        </div>
    );
}

Здесь:

  • Первый Surface имеет основной фон (primary) с верхней и нижней границами.
  • Второй Surface имеет вторичный фон (secondary) и боковые границы.
  • Третий Surface использует фон с точками (dotted) с размером ячеек 8 пикселей.
  • Четвёртый Surface демонстрирует сетку (grid) с размером ячеек 16 пикселей.

Пример с тернарным фоном (только в тёмном режиме)

Тернарный фон предназначен для редких случаев и отображается только в тёмном режиме. Его удобно использовать для элементов, которые должны быть выделены в темной цветовой схеме.

import {
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function TertiarySurfaceExample() {
    return (
        <Surface variant="tertiary">
            <Text>Фон в темном режиме</Text>
        </Surface>
    );
}

Заключение

Компонент Surface предоставляет простой способ управлять фоном и границами, добавляя эстетически приятные и функциональные элементы к пользовательскому интерфейсу. Используя различные параметры, такие как variant, backgroundSize и border-опции, можно создавать компоненты, которые гармонично адаптируются под различные цветовые схемы и стили WordPress.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg