@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generated/docs/components_components-alert-docs.md +1054 -0
- package/generated/docs/components_components-autocomplete-docs.md +3304 -0
- package/generated/docs/components_components-autocomplete-recipes-docs.md +98 -0
- package/generated/docs/components_components-badge-docs.md +312 -0
- package/generated/docs/components_components-button-docs.md +2339 -0
- package/generated/docs/components_components-buttongroup-docs.md +980 -0
- package/generated/docs/components_components-card-docs.md +1970 -0
- package/generated/docs/components_components-checkbox-docs.md +1083 -0
- package/generated/docs/components_components-checkboxgroup-docs.md +1597 -0
- package/generated/docs/components_components-checkboxgroup-recipes-docs.md +209 -0
- package/generated/docs/components_components-col-docs.md +755 -0
- package/generated/docs/components_components-container-docs.md +172 -0
- package/generated/docs/components_components-divider-docs.md +235 -0
- package/generated/docs/components_components-expander-docs.md +428 -0
- package/generated/docs/components_components-field-docs.md +3345 -0
- package/generated/docs/components_components-filter-docs.md +4091 -0
- package/generated/docs/components_components-hide-docs.md +450 -0
- package/generated/docs/components_components-icon-docs.md +1017 -0
- package/generated/docs/components_components-image-docs.md +168 -0
- package/generated/docs/components_components-inline-docs.md +1962 -0
- package/generated/docs/components_components-input-docs.md +1388 -0
- package/generated/docs/components_components-input-recipes-docs.md +349 -0
- package/generated/docs/components_components-inputcurrency-docs.md +636 -0
- package/generated/docs/components_components-inputcurrency-recipes-docs.md +208 -0
- package/generated/docs/components_components-introduction-docs.md +448 -0
- package/generated/docs/components_components-label-docs.md +229 -0
- package/generated/docs/components_components-link-docs.md +454 -0
- package/generated/docs/components_components-menu-docs.md +2219 -0
- package/generated/docs/components_components-menu-menuitem-docs.md +1455 -0
- package/generated/docs/components_components-modal-docs.md +2002 -0
- package/generated/docs/components_components-panel-docs.md +342 -0
- package/generated/docs/components_components-placeholder-docs.md +98 -0
- package/generated/docs/components_components-popover-docs.md +1631 -0
- package/generated/docs/components_components-popover-recipes-docs.md +537 -0
- package/generated/docs/components_components-progress-docs.md +128 -0
- package/generated/docs/components_components-provider-docs.md +123 -0
- package/generated/docs/components_components-radio-docs.md +499 -0
- package/generated/docs/components_components-radiogroup-docs.md +1573 -0
- package/generated/docs/components_components-readonly-docs.md +277 -0
- package/generated/docs/components_components-richselect-docs.md +6101 -0
- package/generated/docs/components_components-row-docs.md +2172 -0
- package/generated/docs/components_components-select-docs.md +1110 -0
- package/generated/docs/components_components-skeleton-docs.md +467 -0
- package/generated/docs/components_components-skeleton-recipes-docs.md +110 -0
- package/generated/docs/components_components-skiplink-docs.md +220 -0
- package/generated/docs/components_components-slideout-docs.md +1910 -0
- package/generated/docs/components_components-slider-docs.md +1284 -0
- package/generated/docs/components_components-spinner-docs.md +90 -0
- package/generated/docs/components_components-stack-docs.md +730 -0
- package/generated/docs/components_components-table-docs.md +4038 -0
- package/generated/docs/components_components-tabset-docs.md +955 -0
- package/generated/docs/components_components-tabset-tab-docs.md +342 -0
- package/generated/docs/components_components-tag-docs.md +410 -0
- package/generated/docs/components_components-text-docs.md +593 -0
- package/generated/docs/components_components-toaster-docs.md +451 -0
- package/generated/docs/components_components-toggle-docs.md +513 -0
- package/generated/docs/components_components-tooltip-docs.md +564 -0
- package/generated/docs/components_components-validationmessage-docs.md +608 -0
- package/generated/docs/components_contact-us-docs.md +9 -0
- package/generated/docs/components_foundations-accessibility-docs.md +33 -0
- package/generated/docs/components_foundations-consistency-docs.md +44 -0
- package/generated/docs/components_foundations-content-docs.md +18 -0
- package/generated/docs/components_foundations-introduction-docs.md +17 -0
- package/generated/docs/components_foundations-principles-docs.md +60 -0
- package/generated/docs/components_foundations-responsive-layout-docs.md +2692 -0
- package/generated/docs/components_foundations-user-experience-docs.md +53 -0
- package/generated/docs/components_foundations-visual-design-docs.md +39 -0
- package/generated/docs/components_foundations-z-index-stacking-docs.md +288 -0
- package/generated/docs/components_frequently-asked-questions-docs.md +44 -0
- package/generated/docs/components_get-started-develop-docs.md +47 -0
- package/generated/docs/components_get-started-using-storybook-docs.md +55 -0
- package/generated/docs/components_introduction-docs.md +85 -0
- package/generated/docs/components_patterns-form-docs.md +2469 -0
- package/generated/docs/components_patterns-form-recipes-docs.md +1597 -0
- package/generated/docs/components_patterns-introduction-docs.md +31 -0
- package/generated/docs/components_patterns-loading-docs.md +1908 -0
- package/generated/docs/components_patterns-shadow-docs.md +195 -0
- package/generated/docs/components_resources-code-katas-docs.md +25 -0
- package/generated/docs/components_resources-introduction-docs.md +28 -0
- package/generated/docs/components_resources-mcp-server-docs.md +23 -0
- package/generated/docs/components_resources-migration-guides-from-v4-to-v5-docs.md +142 -0
- package/generated/docs/components_styling-props-colour-docs.md +91 -0
- package/generated/docs/components_styling-props-elevation-docs.md +69 -0
- package/generated/docs/components_styling-props-radius-docs.md +63 -0
- package/generated/docs/components_styling-props-reference-docs.md +160 -0
- package/generated/docs/components_styling-props-screen-readers-docs.md +66 -0
- package/generated/docs/components_styling-props-sizing-docs.md +217 -0
- package/generated/docs/components_styling-props-spacing-docs.md +545 -0
- package/generated/docs/components_styling-props-typography-docs.md +66 -0
- package/generated/docs/components_versions-docs.md +14 -0
- package/generated/docs/guidelines.md +3083 -0
- package/generated/docs/introduction-docs.md +37 -0
- package/generated/docs/tokens_colour-docs.md +479 -0
- package/generated/docs/tokens_elevation-docs.md +39 -0
- package/generated/docs/tokens_introduction-docs.md +150 -0
- package/generated/docs/tokens_radius-docs.md +67 -0
- package/generated/docs/tokens_spacing-docs.md +87 -0
- package/generated/docs/tokens_typography-docs.md +305 -0
- package/package.json +2 -2
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
Panel
|
|
2
|
+
=====
|
|
3
|
+
|
|
4
|
+
Overview
|
|
5
|
+
--------
|
|
6
|
+
|
|
7
|
+
A panel is used to group related content.
|
|
8
|
+
|
|
9
|
+
* * *
|
|
10
|
+
|
|
11
|
+
Updated
|
|
12
|
+
|
|
13
|
+
**Recently updated**
|
|
14
|
+
|
|
15
|
+
This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
|
|
16
|
+
|
|
17
|
+
[](./iframe.html?id=components-panel--default)
|
|
18
|
+
|
|
19
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
<IressPanel\>
|
|
24
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
25
|
+
</IressPanel\>
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Props
|
|
30
|
+
-----
|
|
31
|
+
|
|
32
|
+
| Name | Description | Default | Control |
|
|
33
|
+
| --- | --- | --- | --- |
|
|
34
|
+
| children |
|
|
35
|
+
Content to be grouped using a panel.
|
|
36
|
+
|
|
37
|
+
ReactNode
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
| \- | Choose option...nonetextparagraphsstory |
|
|
42
|
+
| noBorderRadius |
|
|
43
|
+
|
|
44
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
45
|
+
|
|
46
|
+
boolean
|
|
47
|
+
|
|
48
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
49
|
+
|
|
50
|
+
| \- | Set boolean |
|
|
51
|
+
|
|
52
|
+
Examples
|
|
53
|
+
--------
|
|
54
|
+
|
|
55
|
+
### Background
|
|
56
|
+
|
|
57
|
+
By default, panels use the `colour.neutral.10` token. For most applications, this is the preferred background as panels are usually placed on a `colour.neutral.20` background.
|
|
58
|
+
|
|
59
|
+
However, there are times when a panel needs to be placed on a different background. In these cases, you can use [the `bg` prop](/docs/styling-props-colour--docs#bg) to set the background to a different colour.
|
|
60
|
+
|
|
61
|
+
[](./iframe.html?id=components-panel--bg)
|
|
62
|
+
|
|
63
|
+
(default)
|
|
64
|
+
---------
|
|
65
|
+
|
|
66
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
67
|
+
|
|
68
|
+
Primary `bg`
|
|
69
|
+
------------
|
|
70
|
+
|
|
71
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
72
|
+
|
|
73
|
+
Transparent `bg`
|
|
74
|
+
----------------
|
|
75
|
+
|
|
76
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
<IressContainer\>
|
|
81
|
+
<IressRow gutter\="spacing.400"\>
|
|
82
|
+
<IressCol\>
|
|
83
|
+
<IressPanel\>
|
|
84
|
+
<IressText element\="h2"\>
|
|
85
|
+
(default) </IressText\>
|
|
86
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
87
|
+
</IressCol\>
|
|
88
|
+
<IressCol\>
|
|
89
|
+
<IressPanel
|
|
90
|
+
bg\="colour.primary.fill"
|
|
91
|
+
color\="colour.primary.onFill"
|
|
92
|
+
\>
|
|
93
|
+
<h2\>
|
|
94
|
+
Primary{' '}
|
|
95
|
+
<code\>
|
|
96
|
+
bg </code\>
|
|
97
|
+
</h2\>
|
|
98
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
99
|
+
</IressCol\>
|
|
100
|
+
<IressCol\>
|
|
101
|
+
<IressPanel bg\="transparent"\>
|
|
102
|
+
<IressText element\="h2"\>
|
|
103
|
+
Transparent{' '}
|
|
104
|
+
<code\>
|
|
105
|
+
bg </code\>
|
|
106
|
+
</IressText\>
|
|
107
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
108
|
+
</IressCol\>
|
|
109
|
+
</IressRow\>
|
|
110
|
+
</IressContainer\>
|
|
111
|
+
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
#### Props
|
|
115
|
+
|
|
116
|
+
| Name | Description | Default | Control |
|
|
117
|
+
| --- | --- | --- | --- |
|
|
118
|
+
| bg |
|
|
119
|
+
\-
|
|
120
|
+
|
|
121
|
+
| \- | \- |
|
|
122
|
+
| children |
|
|
123
|
+
|
|
124
|
+
Content to be grouped using a panel.
|
|
125
|
+
|
|
126
|
+
ReactNode
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
| \- | Choose option...nonetextparagraphsstory |
|
|
131
|
+
| color |
|
|
132
|
+
|
|
133
|
+
\-
|
|
134
|
+
|
|
135
|
+
| \- | \- |
|
|
136
|
+
| noBorderRadius |
|
|
137
|
+
|
|
138
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
139
|
+
|
|
140
|
+
boolean
|
|
141
|
+
|
|
142
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
143
|
+
|
|
144
|
+
| \- | Set boolean |
|
|
145
|
+
|
|
146
|
+
### Padding
|
|
147
|
+
|
|
148
|
+
Panel padding now is a global styling prop.
|
|
149
|
+
|
|
150
|
+
[](/?path=/docs/styling-props-spacing--docs#padding)
|
|
151
|
+
|
|
152
|
+
[Learn more](/?path=/docs/styling-props-spacing--docs#padding)
|
|
153
|
+
|
|
154
|
+
### Text align
|
|
155
|
+
|
|
156
|
+
Text alignment can be set to `inherit`, `left`, `center`, `right` or `justify`.
|
|
157
|
+
|
|
158
|
+
It's default value is `inherit`.
|
|
159
|
+
|
|
160
|
+
[](./iframe.html?id=components-panel--text-align)
|
|
161
|
+
|
|
162
|
+
inherit
|
|
163
|
+
-------
|
|
164
|
+
|
|
165
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
166
|
+
|
|
167
|
+
### Inherits center align of parent panel
|
|
168
|
+
|
|
169
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
170
|
+
|
|
171
|
+
left
|
|
172
|
+
----
|
|
173
|
+
|
|
174
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
175
|
+
|
|
176
|
+
center
|
|
177
|
+
------
|
|
178
|
+
|
|
179
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
180
|
+
|
|
181
|
+
right
|
|
182
|
+
-----
|
|
183
|
+
|
|
184
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
185
|
+
|
|
186
|
+
justify
|
|
187
|
+
-------
|
|
188
|
+
|
|
189
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
190
|
+
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
<IressStack gap\="md"\>
|
|
194
|
+
<IressPanel textAlign\="center"\>
|
|
195
|
+
<IressText element\="h2"\>
|
|
196
|
+
inherit </IressText\>
|
|
197
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. <IressPanel textAlign\="inherit"\>
|
|
198
|
+
<h3\>
|
|
199
|
+
Inherits center align of parent panel </h3\>
|
|
200
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
201
|
+
</IressPanel\>
|
|
202
|
+
<IressPanel textAlign\="left"\>
|
|
203
|
+
<IressText element\="h2"\>
|
|
204
|
+
left </IressText\>
|
|
205
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
206
|
+
<IressPanel textAlign\="center"\>
|
|
207
|
+
<IressText element\="h2"\>
|
|
208
|
+
center </IressText\>
|
|
209
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
210
|
+
<IressPanel textAlign\="right"\>
|
|
211
|
+
<IressText element\="h2"\>
|
|
212
|
+
right </IressText\>
|
|
213
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
214
|
+
<IressPanel textAlign\="justify"\>
|
|
215
|
+
<IressText element\="h2"\>
|
|
216
|
+
justify </IressText\>
|
|
217
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
218
|
+
</IressStack\>
|
|
219
|
+
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
#### Props
|
|
223
|
+
|
|
224
|
+
| Name | Description | Default | Control |
|
|
225
|
+
| --- | --- | --- | --- |
|
|
226
|
+
| children |
|
|
227
|
+
Content to be grouped using a panel.
|
|
228
|
+
|
|
229
|
+
ReactNode
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
| \- | Choose option...nonetextparagraphsstory |
|
|
234
|
+
| noBorderRadius |
|
|
235
|
+
|
|
236
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
237
|
+
|
|
238
|
+
boolean
|
|
239
|
+
|
|
240
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
241
|
+
|
|
242
|
+
| \- | Set boolean |
|
|
243
|
+
| textAlign |
|
|
244
|
+
|
|
245
|
+
\-
|
|
246
|
+
|
|
247
|
+
| \- | \- |
|
|
248
|
+
|
|
249
|
+
### Stretch
|
|
250
|
+
|
|
251
|
+
Panel can be set to fill its available container height by setting the `stretch` prop.
|
|
252
|
+
|
|
253
|
+
[](./iframe.html?id=components-panel--stretch)
|
|
254
|
+
|
|
255
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
256
|
+
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
<IressStack
|
|
260
|
+
style\={{
|
|
261
|
+
height: '200px'
|
|
262
|
+
}}
|
|
263
|
+
\>
|
|
264
|
+
<IressPanel stretch\>
|
|
265
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor. </IressPanel\>
|
|
266
|
+
</IressStack\>
|
|
267
|
+
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
#### Props
|
|
271
|
+
|
|
272
|
+
| Name | Description | Default | Control |
|
|
273
|
+
| --- | --- | --- | --- |
|
|
274
|
+
| children |
|
|
275
|
+
Content to be grouped using a panel.
|
|
276
|
+
|
|
277
|
+
ReactNode
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
|
|
281
|
+
| \- | Choose option...nonetextparagraphsstory |
|
|
282
|
+
| noBorderRadius |
|
|
283
|
+
|
|
284
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
285
|
+
|
|
286
|
+
boolean
|
|
287
|
+
|
|
288
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
289
|
+
|
|
290
|
+
| \- | Set boolean |
|
|
291
|
+
| stretch |
|
|
292
|
+
|
|
293
|
+
boolean
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
| \- | FalseTrue |
|
|
298
|
+
|
|
299
|
+
### Removing border radius
|
|
300
|
+
|
|
301
|
+
Panels can inherit the theme's border radius which may result in an undesirable look to those components that use panels internally such as slideouts. To remove rounding from all panels set the prop `borderRadius="none"` to ensure panels have a zero border radius.
|
|
302
|
+
|
|
303
|
+
[](./iframe.html?id=components-panel--no-border-radius)
|
|
304
|
+
|
|
305
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
306
|
+
|
|
307
|
+
```
|
|
308
|
+
|
|
309
|
+
<IressPanel borderRadius\="none"\>
|
|
310
|
+
His head is gone, it is like it is been erased... Erased from existence. That was the day I invented time travel. I remember it vividly. I was standing on the edge of my toilet hanging a clock, the porces was wet, I slipped, hit my head on the edge of the sink. And when I came to I had a revelation, a picture, a picture in my head, a picture of this. This is what makes time travel possible. The flux capacitor.
|
|
311
|
+
</IressPanel\>
|
|
312
|
+
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
#### Props
|
|
316
|
+
|
|
317
|
+
| Name | Description | Default | Control |
|
|
318
|
+
| --- | --- | --- | --- |
|
|
319
|
+
| borderRadius |
|
|
320
|
+
string
|
|
321
|
+
|
|
322
|
+
|
|
323
|
+
|
|
324
|
+
| \- | none |
|
|
325
|
+
| children |
|
|
326
|
+
|
|
327
|
+
Content to be grouped using a panel.
|
|
328
|
+
|
|
329
|
+
ReactNode
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
| \- | Choose option...nonetextparagraphsstory |
|
|
334
|
+
| noBorderRadius |
|
|
335
|
+
|
|
336
|
+
Setting to true will ignore the border radius set in the theme and set it to zero.
|
|
337
|
+
|
|
338
|
+
boolean
|
|
339
|
+
|
|
340
|
+
<table class="css-3nr4py"><tbody><tr><td colspan="2"><strong>Deprecated</strong>: Use `borderRadius="none"` instead.</td></tr></tbody></table>
|
|
341
|
+
|
|
342
|
+
| \- | Set boolean |
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
Placeholder
|
|
2
|
+
===========
|
|
3
|
+
|
|
4
|
+
Overview
|
|
5
|
+
--------
|
|
6
|
+
|
|
7
|
+
A placeholder is a UI element that allows you to reserve space for content that has not been created yet, usually used for prototyping.
|
|
8
|
+
|
|
9
|
+
* * *
|
|
10
|
+
|
|
11
|
+
Updated
|
|
12
|
+
|
|
13
|
+
**Recently updated**
|
|
14
|
+
|
|
15
|
+
This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
|
|
16
|
+
|
|
17
|
+
[](./iframe.html?id=components-placeholder--placeholder)
|
|
18
|
+
|
|
19
|
+
Placeholder
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
<IressPlaceholder
|
|
24
|
+
height\="300"
|
|
25
|
+
width\="300"
|
|
26
|
+
\>
|
|
27
|
+
Placeholder
|
|
28
|
+
</IressPlaceholder\>
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Props
|
|
33
|
+
-----
|
|
34
|
+
|
|
35
|
+
| Name | Description | Default | Control |
|
|
36
|
+
| --- | --- | --- | --- |
|
|
37
|
+
| children |
|
|
38
|
+
Description of the placeholder's envisioned contents.
|
|
39
|
+
|
|
40
|
+
ReactNode
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
| \- |
|
|
45
|
+
|
|
46
|
+
"Placeholder"
|
|
47
|
+
|
|
48
|
+
|
|
|
49
|
+
| height |
|
|
50
|
+
|
|
51
|
+
Sets the height of the placeholder.
|
|
52
|
+
|
|
53
|
+
union
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
|
58
|
+
|
|
59
|
+
'auto'
|
|
60
|
+
|
|
61
|
+
|
|
|
62
|
+
|
|
63
|
+
"300"
|
|
64
|
+
|
|
65
|
+
|
|
|
66
|
+
| stretch |
|
|
67
|
+
|
|
68
|
+
Sets the placeholder to be full width if true.
|
|
69
|
+
|
|
70
|
+
boolean
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
| \- | Set boolean |
|
|
75
|
+
| width |
|
|
76
|
+
|
|
77
|
+
Sets the width of the placeholder.
|
|
78
|
+
|
|
79
|
+
union
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
|
84
|
+
|
|
85
|
+
'auto'
|
|
86
|
+
|
|
87
|
+
|
|
|
88
|
+
|
|
89
|
+
"300"
|
|
90
|
+
|
|
91
|
+
|
|
|
92
|
+
|
|
93
|
+
Usage
|
|
94
|
+
-----
|
|
95
|
+
|
|
96
|
+
The `IressPlaceholder` component is a **last resort** component, as it provides very little context to the product team and/or user about what content will be placed in the placeholder.
|
|
97
|
+
|
|
98
|
+
It is recommended to use placeholders that emulate the content that will be placed in the placeholder, such as images or text that is similar to the final content. This will help the product team and/or user understand what to expect in the final product.
|