UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

84 lines (62 loc) • 2.31 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
--- name: Collapsible category: Behavior keywords: - hide - show - low priority - less important - disclosure - accordion - accordian - expand content - toggle - toggleable - reveal - show more - show all button - show hide - expanding view - collapse --- # Collapsible The collapsible component is used to put long sections of information under a block that can be expanded or collapsed by the merchant. Generally this is used for lower priority information or content that merchants don’t need to see all the time. --- ## Purpose Put the merchant first by identifying the problem they face and the component that helps them solve it. ### Problem Merchants may occasionally need access to information that might overwhelm the interface or push important details too far down the page. ### Solution The collapsible component lets merchants read longer form information on their own time. --- ## Best practices The collapsible component should: * Be used for information that is lower priority or that merchants don’t need to see all the time * Be shown by default in an expanded state when a merchant loads a screen * Not be used to hide error messages or other critical information that requires an immediate action --- ## Content guidelines There are no content elements that are specific to the collapsible component. Follow the [content guidelines for cards](/components/structure/card) to make sure your headings, body content, links, and buttons are written consistently and clearly. | Prop | Type | Description | | ---- | ---- | ----------- | | open | boolean | Toggle whether the collapsible is expanded or not. | | children | React.ReactNode | The content to display inside the collapsible. | ## Examples ### Default collapsible component Use for a basic “show more” interaction when you need to display more content. ```jsx <Collapsible open> <TextContainer> Your mailing list lets you contact customers or visitors who have shown an interest in your store. Reach out to them with exclusive offers or updates about your products. </TextContainer> </Collapsible> ``` --- ## Related components * To put long sections of information in a container that allows for scrolling, [use the scrollable component](/components/behavior/scrollable)