@coinbase/cds-mcp-server 8.21.8 → 8.22.2
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/CHANGELOG.md +12 -0
- package/mcp-docs/mobile/components/AreaChart.txt +39 -37
- package/mcp-docs/mobile/components/Avatar.txt +18 -18
- package/mcp-docs/mobile/components/AvatarButton.txt +19 -19
- package/mcp-docs/mobile/components/Banner.txt +62 -23
- package/mcp-docs/mobile/components/BarChart.txt +37 -35
- package/mcp-docs/mobile/components/Box.txt +18 -18
- package/mcp-docs/mobile/components/BrowserBar.txt +18 -18
- package/mcp-docs/mobile/components/Button.txt +19 -19
- package/mcp-docs/mobile/components/Carousel.txt +18 -18
- package/mcp-docs/mobile/components/CartesianChart.txt +75 -44
- package/mcp-docs/mobile/components/CheckboxCell.txt +19 -19
- package/mcp-docs/mobile/components/Chip.txt +20 -20
- package/mcp-docs/mobile/components/Coachmark.txt +18 -18
- package/mcp-docs/mobile/components/ContentCard.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardBody.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardFooter.txt +18 -18
- package/mcp-docs/mobile/components/ContentCardHeader.txt +18 -18
- package/mcp-docs/mobile/components/ContentCell.txt +18 -18
- package/mcp-docs/mobile/components/ControlGroup.txt +18 -18
- package/mcp-docs/mobile/components/DatePicker.txt +1 -1
- package/mcp-docs/mobile/components/Divider.txt +18 -18
- package/mcp-docs/mobile/components/DotCount.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +2 -2
- package/mcp-docs/mobile/components/Fallback.txt +18 -18
- package/mcp-docs/mobile/components/HStack.txt +18 -18
- package/mcp-docs/mobile/components/Icon.txt +6 -0
- package/mcp-docs/mobile/components/IconButton.txt +19 -19
- package/mcp-docs/mobile/components/InputChip.txt +20 -20
- package/mcp-docs/mobile/components/Interactable.txt +19 -19
- package/mcp-docs/mobile/components/LineChart.txt +1608 -898
- package/mcp-docs/mobile/components/Link.txt +18 -18
- package/mcp-docs/mobile/components/ListCell.txt +37 -19
- package/mcp-docs/mobile/components/Lottie.txt +18 -18
- package/mcp-docs/mobile/components/MediaChip.txt +20 -20
- package/mcp-docs/mobile/components/MultiContentModule.txt +18 -18
- package/mcp-docs/mobile/components/NavigationTitle.txt +18 -18
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +18 -18
- package/mcp-docs/mobile/components/Numpad.txt +18 -18
- package/mcp-docs/mobile/components/Overlay.txt +18 -18
- package/mcp-docs/mobile/components/PageFooter.txt +17 -17
- package/mcp-docs/mobile/components/PageHeader.txt +17 -17
- package/mcp-docs/mobile/components/PeriodSelector.txt +26 -26
- package/mcp-docs/mobile/components/Point.txt +203 -98
- package/mcp-docs/mobile/components/Pressable.txt +19 -19
- package/mcp-docs/mobile/components/ProgressBar.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +1 -1
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +1 -1
- package/mcp-docs/mobile/components/ProgressCircle.txt +1 -1
- package/mcp-docs/mobile/components/RadioCell.txt +19 -19
- package/mcp-docs/mobile/components/ReferenceLine.txt +197 -54
- package/mcp-docs/mobile/components/RollingNumber.txt +18 -18
- package/mcp-docs/mobile/components/Scrubber.txt +597 -79
- package/mcp-docs/mobile/components/SegmentedTabs.txt +18 -18
- package/mcp-docs/mobile/components/SelectAlpha.txt +1 -1
- package/mcp-docs/mobile/components/SelectChip.txt +20 -20
- package/mcp-docs/mobile/components/SlideButton.txt +19 -19
- package/mcp-docs/mobile/components/Spacer.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractive.txt +3 -3
- package/mcp-docs/mobile/components/Spinner.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +18 -18
- package/mcp-docs/mobile/components/TabLabel.txt +18 -18
- package/mcp-docs/mobile/components/TabNavigation.txt +18 -18
- package/mcp-docs/mobile/components/TabbedChips.txt +18 -18
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +1 -1
- package/mcp-docs/mobile/components/Tabs.txt +18 -18
- package/mcp-docs/mobile/components/Tag.txt +18 -18
- package/mcp-docs/mobile/components/Text.txt +18 -18
- package/mcp-docs/mobile/components/Toast.txt +18 -18
- package/mcp-docs/mobile/components/Tooltip.txt +17 -1
- package/mcp-docs/mobile/components/TopNavBar.txt +18 -18
- package/mcp-docs/mobile/components/VStack.txt +18 -18
- package/mcp-docs/mobile/components/XAxis.txt +86 -24
- package/mcp-docs/mobile/components/YAxis.txt +75 -17
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AreaChart.txt +523 -301
- package/mcp-docs/web/components/Avatar.txt +27 -27
- package/mcp-docs/web/components/AvatarButton.txt +28 -28
- package/mcp-docs/web/components/Banner.txt +71 -32
- package/mcp-docs/web/components/BarChart.txt +182 -313
- package/mcp-docs/web/components/Box.txt +28 -28
- package/mcp-docs/web/components/Button.txt +28 -28
- package/mcp-docs/web/components/Calendar.txt +27 -27
- package/mcp-docs/web/components/Carousel.txt +27 -27
- package/mcp-docs/web/components/CartesianChart.txt +62 -309
- package/mcp-docs/web/components/CheckboxCell.txt +25 -25
- package/mcp-docs/web/components/Chip.txt +27 -27
- package/mcp-docs/web/components/Coachmark.txt +27 -27
- package/mcp-docs/web/components/ContainedAssetCard.txt +27 -27
- package/mcp-docs/web/components/ContentCard.txt +28 -28
- package/mcp-docs/web/components/ContentCardBody.txt +28 -28
- package/mcp-docs/web/components/ContentCardFooter.txt +28 -28
- package/mcp-docs/web/components/ContentCardHeader.txt +28 -28
- package/mcp-docs/web/components/ContentCell.txt +28 -28
- package/mcp-docs/web/components/ControlGroup.txt +27 -27
- package/mcp-docs/web/components/Divider.txt +27 -27
- package/mcp-docs/web/components/Fallback.txt +28 -28
- package/mcp-docs/web/components/FloatingAssetCard.txt +27 -27
- package/mcp-docs/web/components/Grid.txt +28 -28
- package/mcp-docs/web/components/GridColumn.txt +27 -27
- package/mcp-docs/web/components/HStack.txt +28 -28
- package/mcp-docs/web/components/Icon.txt +27 -27
- package/mcp-docs/web/components/IconButton.txt +28 -28
- package/mcp-docs/web/components/InputChip.txt +27 -27
- package/mcp-docs/web/components/Interactable.txt +28 -28
- package/mcp-docs/web/components/LineChart.txt +1598 -1116
- package/mcp-docs/web/components/Link.txt +28 -28
- package/mcp-docs/web/components/ListCell.txt +48 -30
- package/mcp-docs/web/components/Lottie.txt +27 -27
- package/mcp-docs/web/components/MediaChip.txt +27 -27
- package/mcp-docs/web/components/Modal.txt +27 -27
- package/mcp-docs/web/components/ModalBody.txt +27 -27
- package/mcp-docs/web/components/ModalFooter.txt +27 -27
- package/mcp-docs/web/components/ModalHeader.txt +27 -27
- package/mcp-docs/web/components/MultiContentModule.txt +28 -28
- package/mcp-docs/web/components/NavigationBar.txt +5 -5
- package/mcp-docs/web/components/NudgeCard.txt +27 -27
- package/mcp-docs/web/components/Overlay.txt +27 -27
- package/mcp-docs/web/components/PageFooter.txt +26 -26
- package/mcp-docs/web/components/PageHeader.txt +26 -26
- package/mcp-docs/web/components/Pagination.txt +27 -27
- package/mcp-docs/web/components/PeriodSelector.txt +49 -49
- package/mcp-docs/web/components/Point.txt +228 -79
- package/mcp-docs/web/components/Pressable.txt +28 -28
- package/mcp-docs/web/components/RadioCell.txt +25 -25
- package/mcp-docs/web/components/ReferenceLine.txt +208 -60
- package/mcp-docs/web/components/RemoteImage.txt +26 -26
- package/mcp-docs/web/components/RollingNumber.txt +28 -28
- package/mcp-docs/web/components/Scrubber.txt +463 -68
- package/mcp-docs/web/components/SectionHeader.txt +27 -27
- package/mcp-docs/web/components/SegmentedTabs.txt +27 -27
- package/mcp-docs/web/components/SelectChip.txt +27 -27
- package/mcp-docs/web/components/SelectOption.txt +27 -27
- package/mcp-docs/web/components/Sidebar.txt +27 -27
- package/mcp-docs/web/components/SidebarItem.txt +27 -27
- package/mcp-docs/web/components/Spacer.txt +34 -34
- package/mcp-docs/web/components/SparklineInteractive.txt +1 -1
- package/mcp-docs/web/components/Spinner.txt +27 -27
- package/mcp-docs/web/components/Stepper.txt +27 -27
- package/mcp-docs/web/components/TabLabel.txt +27 -27
- package/mcp-docs/web/components/TabNavigation.txt +26 -26
- package/mcp-docs/web/components/TabbedChips.txt +26 -26
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +27 -27
- package/mcp-docs/web/components/Tag.txt +27 -27
- package/mcp-docs/web/components/Text.txt +28 -28
- package/mcp-docs/web/components/TileButton.txt +28 -28
- package/mcp-docs/web/components/Toast.txt +27 -27
- package/mcp-docs/web/components/Tooltip.txt +17 -1
- package/mcp-docs/web/components/VStack.txt +28 -28
- package/mcp-docs/web/components/XAxis.txt +86 -22
- package/mcp-docs/web/components/YAxis.txt +133 -89
- package/package.json +1 -1
|
@@ -134,8 +134,8 @@ _The link text must have a 3:1 contrast ratio from the surrounding non-link text
|
|
|
134
134
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
135
135
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
136
136
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
137
|
-
| `as` | `symbol \| object \| style \|
|
|
138
|
-
| `aspectRatio` |
|
|
137
|
+
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
138
|
+
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
139
139
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
140
140
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
141
141
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
@@ -160,35 +160,35 @@ _The link text must have a 3:1 contrast ratio from the surrounding non-link text
|
|
|
160
160
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
161
161
|
| `className` | `string` | No | `-` | Apply class names to the outer container. |
|
|
162
162
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
163
|
-
| `columnGap` | `0 \|
|
|
163
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
164
164
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
165
165
|
| `disabled` | `boolean` | No | `-` | Is the element currently disabled. |
|
|
166
166
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
167
167
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
168
168
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
169
169
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
170
|
-
| `flexGrow` |
|
|
171
|
-
| `flexShrink` |
|
|
170
|
+
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
171
|
+
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
172
172
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
173
173
|
| `focusable` | `boolean` | No | `-` | - |
|
|
174
174
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
175
175
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
176
176
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
177
177
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
178
|
-
| `gap` | `0 \|
|
|
179
|
-
| `grid` |
|
|
180
|
-
| `gridArea` |
|
|
178
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
179
|
+
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
180
|
+
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
181
181
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
182
|
-
| `gridAutoFlow` |
|
|
182
|
+
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
|
|
183
183
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
184
|
-
| `gridColumn` |
|
|
185
|
-
| `gridColumnEnd` |
|
|
186
|
-
| `gridColumnStart` |
|
|
187
|
-
| `gridRow` |
|
|
188
|
-
| `gridRowEnd` |
|
|
189
|
-
| `gridRowStart` |
|
|
190
|
-
| `gridTemplate` |
|
|
191
|
-
| `gridTemplateAreas` |
|
|
184
|
+
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
185
|
+
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
186
|
+
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
187
|
+
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
188
|
+
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
189
|
+
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
190
|
+
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
191
|
+
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
192
192
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
193
193
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
194
194
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
@@ -209,35 +209,35 @@ _The link text must have a 3:1 contrast ratio from the surrounding non-link text
|
|
|
209
209
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
210
210
|
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
211
211
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
212
|
-
| `opacity` |
|
|
212
|
+
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
213
213
|
| `openInNewWindow` | `boolean` | No | `false` | Determines whether the link opens in a new window. - true: Opens the link in a new window. - false: Replaces the current screen with the link. This prop is only applicable when rendering the Link as an anchor (as=a). |
|
|
214
214
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
215
|
-
| `padding` | `0 \|
|
|
216
|
-
| `paddingBottom` | `0 \|
|
|
217
|
-
| `paddingEnd` | `0 \|
|
|
218
|
-
| `paddingStart` | `0 \|
|
|
219
|
-
| `paddingTop` | `0 \|
|
|
220
|
-
| `paddingX` | `0 \|
|
|
221
|
-
| `paddingY` | `0 \|
|
|
215
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
216
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
217
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
218
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
219
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
220
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
221
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
222
222
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
223
223
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
224
224
|
| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
|
|
225
225
|
| `ref` | `any` | No | `-` | - |
|
|
226
226
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
227
|
-
| `rowGap` | `0 \|
|
|
227
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
228
228
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
229
229
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
230
230
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
231
231
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
232
232
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
233
233
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
234
|
-
| `transform` |
|
|
234
|
+
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
235
235
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
236
236
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
237
237
|
| `underline` | `boolean` | No | `-` | Set text decoration to underline. |
|
|
238
238
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
239
239
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
240
240
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
241
|
-
| `zIndex` |
|
|
241
|
+
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
242
242
|
|
|
243
243
|
|
|
@@ -107,6 +107,7 @@ We have deprecated `CellMedia`; pass media directly as shown below.
|
|
|
107
107
|
- In condensed spacing (`spacingVariant="condensed"`), the title shows up to two lines by default, regardless of whether a description is present.
|
|
108
108
|
- In normal and compact spacing, the title shows up to two lines when there is no description; if a description is present, the title is limited to one line.
|
|
109
109
|
- Use `disableMultilineTitle` to force the title to one line in all cases.
|
|
110
|
+
- When provided, the subtitle renders between the title and description and always truncates to a single line. Use `subtitleNode` if you need custom layout or multi-line behavior.
|
|
110
111
|
|
|
111
112
|
::::warning
|
|
112
113
|
The `title` and `description` props are rendered inside a CDS `Text` with default fonts and truncation. To render arbitrary React nodes without being wrapped by a `<Text>`, use `titleNode` and `descriptionNode`.
|
|
@@ -134,6 +135,21 @@ When using the Node props, you are responsible for styling, layout, and truncati
|
|
|
134
135
|
/>
|
|
135
136
|
```
|
|
136
137
|
|
|
138
|
+
#### Subtitle
|
|
139
|
+
|
|
140
|
+
Use `subtitle` to add one line of supplementary context between the title and description. The subtitle always truncates to a single line; provide a `subtitleNode` when you need your own truncation or layout logic.
|
|
141
|
+
|
|
142
|
+
```tsx live
|
|
143
|
+
<ListCell
|
|
144
|
+
spacingVariant="condensed"
|
|
145
|
+
media={<Avatar src={assets.btc.imageUrl} size="l" />}
|
|
146
|
+
title="Bitcoin"
|
|
147
|
+
subtitle="Deposit available in 1-2 days"
|
|
148
|
+
description="Ending in ••42"
|
|
149
|
+
detail="$12,345.00"
|
|
150
|
+
/>
|
|
151
|
+
```
|
|
152
|
+
|
|
137
153
|
#### Multiline Description
|
|
138
154
|
|
|
139
155
|
```tsx live
|
|
@@ -561,8 +577,8 @@ Mapping to `styles` / `classNames` keys:
|
|
|
561
577
|
| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| space-between \| space-around \| space-evenly>` | No | `-` | - |
|
|
562
578
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
563
579
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
564
|
-
| `as` | `symbol \| object \| style \|
|
|
565
|
-
| `aspectRatio` |
|
|
580
|
+
| `as` | `symbol \| object \| style \| div \| a \| abbr \| address \| area \| article \| aside \| audio \| b \| base \| bdi \| bdo \| big \| blockquote \| body \| br \| button \| canvas \| caption \| center \| cite \| code \| col \| colgroup \| data \| datalist \| dd \| del \| details \| dfn \| dialog \| dl \| dt \| em \| embed \| fieldset \| figcaption \| figure \| footer \| form \| h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| head \| header \| hgroup \| hr \| html \| i \| iframe \| img \| input \| ins \| kbd \| keygen \| label \| legend \| li \| link \| main \| map \| mark \| menu \| menuitem \| meta \| meter \| nav \| noindex \| noscript \| ol \| optgroup \| option \| output \| p \| param \| picture \| pre \| progress \| q \| rp \| rt \| ruby \| s \| samp \| search \| slot \| script \| section \| select \| small \| source \| span \| strong \| sub \| summary \| sup \| table \| template \| tbody \| td \| textarea \| tfoot \| th \| thead \| time \| title \| tr \| track \| u \| ul \| var \| video \| wbr \| webview \| svg \| animate \| animateMotion \| animateTransform \| circle \| clipPath \| defs \| desc \| ellipse \| feBlend \| feColorMatrix \| feComponentTransfer \| feComposite \| feConvolveMatrix \| feDiffuseLighting \| feDisplacementMap \| feDistantLight \| feDropShadow \| feFlood \| feFuncA \| feFuncB \| feFuncG \| feFuncR \| feGaussianBlur \| feImage \| feMerge \| feMergeNode \| feMorphology \| feOffset \| fePointLight \| feSpecularLighting \| feSpotLight \| feTile \| feTurbulence \| filter \| foreignObject \| g \| image \| line \| linearGradient \| marker \| mask \| metadata \| mpath \| path \| pattern \| polygon \| polyline \| radialGradient \| rect \| set \| stop \| switch \| text \| textPath \| tspan \| use \| view \| ComponentClass<any, any> \| FunctionComponent<any>` | No | `-` | - |
|
|
581
|
+
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
566
582
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
567
583
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
568
584
|
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -584,9 +600,9 @@ Mapping to `styles` / `classNames` keys:
|
|
|
584
600
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
585
601
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
586
602
|
| `bottomContent` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | The content to display below the main cell content |
|
|
587
|
-
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
603
|
+
| `classNames` | `{ root?: string; media?: string \| undefined; intermediary?: string \| undefined; end?: string \| undefined; accessory?: string \| undefined; contentContainer?: string \| undefined; pressable?: string \| undefined; mainContent?: string \| undefined; helperText?: string \| undefined; title?: string \| undefined; subtitle?: string \| undefined; description?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
588
604
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
589
|
-
| `columnGap` | `0 \|
|
|
605
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
590
606
|
| `compact` | `boolean` | No | `-` | - |
|
|
591
607
|
| `contentClassName` | `string` | No | `-` | - |
|
|
592
608
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
@@ -603,27 +619,27 @@ Mapping to `styles` / `classNames` keys:
|
|
|
603
619
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | End-aligned content (e.g., CTA, form element, metric). Replacement for the deprecated action prop, and takes precedence over it. If the content is an action (like button, link, etc), we recommend avoiding use alongside onClick. If used alongside onClick, the end action is triggered first and then the onClick handler. |
|
|
604
620
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
605
621
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
606
|
-
| `flexGrow` |
|
|
607
|
-
| `flexShrink` |
|
|
622
|
+
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
623
|
+
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
608
624
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
609
625
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
610
626
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
611
627
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
612
628
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
613
|
-
| `gap` | `0 \|
|
|
614
|
-
| `grid` |
|
|
615
|
-
| `gridArea` |
|
|
629
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
630
|
+
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
631
|
+
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
616
632
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
617
|
-
| `gridAutoFlow` |
|
|
633
|
+
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
|
|
618
634
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
619
|
-
| `gridColumn` |
|
|
620
|
-
| `gridColumnEnd` |
|
|
621
|
-
| `gridColumnStart` |
|
|
622
|
-
| `gridRow` |
|
|
623
|
-
| `gridRowEnd` |
|
|
624
|
-
| `gridRowStart` |
|
|
625
|
-
| `gridTemplate` |
|
|
626
|
-
| `gridTemplateAreas` |
|
|
635
|
+
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
636
|
+
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
637
|
+
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
638
|
+
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
639
|
+
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
640
|
+
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
641
|
+
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
642
|
+
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
627
643
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
628
644
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
629
645
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
@@ -649,31 +665,33 @@ Mapping to `styles` / `classNames` keys:
|
|
|
649
665
|
| `onClick` | `MouseEventHandler<Element>` | No | `-` | Click handler. |
|
|
650
666
|
| `onKeyDown` | `KeyboardEventHandler<Element>` | No | `-` | Key down handler for keyboard interaction. |
|
|
651
667
|
| `onKeyUp` | `KeyboardEventHandler<Element>` | No | `-` | Key up handler for keyboard interaction. |
|
|
652
|
-
| `opacity` |
|
|
668
|
+
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
653
669
|
| `outerSpacing` | `CellSpacing` | No | `-` | The spacing to use on the parent wrapper of Cell |
|
|
654
670
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
655
|
-
| `padding` | `0 \|
|
|
656
|
-
| `paddingBottom` | `0 \|
|
|
657
|
-
| `paddingEnd` | `0 \|
|
|
658
|
-
| `paddingStart` | `0 \|
|
|
659
|
-
| `paddingTop` | `0 \|
|
|
660
|
-
| `paddingX` | `0 \|
|
|
661
|
-
| `paddingY` | `0 \|
|
|
671
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
672
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
673
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
674
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
675
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
676
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
677
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
662
678
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
663
679
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
664
680
|
| `priority` | `start \| end \| middle \| (start \| end \| middle)[]` | No | `-` | Which piece of content has the highest priority in regards to text truncation, growing, and shrinking. |
|
|
665
681
|
| `ref` | `any` | No | `-` | - |
|
|
666
682
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
667
|
-
| `rowGap` | `0 \|
|
|
683
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
668
684
|
| `selected` | `boolean` | No | `-` | Is the cell selected? Will apply a background and selected accessory. |
|
|
669
685
|
| `shouldOverflow` | `boolean` | No | `-` | - |
|
|
670
686
|
| `shouldTruncate` | `boolean` | No | `true` | Controls whether the main content should truncate with an ellipsis. Defaults to true (truncates) when not provided. |
|
|
671
687
|
| `spacingVariant` | `normal \| compact \| condensed` | No | `'normal'` | Spacing variant configuration. Deprecated value: compact. Prefer condensed. When spacingVariant=normal: 1. min-height is 80px 2. padding is var(--space-2) var(--space-3) 3. border-radius is var(--borderRadius-200) 4. when there is a description, titles numberOfLines={1} otherwise titles numberOfLines={2} 5. description and subdetail have font body When spacingVariant=compact: 1. same as spacingVariant=normal, except min-height is 40px When spacingVariant=condensed: 1. min-height is undefined 2. padding is var(--space-1) var(--space-2) 3. border-radius is --borderRadius-0 4. titles numberOfLines={2} 5. description and subdetail have font label2 |
|
|
672
688
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
673
|
-
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
689
|
+
| `styles` | `{ root?: CSSProperties; media?: CSSProperties \| undefined; intermediary?: CSSProperties \| undefined; end?: CSSProperties \| undefined; accessory?: CSSProperties \| undefined; contentContainer?: CSSProperties \| undefined; pressable?: CSSProperties \| undefined; mainContent?: CSSProperties \| undefined; helperText?: CSSProperties \| undefined; title?: CSSProperties \| undefined; subtitle?: CSSProperties \| undefined; description?: CSSProperties \| undefined; } \| undefined` | No | `-` | Styles for the components |
|
|
674
690
|
| `subdetail` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subdetail providing more information. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subdetailNode. |
|
|
675
691
|
| `subdetailFont` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | Font to apply to the subdetail text. |
|
|
676
692
|
| `subdetailNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subdetail. Takes precedence over subdetail. |
|
|
693
|
+
| `subtitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Subtitle to display below the title and above the description. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use subtitleNode. |
|
|
694
|
+
| `subtitleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render subtitle. Takes precedence over subtitle. |
|
|
677
695
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
678
696
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
679
697
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
@@ -681,11 +699,11 @@ Mapping to `styles` / `classNames` keys:
|
|
|
681
699
|
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Title of content. Max 1 line (with description) or 2 lines (without), otherwise will truncate. This prop is only intended to accept a string or Text component; other use cases, while allowed, are not supported and may result in unexpected behavior. For arbitrary content, use titleNode. |
|
|
682
700
|
| `titleNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | React node to render title. Takes precedence over title. |
|
|
683
701
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
684
|
-
| `transform` |
|
|
702
|
+
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
685
703
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
686
704
|
| `variant` | `warning \| positive \| negative \| foregroundMuted` | No | `-` | Variant color to apply to the subdetail text. |
|
|
687
705
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
688
706
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
689
|
-
| `zIndex` |
|
|
707
|
+
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
690
708
|
|
|
691
709
|
|
|
@@ -58,7 +58,7 @@ function BasicExample() {
|
|
|
58
58
|
| `source` | `LottieSource<string>` | Yes | `-` | The source of animation. Should be pulled from |
|
|
59
59
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
60
60
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
61
|
-
| `aspectRatio` |
|
|
61
|
+
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
62
62
|
| `autoplay` | `boolean` | No | `false` | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. |
|
|
63
63
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
64
64
|
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
@@ -81,32 +81,32 @@ function BasicExample() {
|
|
|
81
81
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
82
82
|
| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
|
|
83
83
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
84
|
-
| `columnGap` | `0 \|
|
|
84
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
85
85
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
86
86
|
| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
|
|
87
87
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
88
88
|
| `filterSize` | `FilterSizeConfig` | No | `-` | In order to render drop shadows, the filter size needs to be set to increase the render surface of the element. You can set the x, y, width and height of filters manually. |
|
|
89
89
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
90
|
-
| `flexGrow` |
|
|
91
|
-
| `flexShrink` |
|
|
90
|
+
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
91
|
+
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
92
92
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
93
93
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
94
94
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
95
95
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
96
|
-
| `gap` | `0 \|
|
|
97
|
-
| `grid` |
|
|
98
|
-
| `gridArea` |
|
|
96
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
97
|
+
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
98
|
+
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
99
99
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
100
|
-
| `gridAutoFlow` |
|
|
100
|
+
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
|
|
101
101
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
102
|
-
| `gridColumn` |
|
|
103
|
-
| `gridColumnEnd` |
|
|
104
|
-
| `gridColumnStart` |
|
|
105
|
-
| `gridRow` |
|
|
106
|
-
| `gridRowEnd` |
|
|
107
|
-
| `gridRowStart` |
|
|
108
|
-
| `gridTemplate` |
|
|
109
|
-
| `gridTemplateAreas` |
|
|
102
|
+
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
103
|
+
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
104
|
+
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
105
|
+
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
106
|
+
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
107
|
+
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
108
|
+
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
109
|
+
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
110
110
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
111
111
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
112
112
|
| `handlers` | `LottieEventHandlersMap` | No | `-` | - |
|
|
@@ -127,31 +127,31 @@ function BasicExample() {
|
|
|
127
127
|
| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
|
|
128
128
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
129
129
|
| `onAnimationFinish` | `(() => void)` | No | `-` | A callback function which will be called when animation is finished. Note that on mobile, this callback will be called only when loop is set to false. |
|
|
130
|
-
| `opacity` |
|
|
130
|
+
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
131
131
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
132
|
-
| `padding` | `0 \|
|
|
133
|
-
| `paddingBottom` | `0 \|
|
|
134
|
-
| `paddingEnd` | `0 \|
|
|
135
|
-
| `paddingStart` | `0 \|
|
|
136
|
-
| `paddingTop` | `0 \|
|
|
137
|
-
| `paddingX` | `0 \|
|
|
138
|
-
| `paddingY` | `0 \|
|
|
132
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
133
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
134
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
135
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
136
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
137
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
138
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
139
139
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
140
140
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
141
141
|
| `ref` | `((instance: LottiePlayer<LottieSource<any>> \| null) => void) \| RefObject<LottiePlayer<LottieSource<any>>> \| null` | No | `-` | - |
|
|
142
142
|
| `resizeMode` | `center \| cover \| contain` | No | `contain` | Determines how to resize the animated view when the frame doesnt match the raw image dimensions. Refer to React Native docs [here](https://facebook.github.io/react-native/docs/image.html#resizemode) |
|
|
143
143
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
144
|
-
| `rowGap` | `0 \|
|
|
144
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
145
145
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
146
146
|
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
|
|
147
147
|
| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | No | `-` | - |
|
|
148
148
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
149
149
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
150
150
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
151
|
-
| `transform` |
|
|
151
|
+
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
152
152
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
153
153
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
154
154
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
155
|
-
| `zIndex` |
|
|
155
|
+
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
156
156
|
|
|
157
157
|
|
|
@@ -158,7 +158,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
158
158
|
| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
159
159
|
| `alignSelf` | `ResponsiveProp<center \| normal \| auto \| start \| end \| flex-start \| flex-end \| self-start \| self-end \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
|
|
160
160
|
| `as` | `button` | No | `-` | - |
|
|
161
|
-
| `aspectRatio` |
|
|
161
|
+
| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
162
162
|
| `background` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | Background color of the overlay (element being interacted with). |
|
|
163
163
|
| `blendStyles` | `InteractableBlendStyles` | No | `-` | - |
|
|
164
164
|
| `block` | `boolean` | No | `-` | Set element to block and expand to 100% width. |
|
|
@@ -185,7 +185,7 @@ You can override the automatic spacing with custom values if needed.
|
|
|
185
185
|
| `className` | `string` | No | `-` | Apply class names to the outer container. |
|
|
186
186
|
| `classNames` | `{ root?: string; content?: string \| undefined; } \| undefined` | No | `-` | Class names for the components |
|
|
187
187
|
| `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
|
|
188
|
-
| `columnGap` | `0 \|
|
|
188
|
+
| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
189
189
|
| `compact` | `boolean` | No | `-` | Reduces spacing around Chip content |
|
|
190
190
|
| `contentStyle` | `CSSProperties` | No | `-` | - |
|
|
191
191
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
@@ -195,28 +195,28 @@ You can override the automatic spacing with custom values if needed.
|
|
|
195
195
|
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed after the value |
|
|
196
196
|
| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
|
|
197
197
|
| `flexDirection` | `ResponsiveProp<column \| row \| row-reverse \| column-reverse>` | No | `-` | - |
|
|
198
|
-
| `flexGrow` |
|
|
199
|
-
| `flexShrink` |
|
|
198
|
+
| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
199
|
+
| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
200
200
|
| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
|
|
201
201
|
| `focusable` | `boolean` | No | `-` | - |
|
|
202
202
|
| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
203
203
|
| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
|
|
204
204
|
| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
|
|
205
205
|
| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
|
|
206
|
-
| `gap` | `0 \|
|
|
207
|
-
| `grid` |
|
|
208
|
-
| `gridArea` |
|
|
206
|
+
| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
207
|
+
| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
208
|
+
| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
209
209
|
| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
|
|
210
|
-
| `gridAutoFlow` |
|
|
210
|
+
| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| dense` | No | `-` | - |
|
|
211
211
|
| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
|
|
212
|
-
| `gridColumn` |
|
|
213
|
-
| `gridColumnEnd` |
|
|
214
|
-
| `gridColumnStart` |
|
|
215
|
-
| `gridRow` |
|
|
216
|
-
| `gridRowEnd` |
|
|
217
|
-
| `gridRowStart` |
|
|
218
|
-
| `gridTemplate` |
|
|
219
|
-
| `gridTemplateAreas` |
|
|
212
|
+
| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
213
|
+
| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
214
|
+
| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
215
|
+
| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
216
|
+
| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
217
|
+
| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
218
|
+
| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
219
|
+
| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
220
220
|
| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
|
|
221
221
|
| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
|
|
222
222
|
| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
|
|
@@ -239,21 +239,21 @@ You can override the automatic spacing with custom values if needed.
|
|
|
239
239
|
| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
|
|
240
240
|
| `noScaleOnPress` | `boolean` | No | `-` | Dont scale element on press. |
|
|
241
241
|
| `numberOfLines` | `number` | No | `1` | How many lines the text in the chip will be broken into. |
|
|
242
|
-
| `opacity` |
|
|
242
|
+
| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
243
243
|
| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
|
|
244
|
-
| `padding` | `0 \|
|
|
245
|
-
| `paddingBottom` | `0 \|
|
|
246
|
-
| `paddingEnd` | `0 \|
|
|
247
|
-
| `paddingStart` | `0 \|
|
|
248
|
-
| `paddingTop` | `0 \|
|
|
249
|
-
| `paddingX` | `0 \|
|
|
250
|
-
| `paddingY` | `0 \|
|
|
244
|
+
| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
245
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
246
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
247
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
248
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
249
|
+
| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
250
|
+
| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
251
251
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
252
252
|
| `position` | `ResponsiveProp<fixed \| static \| relative \| absolute \| sticky>` | No | `-` | - |
|
|
253
253
|
| `pressed` | `boolean` | No | `-` | Is the element being pressed. Primarily a mobile feature, but can be used on the web. |
|
|
254
254
|
| `ref` | `((instance: HTMLDivElement \| HTMLButtonElement \| null) => void) \| RefObject<HTMLDivElement \| HTMLButtonElement> \| null` | No | `-` | - |
|
|
255
255
|
| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
|
|
256
|
-
| `rowGap` | `0 \|
|
|
256
|
+
| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
|
|
257
257
|
| `start` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | ReactNode placed before the value |
|
|
258
258
|
| `style` | `CSSProperties` | No | `-` | - |
|
|
259
259
|
| `styles` | `{ root?: CSSProperties; content?: CSSProperties \| undefined; } \| undefined` | No | `-` | Apply styles to the container and content. |
|
|
@@ -262,13 +262,13 @@ You can override the automatic spacing with custom values if needed.
|
|
|
262
262
|
| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
|
|
263
263
|
| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
|
|
264
264
|
| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
|
|
265
|
-
| `transform` |
|
|
265
|
+
| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
266
266
|
| `transparentWhileInactive` | `boolean` | No | `-` | Mark the background and border as transparent until the element is interacted with (hovered, pressed, etc). Must be used in conjunction with the pressed prop |
|
|
267
267
|
| `transparentWhilePressed` | `boolean` | No | `-` | Mark the background and border as transparent even while element is interacted with (elevation underlay issue). Must be used in conjunction with the pressed prop |
|
|
268
268
|
| `type` | `button \| submit \| reset` | No | `-` | - |
|
|
269
269
|
| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
|
|
270
270
|
| `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
|
|
271
271
|
| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
|
|
272
|
-
| `zIndex` |
|
|
272
|
+
| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
|
|
273
273
|
|
|
274
274
|
|