Bookend

Bookend sets the leading and/or trailing child to its inherent size while the remaining children fill the available space

Anchor to ExampleExample

import {extend, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const bookend = root.createComponent(Bookend, {trailing: true}, [

root.createComponent(TextField, {label: 'Discount'}),

root.createComponent(Button, {plain: true}, 'Apply'),

]);

root.appendChild(bookend);

});

import {render, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

<Button plain>Apply</Button>

</Bookend>

);

}

import {extend, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const bookend = root.createComponent(Bookend, {trailing: true}, [
    root.createComponent(TextField, {label: 'Discount'}),
    root.createComponent(Button, {plain: true}, 'Apply'),
  ]);

  root.appendChild(bookend);
});

import {render, Bookend, TextField, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <Bookend trailing>
      <TextField label="Discount" />
      <Button plain>Apply</Button>
    </Bookend>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
leading?	`boolean`	Sets the leading child to its inherent size
trailing?	`boolean`	Sets the trailing child to its inherent size
alignment?	`"leading" \| "center" \| "trailing"`	Position children along the cross axis
spacing?	`"xtight" \| "tight" \| "loose" \| "xloose"`	Adjust spacing between children

Was this page helpful?