MeterStack

MeterStack — составной компонент для сегментированных индикаторов.

Обзор

Стили MeterStack основаны на токенах и намеренно минимальны. Корень задаёт высоту дорожки, промежуток и фон, а каждый сегмент — собственную пропорциональную ширину и цвет.

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

Storage46 of 64 GB

Переменная	Значение	Влияет на
высота дорожкикорень		В этом состоянии изменений не видно
коэффициент радиуса дорожкикорень		В этом состоянии изменений не видно
промежуток между сегментамикорень		В этом состоянии изменений не видно
текущее итоговое значениекорень		В этом состоянии изменений не видно
расчёт пропорциональной шириныкорень и сегменты		В этом состоянии изменений не видно
доля ширины сегментасегмент		В этом состоянии изменений не видно
цвет заливки сегментасегмент		В этом состоянии изменений не видно
Коэффициент радиуса сегмента.`MeterStackSegment`		В этом состоянии изменений не видно

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

Переменные уровня частей

Корень

Корень переводит размер в высоту, применяет --fills-secondary как базовую дорожку и раскладывает сегменты через flex.

Сегмент

Каждый сегмент вычисляет ширину из value / max и может переопределить свой цвет через --meter-stack-segment-color.

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

размер меняет высоту дорожки
fullWidth задаёт ширину 100%
цвет задаётся для каждого сегмента, а не для всего корня

Примеры

Собственная синяя шкала

LTRRTL

custom-blue-scale.tsx · 12 строк

import { MeterStack, MeterStackSegment } from '@vega-ui/react';
import { CSSProperties } from 'react';

export default function CustomBlueScale() {
  return (
    <MeterStack value={0.85} max={1} role='group' aria-label='Traffic by region' size='lg' fullWidth>
      <MeterStackSegment value={0.4} aria-label='Europe' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-700)' } as CSSProperties} />
      <MeterStackSegment value={0.3} aria-label='North America' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-500)' } as CSSProperties} />
      <MeterStackSegment value={0.15} aria-label='Asia' style={{ '--meter-stack-segment-color': 'var(--color-blue-accent-300)' } as CSSProperties} />
    </MeterStack>
  );
}

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

не задавайте ширину сегментов, не отражающую реальные значения
не убирайте контраст между базовой дорожкой и сегментами