reactjs - 无法使用显示标签扣眼组件

Question

我无法为我的图表单独显示标签。

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 />);

在这里，它不显示 label: 图表一侧的六十。你能建议我如何让这个显示。谢谢。

Answer 1

您可以使用 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 />);

以类似的方式，您可以在组件周围移动 Text，目前它会显示在顶部，但您可以将其移动到 Meter 的底部、左侧、右侧，甚至可以使用 Stack 组件把标签放在仪表的中间，我希望它能回答你的问题。