Option

Option — презентационный примитив выбираемой строки, который переиспользуют спископодобные контролы.

Обзор

Стили Option построены на токенах и сосредоточены на высоте строки, цвете текста и цветах фона для разных состояний.

Публичные CSS-переменные

Переменная	Значение	Влияет на
высота строкикорень		В этом состоянии изменений не видно
коэффициент скруглениякорень		В этом состоянии изменений не видно
цвет текстакорень		В этом состоянии изменений не видно
фон по умолчаниюкорень		В этом состоянии изменений не видно
фон при наведениикорень		В этом состоянии изменений не видно
фон в активном состояниикорень		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные частей

Корень

Корень сопоставляет размер с высотой строки, отступами и масштабом текста. Выбранное состояние переназначает токены цвета и фона на основную палитру.

Взаимодействие состояний и вариантов

размер управляет высотой и типографикой
aria-selected='true' переназначает вариант на основные цвета выбранного состояния
отключённое состояние делает строку неинтерактивной

Примеры

Поверхность выбранного варианта

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

LTRRTL

selected-option-surface.tsx · 17 строк

import { Option } from '@vega-ui/react';
import './examples.css';

export default function SelectedOptionSurface() {
  return (
    <div
      role='listbox'
      aria-label='Delivery speed'
      className='option-brand-list'
      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3)', width: '100%', maxWidth: 260, padding: 'var(--spacing-4)', borderRadius: 'var(--spacing-8)', background: 'var(--surface-secondary)', border: '1px solid var(--separator-opaque)', boxSizing: 'border-box' }}
    >
      <Option>Standard, 5–7 days</Option>

Не переопределяйте

не делайте выбранные и невыбранные строки визуально неразличимыми
не вкладывайте в строку конкурирующие интерактивные элементы