Demos
Label textData-value goes here
Code Editor
<ValueBlock label="Label text">Data-value goes here</ValueBlock>
Inline
this is before the value Foo Bar this is after the value
Code Editor
<P> this is before the value <ValueBlock inline>Foo</ValueBlock>{' '} <ValueBlock inline>Bar</ValueBlock> this is after the value </P>
Help button
Label textData-value goes here
Code Editor
<ValueBlock label="Label text" help={{ title: 'Help title', content: 'Help content', }} > Data-value goes here </ValueBlock>
Help button with HTML
Label text with a long label label – lorem ipsum dolor sitData-value goes here – lorem ipsum dolor sit amet consectetur.
Code Editor
<ValueBlock label="Label text with a long label label – lorem ipsum dolor sit" help={{ open: true, title: <strong>Help title</strong>, content: ( <> Help content with a <Anchor href="/">Anchor</Anchor>. </> ), }} > Data-value goes here – lorem ipsum dolor sit amet consectetur. </ValueBlock>
Widths
This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='small': This label is long so we can validate that the label can be longer.This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='medium': This label is long so we can validate that the label can be longer.This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='large': This label is long so we can validate that the label can be longer.This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.
maxWidth='auto': This label is long so we can validate that the label can be longer.This content is long so we can see the maxWidth defined. It should wrap at a certain amount of characters.