skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
44
comments
7%
passed
6
failed
6
coverage
67%

Value

avatar of atanasster
grommet-controls
3.0.2

A single value visualization with a label.

Component

browse
docs
issues
import { Value } from 'grommet-controls';

Main

30%
last quarter sales
browse
docs
issues
props => (
  <Box direction="row">
    <Box basis="small">
      <Value {...props} />
    </Box>
  </Box>
)

Properties

Name
Description
Default
Controls
label

Value label

ReactNode
undefined
color

The value color

ColorType
undefined
value

The value

ReactNode
undefined
weight

Font weight

numbernormalbold
bold
gap

Spacing between the value and the label

string
small
size

Value element size

xsmallsmallmediumlargexlargexxlarge
large
units

'Units' string

string
-

Commits

Date
Author
Commit Message
8/31/2020

atanasster

avatar of atanasster
update stories titles and navigation
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/29/2019

atanasster

avatar of atanasster
stories cleanup, welcome page.mdx
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
4 commits

External dependencies

package
imports
peer
grommet
^2.15.0
TextBox
*
react
^17.0.1
React
*

Internal dependencies

file
imports
"./ValueProps"
IValueProps

Component JSX

<Box
gap
>
grommet
^2.15.0
<Text
sizeweightcolor
/>
grommet
^2.15.0
<Box
alignSelf
>
grommet
^2.15.0
<Text
sizecolor
/>
grommet
^2.15.0

Stories

Label

30%
a descriptive label
browse
docs
issues
() => (
  <Value value="30%" label="a descriptive label" />
)

Value

30%
custom value
browse
docs
issues
() => (
  <Value
    value={
      <Box direction="row" align="center" gap="xsmall">
        <Text size="large" weight="bold" color="status-error">
          30%
        </Text>
        <Down color="status-error" />
      </Box>
    }
    label="custom value"
  />
)

Color

30%
status-ok
browse
docs
issues
() => (
  <Value label="status-ok" value="30%" color="status-ok" />
)

Weight

30%
normal
30%
bold
30%
400
browse
docs
issues
() => (
  <Box direction="row">
    <Box basis="small" gap="small">
      <Value weight="normal" value="30%" label="normal" />
      <Value weight="bold" value="30%" label="bold" />
      <Value weight={400} value="30%" label="400" />
    </Box>
  </Box>
)

Size

30%
xsmall
30%
small
30%
medium
30%
large
30%
xlarge
30%
xxlarge
browse
docs
issues
() => (
  <Box direction="row">
    <Box basis="small" gap="small">
      <Value size="xsmall" value="30%" label="xsmall" />
      <Value size="small" value="30%" label="small" />
      <Value size="medium" value="30%" label="medium" />
      <Value size="large" value="30%" label="large" />
      <Value size="xlarge" value="30%" label="xlarge" />
      <Value size="xxlarge" value="30%" label="xxlarge" />
    </Box>
  </Box>
)
Previous
controls/Tag
Next
layout/Header