Use this to create a clear visual separation between different elements in your user interface.
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>
);
}
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);
},
);
Specify the direction of the divider.