DOCSEARCHbyAlgolia
Submit Docs

Polaris Vue

website·Indexed 30 days ago

https://ownego.github.io/polaris-vue/

A Vue.js implementation of the Polaris design system, providing a comprehensive library of components including AppProvider, DataTable, IndexTable, Modal, Popover, and various skeleton loading states to build Shopify-consistent user interfaces.

Tokens
24.6K
Snippets
33
Records
229
Agent score
75%

What's inside Polaris Vue

  1. Initialize global settings with the App provider

    The App provider is a required component in polaris-vue. It must be placed at the root of your application to enable the sharing of global settings throughout the entire component hierarchy.

  2. Use the Tag component for object categorization

    The Tag component is used to represent interactive, merchant-supplied keywords that help label, organize, and categorize objects. Tags are designed to be added or removed by merchants.

    Best Practices:

    • Place tags close to or within the input control used to add and remove them.
    • To implement the actual adding/removing functionality, use the TextField component.
    • If the goal is to show the status of an object rather than a categorizing keyword, use the Badge component instead.

  4. Use Text container for vertical spacing of text elements

    The Text container component is designed to wrap text elements—such as paragraphs, headings, and lists—to ensure consistent vertical spacing. When choosing spacing, use tight spacing for closely related content topics and loose spacing to separate independent concepts.

  5. Use the Pagination component to navigate ordered collections

    The Pagination component allows users to move through an ordered collection of items split into pages. On the web, this is achieved via buttons; on mobile platforms (iOS and Android), it is implemented as infinite scrolling.

  6. Use the Legacy Card component for grouping content

    The Legacy Card component is used to group similar concepts and tasks together to improve scannability and readability for merchants. Note that this is a legacy version of the component and is being updated to a more flexible and composable API.

  7. Use the ColorPicker component for visual color selection

    The ColorPicker component allows users (merchants) to select colors visually, such as when customizing accent colors for email templates. To support the selection of transparent colors, enable the alpha slider.

  8. Use the Option List component for selection menus

    The Option List component is used to create a list of grouped items for single or multiple selection. It is designed to be used as a standalone menu, typically appearing inside a popover, modal, or sidebar. Unlike Choice Lists, Option Lists should not be used within a form.

  9. Arrange form fields using Form Layout

    Use the Form Layout component to organize fields within a form. By default, it stacks fields vertically, but it also supports the creation of horizontal groups of fields to maintain standard spacing and alignment.

  10. Use the Banner component for important notifications

    The Banner component informs merchants about important changes or persistent conditions in a prominent way. It should be used sparingly for the most critical information and should not be the primary entry point for regular actions. Banners should be dismissible unless they contain critical information or a required step.

    Placement Guidelines:

    • Page-level: Place at the top of the page, below the page header, occupying the full width.
    • Section-level: Place inside a section (e.g., card, popover, modal) below the section heading.
    • Element-level: Place immediately above or below a specific element.

  11. Use BlockStack for vertical component layout

    The BlockStack component is used to display children vertically and horizontally with full width by default. It is based on CSS Flexbox. It should not be used for large-scale page layouts or complex, unique arrangements of components.

  12. Use the Badge component to indicate object tone or status

    The Badge component is used to inform users of the tone of an object or an action that has been taken. To ensure consistency and scannability, badges should use established color patterns, be clearly labeled with short text, and be positioned near the object they describe.