Skip to content Shopify logo Polaris

特克斯t container

A text container is used to wrap text elements such as paragraphs, headings, and lists to give them vertical spacing.

Use this component for default vertical spacing.

import{特克斯tContainer,Heading}from'@shopify/polaris';importReactfrom'react';function特克斯tContainerExample(){return(<特克斯tContainer><Heading>Install the ShopifyPOS应用程序</Heading><p>ShopifyPOSis the easiest way to sell your productsinperson.AvailableforiPad,iPhone,and Android.</p></特克斯tContainer>);}

Props

Want to help make this feature better? Pleaseshare your feedback.

interface 特克斯tContainerProps
spacing? 'tight'|'loose'

The amount of vertical spacing children will get between them.
children? React.ReactNode

The content to render in the text container.

Best practices

The closer the spacing, the closer the relationship between content topics. The closeness visually represents the relationship.

  • Use tight spacing to relate content topics to each other
  • Use loose spacing to separate concepts that are independent of each other
  • For more layout variations, or if you’re looking to vertically space components other than text, useStack.