LayoutApi

You can use the Layout utility to adjust your content based on the user's screen size. Layout returns 'compact' on mobile devices and at narrow screen widths, and 'regular' otherwise.

import {extend, Text} from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {
  const {layout} = api;
  const currentLayoutText = root.createText(`The current layout is: ${layout.initialValue.horizontal}`);

  layout.setOnChange((newLayout) => {
    currentLayoutText.updateText(`The current layout is: ${newLayout.horizontal}`)
  });

  root.appendChild(currentLayoutText);
  root.mount();
});

import React from 'react';
import {extend, render, useLayout, Text} from '@shopify/admin-ui-extensions-react';

function App() {
  const layout = useLayout();

  return <Text>{`The current layout is: ${layout.horizontal}`}</Text>;
}

extend(
  'Admin::Product::SubscriptionPlan::Add',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Anchor to LayoutLayout