Use this to display a block of text similar to the `<p>` tag in HTML.
import {
render,
BlockStack,
Paragraph,
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => <App />);
function App() {
return (
<BlockStack inlineAlignment='center' gap>
<Paragraph fontWeight='bold'>Name:</Paragraph>
<Paragraph>Jane Doe</Paragraph>
</BlockStack>
)
}
import {extend, Paragraph, BlockStack} from '@shopify/ui-extensions/admin';
extend('Playground', (root) => {
const paragraph = root.createComponent(BlockStack, {inlineAlignment: 'center', gap: true}, [
root.createComponent(Paragraph, {fontWeight: 'bold'}, 'Name:'),
root.createComponent(Paragraph, {}, 'Jane Doe'),
]);
root.appendChild(paragraph);
});
Size of the typography's font.
Use to emphasize a word or a group of words.
Sets the weight of the font.
A unique identifier for the element.
Set how hidden overflow content is signaled to users.
'small-300' | 'small-200' | 'small-100' | 'base' | 'large-100' | 'large-200' | 'large-300'
'italic' | 'normal'
'light-300' | 'light-200' | 'light-100' | 'light' | 'base' | 'normal' | 'bold' | 'bold-100' | 'bold-200' | 'bold-300'
'ellipsis'