HeadingGroup

examples

• Simple HeadingGroup example

  React

  import {
      render,
      HeadingGroup,
      Heading,
    } from '@shopify/ui-extensions-react/admin';
  
    render('Playground', () => <App />);
  
    function App() {
      return (
        <>
          <Heading>Heading <h1></Heading>
  
          <HeadingGroup>
            <Heading>Heading <h2></Heading>
  
            <HeadingGroup>
              <Heading>Heading <h3></Heading>
            </HeadingGroup>
          </HeadingGroup>
        </>
      );
    }
  

  JS

  import {
      extend,
      HeadingGroup,
      Heading,
      BlockStack,
    } from '@shopify/ui-extensions/admin';
  
    extend('Playground', (root) => {
      const headingGroup = root.createComponent(BlockStack, undefined, [
        root.createComponent(Heading, undefined, 'Heading <h1>'),
        root.createComponent(HeadingGroup, undefined, [
          root.createComponent(Heading, undefined, 'Heading <h2>'),
          root.createComponent(HeadingGroup, undefined, [
            root.createComponent(Heading, undefined, 'Heading <h3>'),
          ]),
        ]),
      ]);
  
      root.appendChild(headingGroup);
    });