Divider
Use this to create a clear visual separation between different elements in your user interface.
Anchor to dividerpropsDividerProps
- Anchor to directiondirection"inline" | "block"Default: 'inline'
Specify the direction of the divider.
DividerProps
- direction
Specify the direction of the divider.
"inline" | "block"
export interface DividerProps {
/**
* Specify the direction of the divider.
*
* @defaultValue 'inline'
* @defaultValue 'inline'
*/
direction?: 'inline' | 'block';
}Was this section helpful?
Simple Divider example
import React from 'react';
import {
render,
Divider,
BlockStack,
} from '@shopify/ui-extensions-react/admin';
render('Playground', () => <App />);
function App() {
return (
<BlockStack gap>
<>First text</>
<Divider />
<>Second Text</>
</BlockStack>
);
}
examples
Simple Divider example
React
import React from 'react'; import { render, Divider, BlockStack, } from '@shopify/ui-extensions-react/admin'; render('Playground', () => <App />); function App() { return ( <BlockStack gap> <>First text</> <Divider /> <>Second Text</> </BlockStack> ); }JS
import { extension, Divider, } from '@shopify/ui-extensions/admin'; export default extension( 'Playground', (root) => { const divier = root.createComponent(Divider); const firstText = root.createText('First Text'); const secondText = root.createText('Second Text'); root.appendChild(firstText); root.appendChild(divier); root.appendChild(secondText); }, );
Preview
