Невозможно отобразить этикетку с использованием компонента <Meter>из втулки - PullRequest
Новая
       59

Невозможно отобразить этикетку с использованием компонента <Meter>из втулки

0 голосов
/ 09 июля 2020

Я не могу отображать метку отдельно для своего графика. 

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box key={type} margin={{ bottom: 'xsmall' }}>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

здесь, он не отображает метку: шестьдесят на стороне графика. Не могли бы вы предложить мне, как мне отобразить это? Спасибо.

1 Ответ

0 голосов
/ 16 июля 2020

Вы можете разместить метку по своему усмотрению, используя компонент Text: 

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box gap="medium" key={type} margin={{ bottom: 'xsmall' }}>
        <Text>Label</Text>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

Подобным образом вы можете перемещать текст вокруг компонента, в настоящее время он будет отображаться сверху, но вы можете переместить его, чтобы разместить его внизу, слева, справа от измерителя, и даже использовать компонент Stack для размещения метки в середине измерителя, я надеюсь, что это ответит на ваш вопрос.

...