@coinbase/cds-mcp-server 8.66.2 → 9.0.0-rc.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 +8 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +4 -4
- package/mcp-docs/mobile/components/Alert.txt +2 -1
- package/mcp-docs/mobile/components/AreaChart.txt +40 -40
- package/mcp-docs/mobile/components/Avatar.txt +33 -33
- package/mcp-docs/mobile/components/AvatarButton.txt +35 -35
- package/mcp-docs/mobile/components/Banner.txt +55 -40
- package/mcp-docs/mobile/components/BarChart.txt +40 -40
- package/mcp-docs/mobile/components/Box.txt +34 -34
- package/mcp-docs/mobile/components/BrowserBar.txt +35 -35
- package/mcp-docs/mobile/components/Button.txt +52 -42
- package/mcp-docs/mobile/components/Calendar.txt +34 -34
- package/mcp-docs/mobile/components/Carousel.txt +48 -58
- package/mcp-docs/mobile/components/CartesianChart.txt +40 -40
- package/mcp-docs/mobile/components/CellMedia.txt +1 -1
- package/mcp-docs/mobile/components/Checkbox.txt +3 -3
- package/mcp-docs/mobile/components/CheckboxCell.txt +37 -37
- package/mcp-docs/mobile/components/CheckboxGroup.txt +4 -4
- package/mcp-docs/mobile/components/Chip.txt +39 -39
- package/mcp-docs/mobile/components/Coachmark.txt +39 -39
- package/mcp-docs/mobile/components/Collapsible.txt +2 -2
- package/mcp-docs/mobile/components/Combobox.txt +10 -10
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +7 -7
- package/mcp-docs/mobile/components/ContentCard.txt +37 -37
- package/mcp-docs/mobile/components/ContentCardBody.txt +42 -42
- package/mcp-docs/mobile/components/ContentCardFooter.txt +34 -34
- package/mcp-docs/mobile/components/ContentCardHeader.txt +41 -41
- package/mcp-docs/mobile/components/ContentCell.txt +49 -49
- package/mcp-docs/mobile/components/ControlGroup.txt +36 -36
- package/mcp-docs/mobile/components/DataCard.txt +47 -47
- package/mcp-docs/mobile/components/DateInput.txt +25 -22
- package/mcp-docs/mobile/components/DatePicker.txt +25 -22
- package/mcp-docs/mobile/components/Divider.txt +33 -33
- package/mcp-docs/mobile/components/DotCount.txt +4 -2
- package/mcp-docs/mobile/components/DotStatusColor.txt +1 -1
- package/mcp-docs/mobile/components/DotSymbol.txt +6 -6
- package/mcp-docs/mobile/components/Fallback.txt +32 -32
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +4 -4
- package/mcp-docs/mobile/components/HStack.txt +34 -34
- package/mcp-docs/mobile/components/HeroSquare.txt +1 -1
- package/mcp-docs/mobile/components/Icon.txt +3 -3
- package/mcp-docs/mobile/components/IconButton.txt +38 -58
- package/mcp-docs/mobile/components/InputChip.txt +39 -39
- package/mcp-docs/mobile/components/Interactable.txt +34 -34
- package/mcp-docs/mobile/components/Legend.txt +43 -41
- package/mcp-docs/mobile/components/LineChart.txt +40 -40
- package/mcp-docs/mobile/components/Link.txt +41 -38
- package/mcp-docs/mobile/components/ListCell.txt +52 -52
- package/mcp-docs/mobile/components/Lottie.txt +34 -34
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/mobile/components/MediaCard.txt +41 -41
- package/mcp-docs/mobile/components/MediaChip.txt +39 -39
- package/mcp-docs/mobile/components/MessagingCard.txt +42 -42
- package/mcp-docs/mobile/components/Modal.txt +6 -2
- package/mcp-docs/mobile/components/ModalBody.txt +8 -8
- package/mcp-docs/mobile/components/ModalFooter.txt +33 -33
- package/mcp-docs/mobile/components/ModalHeader.txt +34 -34
- package/mcp-docs/mobile/components/MultiContentModule.txt +40 -40
- package/mcp-docs/mobile/components/NavigationTitle.txt +38 -36
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +38 -36
- package/mcp-docs/mobile/components/NudgeCard.txt +6 -6
- package/mcp-docs/mobile/components/Numpad.txt +37 -37
- package/mcp-docs/mobile/components/Overlay.txt +33 -33
- package/mcp-docs/mobile/components/PageFooter.txt +36 -30
- package/mcp-docs/mobile/components/PageHeader.txt +38 -32
- package/mcp-docs/mobile/components/PercentageBarChart.txt +40 -40
- package/mcp-docs/mobile/components/PeriodSelector.txt +39 -39
- package/mcp-docs/mobile/components/Pictogram.txt +1 -1
- package/mcp-docs/mobile/components/Point.txt +2 -2
- package/mcp-docs/mobile/components/PortalProvider.txt +2 -2
- package/mcp-docs/mobile/components/Pressable.txt +36 -36
- package/mcp-docs/mobile/components/ProgressBar.txt +2 -2
- 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 +3 -3
- package/mcp-docs/mobile/components/Radio.txt +3 -3
- package/mcp-docs/mobile/components/RadioCell.txt +37 -37
- package/mcp-docs/mobile/components/RadioGroup.txt +3 -3
- package/mcp-docs/mobile/components/ReferenceLine.txt +1 -1
- package/mcp-docs/mobile/components/RemoteImage.txt +6 -6
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +1 -1
- package/mcp-docs/mobile/components/RollingNumber.txt +41 -39
- package/mcp-docs/mobile/components/Scrubber.txt +2 -2
- package/mcp-docs/mobile/components/SearchInput.txt +25 -22
- package/mcp-docs/mobile/components/SectionHeader.txt +7 -7
- package/mcp-docs/mobile/components/SegmentedTabs.txt +34 -34
- package/mcp-docs/mobile/components/Select.txt +3 -3
- package/mcp-docs/mobile/components/SelectAlpha.txt +10 -10
- package/mcp-docs/mobile/components/SelectChip.txt +42 -40
- package/mcp-docs/mobile/components/SelectChipAlpha.txt +11 -11
- package/mcp-docs/mobile/components/SelectOption.txt +10 -10
- package/mcp-docs/mobile/components/SlideButton.txt +40 -40
- package/mcp-docs/mobile/components/Spacer.txt +7 -7
- package/mcp-docs/mobile/components/Sparkline.txt +3 -3
- package/mcp-docs/mobile/components/SparklineGradient.txt +3 -3
- package/mcp-docs/mobile/components/SparklineInteractive.txt +6 -6
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +5 -5
- package/mcp-docs/mobile/components/Spinner.txt +2 -2
- package/mcp-docs/mobile/components/SpotIcon.txt +1 -1
- package/mcp-docs/mobile/components/SpotRectangle.txt +1 -1
- package/mcp-docs/mobile/components/SpotSquare.txt +1 -1
- package/mcp-docs/mobile/components/Stepper.txt +37 -36
- package/mcp-docs/mobile/components/Switch.txt +13 -3
- package/mcp-docs/mobile/components/TabIndicator.txt +1 -1
- package/mcp-docs/mobile/components/TabLabel.txt +39 -37
- package/mcp-docs/mobile/components/TabNavigation.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChips.txt +34 -34
- package/mcp-docs/mobile/components/TabbedChipsAlpha.txt +34 -34
- package/mcp-docs/mobile/components/Tabs.txt +34 -34
- package/mcp-docs/mobile/components/Tag.txt +41 -41
- package/mcp-docs/mobile/components/Text.txt +51 -58
- package/mcp-docs/mobile/components/TextInput.txt +25 -22
- package/mcp-docs/mobile/components/ThemeProvider.txt +3 -1
- package/mcp-docs/mobile/components/Toast.txt +34 -34
- package/mcp-docs/mobile/components/Tooltip.txt +2 -2
- package/mcp-docs/mobile/components/TopNavBar.txt +9 -9
- package/mcp-docs/mobile/components/Tray.txt +5 -3
- package/mcp-docs/mobile/components/UpsellCard.txt +15 -14
- package/mcp-docs/mobile/components/VStack.txt +34 -34
- package/mcp-docs/mobile/components/XAxis.txt +1 -1
- package/mcp-docs/mobile/components/YAxis.txt +1 -1
- package/mcp-docs/mobile/getting-started/installation.txt +9 -3
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/mobile/routes.txt +1 -1
- package/mcp-docs/web/components/AccordionItem.txt +4 -4
- package/mcp-docs/web/components/Alert.txt +3 -2
- package/mcp-docs/web/components/AreaChart.txt +63 -63
- package/mcp-docs/web/components/Avatar.txt +49 -49
- package/mcp-docs/web/components/AvatarButton.txt +54 -324
- package/mcp-docs/web/components/Banner.txt +71 -55
- package/mcp-docs/web/components/BarChart.txt +58 -58
- package/mcp-docs/web/components/Box.txt +49 -312
- package/mcp-docs/web/components/Button.txt +62 -324
- package/mcp-docs/web/components/Calendar.txt +49 -49
- package/mcp-docs/web/components/Carousel.txt +65 -72
- package/mcp-docs/web/components/CartesianChart.txt +63 -63
- package/mcp-docs/web/components/CellMedia.txt +1 -1
- package/mcp-docs/web/components/Checkbox.txt +9 -7
- package/mcp-docs/web/components/CheckboxCell.txt +52 -52
- package/mcp-docs/web/components/CheckboxGroup.txt +3 -3
- package/mcp-docs/web/components/Chip.txt +51 -51
- package/mcp-docs/web/components/Coachmark.txt +55 -55
- package/mcp-docs/web/components/Collapsible.txt +2 -2
- package/mcp-docs/web/components/Combobox.txt +8 -8
- package/mcp-docs/web/components/ContainedAssetCard.txt +60 -55
- package/mcp-docs/web/components/ContentCard.txt +54 -317
- package/mcp-docs/web/components/ContentCardBody.txt +57 -318
- package/mcp-docs/web/components/ContentCardFooter.txt +49 -312
- package/mcp-docs/web/components/ContentCardHeader.txt +56 -318
- package/mcp-docs/web/components/ContentCell.txt +63 -322
- package/mcp-docs/web/components/ControlGroup.txt +50 -50
- package/mcp-docs/web/components/DataCard.txt +60 -60
- package/mcp-docs/web/components/DateInput.txt +54 -54
- package/mcp-docs/web/components/DatePicker.txt +54 -54
- package/mcp-docs/web/components/Divider.txt +49 -49
- package/mcp-docs/web/components/DotCount.txt +3 -1
- package/mcp-docs/web/components/DotStatusColor.txt +1 -1
- package/mcp-docs/web/components/DotSymbol.txt +6 -6
- package/mcp-docs/web/components/Dropdown.txt +3 -3
- package/mcp-docs/web/components/Fallback.txt +49 -312
- package/mcp-docs/web/components/FloatingAssetCard.txt +53 -53
- package/mcp-docs/web/components/FullscreenAlert.txt +1 -1
- package/mcp-docs/web/components/FullscreenModal.txt +5 -4
- package/mcp-docs/web/components/FullscreenModalLayout.txt +3 -2
- package/mcp-docs/web/components/Grid.txt +51 -314
- package/mcp-docs/web/components/GridColumn.txt +48 -311
- package/mcp-docs/web/components/HStack.txt +49 -312
- package/mcp-docs/web/components/HeroSquare.txt +1 -1
- package/mcp-docs/web/components/Icon.txt +51 -51
- package/mcp-docs/web/components/IconButton.txt +51 -341
- package/mcp-docs/web/components/InputChip.txt +51 -51
- package/mcp-docs/web/components/Interactable.txt +48 -319
- package/mcp-docs/web/components/Legend.txt +62 -62
- package/mcp-docs/web/components/LineChart.txt +63 -63
- package/mcp-docs/web/components/Link.txt +48 -318
- package/mcp-docs/web/components/ListCell.txt +66 -325
- package/mcp-docs/web/components/Lottie.txt +49 -49
- package/mcp-docs/web/components/LottieStatusAnimation.txt +2 -2
- package/mcp-docs/web/components/MediaCard.txt +53 -53
- package/mcp-docs/web/components/MediaChip.txt +51 -51
- package/mcp-docs/web/components/MessagingCard.txt +54 -54
- package/mcp-docs/web/components/Modal.txt +51 -50
- package/mcp-docs/web/components/ModalBody.txt +49 -49
- package/mcp-docs/web/components/ModalFooter.txt +49 -49
- package/mcp-docs/web/components/ModalHeader.txt +50 -50
- package/mcp-docs/web/components/MultiContentModule.txt +55 -316
- package/mcp-docs/web/components/NavigationBar.txt +53 -53
- package/mcp-docs/web/components/NavigationTitle.txt +103 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +48 -48
- package/mcp-docs/web/components/NudgeCard.txt +53 -53
- package/mcp-docs/web/components/Overlay.txt +49 -49
- package/mcp-docs/web/components/PageFooter.txt +54 -48
- package/mcp-docs/web/components/PageHeader.txt +58 -52
- package/mcp-docs/web/components/Pagination.txt +49 -49
- package/mcp-docs/web/components/PercentageBarChart.txt +58 -58
- package/mcp-docs/web/components/PeriodSelector.txt +62 -62
- package/mcp-docs/web/components/Pictogram.txt +1 -1
- package/mcp-docs/web/components/Point.txt +5 -14
- package/mcp-docs/web/components/PopoverPanel.txt +1 -1
- package/mcp-docs/web/components/PortalProvider.txt +2 -2
- package/mcp-docs/web/components/Pressable.txt +48 -319
- package/mcp-docs/web/components/ProgressBar.txt +1 -1
- package/mcp-docs/web/components/ProgressCircle.txt +2 -2
- package/mcp-docs/web/components/Radio.txt +9 -7
- package/mcp-docs/web/components/RadioCell.txt +52 -52
- package/mcp-docs/web/components/RadioGroup.txt +3 -3
- package/mcp-docs/web/components/ReferenceLine.txt +2 -2
- package/mcp-docs/web/components/RemoteImage.txt +48 -48
- package/mcp-docs/web/components/RemoteImageGroup.txt +3 -3
- package/mcp-docs/web/components/RollingNumber.txt +51 -313
- package/mcp-docs/web/components/Scrubber.txt +2 -2
- package/mcp-docs/web/components/SearchInput.txt +56 -56
- package/mcp-docs/web/components/SectionHeader.txt +55 -55
- package/mcp-docs/web/components/SegmentedControl.txt +1 -1
- package/mcp-docs/web/components/SegmentedTabs.txt +49 -49
- package/mcp-docs/web/components/Select.txt +3 -3
- package/mcp-docs/web/components/SelectAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectChip.txt +55 -55
- package/mcp-docs/web/components/SelectChipAlpha.txt +8 -8
- package/mcp-docs/web/components/SelectOption.txt +56 -56
- package/mcp-docs/web/components/Sidebar.txt +66 -56
- package/mcp-docs/web/components/SidebarItem.txt +10 -111
- package/mcp-docs/web/components/SidebarMoreMenu.txt +2 -2
- package/mcp-docs/web/components/Spacer.txt +55 -318
- package/mcp-docs/web/components/Sparkline.txt +3 -3
- package/mcp-docs/web/components/SparklineGradient.txt +3 -3
- package/mcp-docs/web/components/SparklineInteractive.txt +4 -4
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +4 -4
- package/mcp-docs/web/components/Spinner.txt +49 -49
- package/mcp-docs/web/components/SpotIcon.txt +1 -1
- package/mcp-docs/web/components/SpotRectangle.txt +1 -1
- package/mcp-docs/web/components/SpotSquare.txt +1 -1
- package/mcp-docs/web/components/Stepper.txt +53 -53
- package/mcp-docs/web/components/Switch.txt +21 -7
- package/mcp-docs/web/components/TabIndicator.txt +1 -1
- package/mcp-docs/web/components/TabLabel.txt +50 -50
- package/mcp-docs/web/components/TabNavigation.txt +48 -48
- package/mcp-docs/web/components/TabbedChips.txt +49 -49
- package/mcp-docs/web/components/TabbedChipsAlpha.txt +49 -49
- package/mcp-docs/web/components/Table.txt +4 -4
- package/mcp-docs/web/components/TableCaption.txt +1 -1
- package/mcp-docs/web/components/TableCell.txt +2 -2
- package/mcp-docs/web/components/TableRow.txt +1 -1
- package/mcp-docs/web/components/Tabs.txt +49 -49
- package/mcp-docs/web/components/Tag.txt +52 -52
- package/mcp-docs/web/components/Text.txt +49 -312
- package/mcp-docs/web/components/TextInput.txt +56 -56
- package/mcp-docs/web/components/ThemeProvider.txt +24 -4
- package/mcp-docs/web/components/TileButton.txt +48 -318
- package/mcp-docs/web/components/Toast.txt +51 -51
- package/mcp-docs/web/components/Tooltip.txt +3 -3
- package/mcp-docs/web/components/Tray.txt +2 -2
- package/mcp-docs/web/components/UpsellCard.txt +15 -14
- package/mcp-docs/web/components/VStack.txt +49 -312
- package/mcp-docs/web/components/XAxis.txt +1 -1
- package/mcp-docs/web/components/YAxis.txt +1 -1
- package/mcp-docs/web/getting-started/installation.txt +13 -5
- package/mcp-docs/web/hooks/useMergeRefs.txt +5 -5
- package/mcp-docs/web/routes.txt +1 -1
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ The SparklineInteractive is used to display a Sparkline that has multiple time p
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { SparklineInteractive } from '@coinbase/cds-mobile
|
|
10
|
+
import { SparklineInteractive } from '@coinbase/cds-mobile/visualizations/sparkline'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -325,15 +325,15 @@ You can also provide custom styles, such as to remove bottom padding from the he
|
|
|
325
325
|
| `data` | `Record<Period, ChartData>` | No | `-` | Chart data bucketed by Period. Period is a string key |
|
|
326
326
|
| `disableHorizontalPadding` | `boolean` | No | `-` | The chart applies horizontal padding by default which is specified by the gutter. If the chart is placed in a container with padding then you can disable horizontal padding and set the gutter to match the container padding. |
|
|
327
327
|
| `disableScrubbing` | `boolean` | No | `false` | Disables the scrub user interaction from the chart |
|
|
328
|
-
| `fallback` | `null \| string \| number \| false \| true \| ReactElement<
|
|
328
|
+
| `fallback` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Fallback shown in the chart when data is not available. This is usually a loading state. |
|
|
329
329
|
| `fallbackType` | `positive \| negative` | No | `-` | If you use the default fallback then this specifies if the fallback line is decreasing or increasing |
|
|
330
330
|
| `fill` | `boolean` | No | `true` | Adds an area fill to the Sparkline |
|
|
331
331
|
| `fillType` | `dotted \| gradient` | No | `'gradient'` | Type of fill to use for the area |
|
|
332
332
|
| `formatHoverDate` | `((date: Date, period: Period) => string)` | No | `-` | Formats the date above the chart as you scrub. Omit this if you dont want to show the date as the user scrubs |
|
|
333
333
|
| `formatHoverPrice` | `((price: number) => string)` | No | `-` | Formats the price above the chart as you scrub. Omit this if you dont want to show the price as the user scrubs |
|
|
334
334
|
| `formatMinMaxLabel` | `ChartFormatAmount` | No | `-` | function used to format the amount of money used in the minMaxLabel |
|
|
335
|
-
| `gutter` | `0 \| 1 \| 2 \|
|
|
336
|
-
| `headerNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
335
|
+
| `gutter` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `3` | The amount of padding to apply to the left and right of the chart. The chart width is calculated by (screen width - 2* gutter). |
|
|
336
|
+
| `headerNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds a header node above the chart. It will be placed next to the period selector on web. |
|
|
337
337
|
| `headerTestID` | `string` | No | `-` | Test ID for the header |
|
|
338
338
|
| `hideMinMaxLabel` | `boolean` | No | `false` | Hides the min and max label |
|
|
339
339
|
| `hidePeriodSelector` | `boolean` | No | `false` | Hides the period selector at the bottom of the chart |
|
|
@@ -343,9 +343,9 @@ You can also provide custom styles, such as to remove bottom padding from the he
|
|
|
343
343
|
| `onScrubEnd` | `(() => void)` | No | `-` | Callback when a user finishes scrubbing |
|
|
344
344
|
| `onScrubStart` | `(() => void)` | No | `-` | Callback when the user starts scrubbing |
|
|
345
345
|
| `periodSelectorPlacement` | `above \| below` | No | `-` | Optional placement prop that position the period selector component above or below the chart |
|
|
346
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
346
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | Custom style for the root element. |
|
|
347
347
|
| `styles` | `{ header?: StyleProp<ViewStyle>; root?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for the component. |
|
|
348
|
-
| `timePeriodGutter` | `0 \| 1 \| 2 \|
|
|
348
|
+
| `timePeriodGutter` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | Optional gutter to add to the Period selector. This is useful if you choose to use the full screen width for the chart |
|
|
349
349
|
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |
|
|
350
350
|
|
|
351
351
|
|
|
@@ -7,7 +7,7 @@ The SparklineInteractiveHeader is used to display chart information that changes
|
|
|
7
7
|
## Import
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
|
-
import { SparklineInteractiveHeader } from '@coinbase/cds-mobile
|
|
10
|
+
import { SparklineInteractiveHeader } from '@coinbase/cds-mobile/visualizations/sparkline'
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
## Examples
|
|
@@ -108,14 +108,14 @@ The fill will be added by default
|
|
|
108
108
|
|
|
109
109
|
| Prop | Type | Required | Default | Description |
|
|
110
110
|
| --- | --- | --- | --- | --- |
|
|
111
|
-
| `defaultTitle` | `null \| string \| number \| false \| true \| ReactElement<
|
|
111
|
+
| `defaultTitle` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | Yes | `-` | Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates. |
|
|
112
112
|
| `compact` | `boolean` | No | `-` | Reduce the font size used for the header itself. |
|
|
113
113
|
| `defaultLabel` | `string` | No | `-` | Default label, changing this prop has no effect once the default is rendered. |
|
|
114
114
|
| `defaultSubHead` | `SparklineInteractiveSubHead` | No | `-` | Default SubHead, changing this prop has no effect once the default is rendered. |
|
|
115
115
|
| `key` | `Key \| null` | No | `-` | - |
|
|
116
|
-
| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<
|
|
117
|
-
| `ref` | `(
|
|
116
|
+
| `labelNode` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates. |
|
|
117
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
118
118
|
| `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 |
|
|
119
|
-
| `trailing` | `null \| string \| number \| false \| true \| ReactElement<
|
|
119
|
+
| `trailing` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Adds content next to the header. This is useful for interactive buttons |
|
|
120
120
|
|
|
121
121
|
|
|
@@ -95,7 +95,7 @@ The underlying `ActivityIndicator` provides built-in accessibility support. Use
|
|
|
95
95
|
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
96
96
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
97
97
|
| `size` | `number \| small \| large` | No | `-` | Size of the indicator. Small has a height of 20, large has a height of 36. enum(small, large) |
|
|
98
|
-
| `style` | `null \| false \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<
|
|
99
|
-
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. |
|
|
98
|
+
| `style` | `null \| false \| \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>>` | No | `-` | - |
|
|
99
|
+
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. 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 |
|
|
100
100
|
|
|
101
101
|
|
|
@@ -42,7 +42,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
42
42
|
| --- | --- | --- | --- | --- |
|
|
43
43
|
| `name` | `done \| warning \| error \| advancedTradeProduct \| arrowsUpDown \| assetHubProduct \| assetManagementProduct \| bank \| base \| borrowProduct \| cloudProduct \| coinbase \| commerceProduct \| custodyProduct \| delegateProduct \| derivativesProduct \| email \| exchangeProduct \| helpCenterProduct \| institutionalProduct \| learningRewardsProduct \| nftProduct \| nodeProduct \| participateProduct \| privateClientProduct \| rewardsProduct \| rosettaProduct \| shield \| venturesProduct \| wallet \| walletLogo \| 2fa \| authenticator \| bonusFivePercent \| bonusTwoPercent \| businessProduct \| chat \| coinbaseOneEarn \| coinbaseOneProductInvestWeekly \| creditCard \| delegate \| fast \| idVerification \| instoDelegate \| outage \| pieChart \| recurringPurchases \| send \| layeredNetworks \| noFees \| assetEmptyStateAa \| assetEmptyStateAb \| assetEmptyStateAc \| assetEmptyStateAd \| assetEmptyStateAe \| assetEmptyStateBa \| assetEmptyStateBb \| assetEmptyStateBc \| assetEmptyStateBd \| assetEmptyStateBe \| assetEmptyStateCa \| assetEmptyStateCb \| assetEmptyStateCc \| assetEmptyStateCd \| assetEmptyStateCe \| assetEmptyStateDa \| assetEmptyStateDb \| assetEmptyStateDc \| assetEmptyStateDd \| assetEmptyStateDe \| assetEmptyStateEa \| assetEmptyStateEb \| assetEmptyStateEc \| assetEmptyStateEd \| assetEmptyStateEe \| cb1Cash \| coinbaseOneChart \| coinbaseOneProduct \| contract \| dataMarketplace \| instantAccess \| instoAdvancedTradeProduct \| instoAssetHubProduct \| instoAuthenticator \| instoBorrowProduct \| instoBusinessProduct \| instoChat \| instoCloudProduct \| instoCoinbaseOneEarn \| instoCommerceProduct \| instoCustodyProduct \| instoDataMarketplace \| instoDerivativesProduct \| instoFast \| instoHelpCenterProduct \| instoIdVerification \| instoLayeredNetworks \| instoLearningRewardsProduct \| instoMultiCoin \| instoPaySDKProduct \| instoPieChart \| instoPrimeProduct \| instoPrivateClientProduct \| instoProductCoinbaseCard \| instoProductCompliance \| instoProductPro \| instoProductWallet \| instoRecurringPurchases \| instoRewardsProduct \| instoShield \| instoSignInProduct \| instoStakingProduct \| instoWalletAsAServiceProduct \| internationalExchangeProduct \| multiCoin \| paySDKProduct \| primeProduct \| productCoinbaseCard \| productCompliance \| productEarn \| productPro \| productWallet \| signInProduct \| stakingProduct \| walletAsAServiceProduct` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
44
|
| `dimension` | `32x32 \| 24x24` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
|
-
| `fallback` | `ReactElement<
|
|
45
|
+
| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
46
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
47
47
|
| `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 |
|
|
48
48
|
|
|
@@ -42,7 +42,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
42
42
|
| --- | --- | --- | --- | --- |
|
|
43
43
|
| `name` | `margin \| blockchain \| bridging \| calendar \| coinbaseOneLogo \| concierge \| diamond \| earn \| login \| nft \| securityShield \| staking \| tokenSales \| cb1BankTransfers \| ethStakingRewards \| futures \| globalTransactions \| governance \| instoKey \| lightningNetworkSend \| startToday \| usdcLoan \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| cardBoosted \| cbbtc \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOnePhoneLightning \| coinbaseOneRewards \| coinbaseOneSavingFunds \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| exploreDecentralizedApps \| fileYourCryptoTaxes \| fileYourCryptoTaxesCheck \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| graphChartTrading \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| leverage \| linkingYourWalletToYourCoinbaseAccount \| liquidationBufferGreen \| liquidationBufferRed \| liquidationBufferYellow \| marginWarning \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| portfolioPerformance \| poweredByEthereum \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| referralsBitcoin \| referralsCoinbaseOne \| referralsGenericCoin \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| addBank \| advancedTradeCharts \| apiKey \| appUpdate \| borrowLoan \| browserHistory \| cardWaitlist \| cbEth \| clawMachinePig \| coinGateway \| connectWalletTutorial \| creditCardExcitement \| creditCardExcitementCoinbaseOne \| cryptoEconomyCoin \| cryptoEconomyEurc \| cryptoEconomyUSDC \| currency \| derivativesLoop \| downloadCoinbaseWalletArrow \| downloadingStatement \| emptyNfts \| emptyTrading \| eth2SellSend \| eth2SendSell \| eth2SendSellTwo \| ethAddress \| ethStakeOrWrap \| ethStakeOrWrapTwo \| ethStakingMovement \| ethTrading \| ethTradingTwo \| ethWrappedStakingRewards \| faceId \| fiatInterest \| giftBoxRewards \| highFees \| insto \| instoAboutOnchain \| instoApiKey \| instoConsensusWaitingForApprovals \| instoCryptoAndMore \| instoCurrency \| instoDesignateSigner \| instoEmptyTrading \| instoEthStakingMovement \| instoGetStartedInMinutes \| instoMargin \| instoOnchainSetupInProgress \| instoQRCode \| instoRefreshKey \| instoSemiCustodial \| instoSetupComplete \| instoSetupOnchain \| leadingProtocol \| leadingProtocolMorpho \| ledgerFailed \| ledgerSignatureRejected \| lendGraph \| linkCoinbaseWallet \| loanValue \| noTransactions \| portfolioOverview \| portfolioOverviewRelaunch \| primeOrderConfirmation \| primePriceLadder \| primeTradePreferences \| protectedNotes \| ratDashboard \| ratFoundWallet \| ratMigration \| ratMigrationerror \| referralsBonus \| scanCode \| secureAccount \| sendingCrypto \| stakingUpgrade \| trade \| transferCoins \| transferEth \| transferFunds \| trustedContacts \| unauthorizedTransfers \| uob \| update \| uploadDocument \| usdcLoanEth \| walletReconnect \| walletReconnectSuccess \| wrapEthTwo \| yieldHolding` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
44
|
| `dimension` | `240x120` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
|
-
| `fallback` | `ReactElement<
|
|
45
|
+
| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
46
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
47
47
|
| `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 |
|
|
48
48
|
|
|
@@ -42,7 +42,7 @@ If `dimension` and `scaleMultiplier` are both provided the component will scale
|
|
|
42
42
|
| --- | --- | --- | --- | --- |
|
|
43
43
|
| `name` | `baseQuickBuy \| blockchain \| bridging \| coinbaseOneLogo \| earn \| nft \| options \| pieChartWithArrow \| priceAlerts \| refresh \| securityShield \| staking \| addCard \| baseCreatorCoin \| bonusFivePercent \| bonusTwoPercent \| cardBlocked \| cardDeclined \| coinbaseOneEarn \| coinbaseUnlockOffers \| ethStaking \| ethStakingRewards \| futures \| globalTransactions \| idError \| inrTrade \| instoAuthenticatorProgress \| lightningNetworkSend \| outage \| pieChartWithArrowBlue \| startToday \| wrapEth \| phoneNumber \| accessToAdvancedCharts \| addPhoneNumber \| advancedTrading \| advancedTradingChartsIndicatorsCandles \| advancedTradingUi \| appTrackingTransparency \| automaticPayments \| backedByUsDollar \| basedInUsa \| bigBtc \| borrowWallet \| browserExtension \| coinbaseCardLock \| coinbaseCardPocket \| coinbaseFees \| coinbaseOneDiscountedAmount \| coinbaseOneRewards \| coinbaseOneSavingFunds \| coinbaseOneTokenRewards \| coinbaseOneZeroPortal \| coinFifty \| collectingNfts \| commerceAccounting \| commerceInvoices \| completeAQuiz \| congratulationsOnEarningCrypto \| contactsListWarning \| crossBorderPayments \| cryptoAndMore \| cryptoApps \| cryptoAssets \| cryptoEconomy \| cryptoForBeginners \| cryptoPortfolio \| cryptoWallet \| decentralization \| decentralizedWebWeb3 \| defiDecentralizedBorrowingLending \| defiDecentralizedTradingExchange \| defiEarn \| defiHow \| defiRisk \| didDecentralizedIdentity \| digitalCollectibles \| documentCertified \| documentSuccess \| earnInterest \| earnToLearn \| encryptedEverything \| estimatedAmount \| focusLimitOrders \| freeBtc \| gainsAndLosses \| gasFeesNetworkFees \| getStartedInMinutes \| hardwareWallets \| holdCrypto \| holdingCrypto \| instoEthStakingRewards \| instoPrimeStaking \| instoStaking \| insuranceProtection \| invest \| layeredNetworks \| layerThree \| linkingYourWalletToYourCoinbaseAccount \| mining \| moneyDecentralized \| multicoinSupport \| multiPlatformMobileAppBrowserExtension \| multipleAccountsWalletsForOneUser \| noFees \| notificationsAlt \| onTheList \| openEmail \| optInPushNotificationsEmail \| p2pPayments \| performance \| portfolioPerformance \| poweredByEthereum \| predictionsMarkets \| primeDeFi \| primeEarn \| primeStaking \| quickAndSimple \| readyToTrade \| retailUSDCRewards \| secureAndTrusted \| secureGlobalTransactions \| secureStorage \| selfCustody \| semiCustodial \| sendCryptoFaster \| shareOnSocialMedia \| sidechain \| stableValue \| stayInControlSelfHostedWalletsStorage \| stressTestedColdStorage \| switchAdvancedToSimpleTrading \| taxesDetails \| tradeImmediately \| trendingHotAssets \| verifyEmail \| verifyInfo \| walletNotifications \| walletSecurity \| watchVideos \| eth2SendSell \| ethStakeOrWrap \| ethStakeOrWrapTwo \| linkCoinbaseWallet \| addEth \| addMultipleCrypto \| addPasswordProtection \| announcementAdvancedTrading \| assetForward \| assetRefresh \| baseCautionMedium \| baseChartMedium \| baseCheckMedium \| baseCheckTrophyMedium \| baseCoinCryptoMedium \| baseCoinNetworkMedium \| baseConnectMedium \| baseDecentralizationMedium \| baseDiamondMedium \| baseEmptyMedium \| baseErrorButterflyMedium \| baseErrorMedium \| baseIdMedium \| baseLoadingMedium \| baseLocationMedium \| baseMintNftMedium \| baseNetworkMedium \| baseNftMedium \| basePaycoinMedium \| basePeopleMedium \| basePiechartMedium \| baseRewardChest \| baseRewardClam \| baseRewardPlate \| baseRewardPodium \| baseRewardSun \| baseRewardTrophyEmblem \| baseRewardTrophyStars \| baseSecurityMedium \| baseSendMedium \| baseSwitch \| baseTargetMedium \| baseUsdcMedium \| boostedCard \| borrowLimitsAddressed \| bullishCase \| cardAnnouncement \| cardAutoReload \| cardShipped \| cbEthWrappingUnavailable \| checkVerifacation \| coinbaseCardSparkle \| coinbaseLock \| coinbaseOneBoostedCard \| coinbaseOneBoostedCardCB1 \| coinbaseOneConcierge \| coinbaseOneStakeOrWrap \| coinbaseOneStaking \| coinbaseOneStarToken \| coinbaseOneUSDC \| coinbaseOneZero \| confirmAddress \| confirmEmail \| confirmIDCard \| confirmSocialSecurity \| cryptoEconomyArrows \| dappWallet \| darkModeIntroduction \| defiEarnAnnouncement \| defiNfts \| directDepositExcitement \| earnInterestOnCryptocurrency \| fileYourCryptoTaxesCheckOther \| fileYourCryptoTaxesOther \| frameEmpty \| giftBoxCrypto \| gifting \| goldSilverFutures \| guideBullCase \| guideCryptoBeginner \| guideFiveThings \| guideNftDefi \| guideStartInvesting \| instantUnstaking \| instoDappWallet \| instoEthStaking \| instoPixDeposits \| instoSecurityKey \| instoSideChainSide \| instoUbiKey \| instoWaiting \| interestForYou \| miniGift \| moneyRewards \| nftTag \| noPortfolio \| nuxChecklist \| nuxEarnCrypto \| nuxEarnYield \| nuxPopularAssets \| nuxRecurringBuys \| offersEmpty \| phoneNotifications \| pixBankDeposits \| pixDeposits \| recommendInvestments \| referralsPeople \| refreshMobileApp \| rewardExpiring \| saveTheDate \| sparkleToken \| starToken \| swapEth \| switchReward \| taxDocuments \| transferringCrypto \| unsupportedAsset \| waitlistSignup \| walletApp \| walletQuestsChest \| walletQuestsTrophy \| yieldCenter \| yieldCenterUSDC` | Yes | `-` | Name of illustration as defined in Figma |
|
|
44
44
|
| `dimension` | `96x96` | No | `-` | HeroSquare Default: 240x240 SpotSquare Default: 96x96 Pictogram Default: 48x48 SpotRectangle Default: 240x120 |
|
|
45
|
-
| `fallback` | `ReactElement<
|
|
45
|
+
| `fallback` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| null` | No | `null` | Fallback element to render if unable to find an illustration with the matching name |
|
|
46
46
|
| `scaleMultiplier` | `number` | No | `-` | Multiply the width & height while maintaining aspect ratio |
|
|
47
47
|
| `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 |
|
|
48
48
|
|
|
@@ -524,7 +524,7 @@ It accepts an object with the following optional keys:
|
|
|
524
524
|
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
525
525
|
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
526
526
|
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
527
|
-
| `animate` | `boolean` | No | `true` | Whether to animate the progress
|
|
527
|
+
| `animate` | `boolean` | No | `true` | Whether to animate the progress bar. |
|
|
528
528
|
| `animated` | `boolean` | No | `-` | - |
|
|
529
529
|
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
530
530
|
| `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 | `-` | - |
|
|
@@ -546,16 +546,16 @@ It accepts an object with the following optional keys:
|
|
|
546
546
|
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
547
547
|
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
548
548
|
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
549
|
-
| `bottom` | `
|
|
549
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
550
550
|
| `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 | `-` | - |
|
|
551
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
551
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
552
552
|
| `complete` | `boolean` | No | `-` | Set this to true to visualize a completely filled/complete Stepper |
|
|
553
553
|
| `completedStepAccessibilityLabel` | `string` | No | `"Complete"` | An optional accessibility label used to announce a step as complete/visited. Useful for providing an internationalized label for this state. |
|
|
554
554
|
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
555
555
|
| `disableAnimateOnMount` | `boolean` | No | `-` | Whether to disable the animation on mount. |
|
|
556
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
556
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
557
557
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
558
|
-
| `flexBasis` | `
|
|
558
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
559
559
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
560
560
|
| `flexGrow` | `number` | No | `-` | - |
|
|
561
561
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -564,22 +564,22 @@ It accepts an object with the following optional keys:
|
|
|
564
564
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
565
565
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
566
566
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
567
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
568
|
-
| `height` | `
|
|
567
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
568
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
569
569
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
570
|
-
| `left` | `
|
|
570
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
571
571
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
572
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
573
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
574
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
575
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
576
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
577
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
578
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
579
|
-
| `maxHeight` | `
|
|
580
|
-
| `maxWidth` | `
|
|
581
|
-
| `minHeight` | `
|
|
582
|
-
| `minWidth` | `
|
|
572
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
573
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
574
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
575
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
576
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
577
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
578
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
579
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
580
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
581
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
582
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
583
583
|
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
584
584
|
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
585
585
|
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
@@ -594,30 +594,31 @@ It accepts an object with the following optional keys:
|
|
|
594
594
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
595
595
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
596
596
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
597
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
598
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
599
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
600
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
601
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
602
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
603
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
597
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
598
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
599
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
600
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
601
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
602
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
603
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
604
604
|
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
605
|
-
| `position` | `
|
|
606
|
-
| `progressSpringConfig` | `Partial<AnimationConfig>` | No | `-` |
|
|
607
|
-
| `
|
|
608
|
-
| `
|
|
609
|
-
| `
|
|
610
|
-
| `
|
|
605
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
606
|
+
| `progressSpringConfig` | `Partial<AnimationConfig>` | No | `-` | - |
|
|
607
|
+
| `progressTimingConfig` | `TimingConfig` | No | `-` | The timing config to use for the progress animation. |
|
|
608
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | - |
|
|
609
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
610
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
611
|
+
| `style` | `false \| \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
|
|
611
612
|
| `styles` | `{ root?: StyleProp<ViewStyle>; step?: StyleProp<ViewStyle>; substepContainer?: StyleProp<ViewStyle>; label?: StyleProp<ViewStyle>; progress?: StyleProp<ViewStyle>; icon?: StyleProp<ViewStyle>; header?: StyleProp<ViewStyle>; }` | No | `-` | Custom styles for individual elements of the Stepper component |
|
|
612
|
-
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
613
|
+
| `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 Used to locate this view in end-to-end tests. |
|
|
613
614
|
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
614
615
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
615
616
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
616
617
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
617
|
-
| `top` | `
|
|
618
|
-
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
618
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
619
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
619
620
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
620
|
-
| `width` | `
|
|
621
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
621
622
|
| `zIndex` | `number` | No | `-` | - |
|
|
622
623
|
|
|
623
624
|
|
|
@@ -87,7 +87,7 @@ function ElevationSwitchDemo() {
|
|
|
87
87
|
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `1000` | - |
|
|
88
88
|
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `0` | - |
|
|
89
89
|
| `checked` | `boolean` | No | `-` | Set the control to selected/on. |
|
|
90
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
90
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Label for the control option. Label content rendered next to the switch control. |
|
|
91
91
|
| `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 | `-` | - |
|
|
92
92
|
| `controlColor` | `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 | `bgPrimary` | Sets the checked/active color of the control. |
|
|
93
93
|
| `disabled` | `boolean` | No | `-` | Disable user interaction. |
|
|
@@ -109,8 +109,18 @@ function ElevationSwitchDemo() {
|
|
|
109
109
|
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
110
110
|
| `onPress` | `((event: GestureResponderEvent) => void) \| null` | No | `-` | Called when a single tap gesture is detected. |
|
|
111
111
|
| `readOnly` | `boolean` | No | `-` | Set the control to ready-only. Similar effect as disabled. |
|
|
112
|
-
| `ref` | `(
|
|
113
|
-
| `
|
|
112
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
113
|
+
| `style` | `ViewStyle` | No | `-` | - |
|
|
114
|
+
| `styles` | `{ root?: StyleProp<ViewStyle>; control?: StyleProp<ViewStyle>; }` | No | `-` | Slot-level styles for Switch. |
|
|
115
|
+
| `testID` | `string` | No | `-` | Used to locate this view in end-to-end tests. 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 |
|
|
114
116
|
| `value` | `string` | No | `-` | Value of the option. Useful for multiple choice. |
|
|
115
117
|
|
|
116
118
|
|
|
119
|
+
## Styles
|
|
120
|
+
|
|
121
|
+
| Selector | Static class name | Description |
|
|
122
|
+
| --- | --- | --- |
|
|
123
|
+
| `root` | `-` | Persistent outer wrapper across all variants. |
|
|
124
|
+
| `control` | `-` | Control wrapper style. Applied to the underlying Control element (same element that receives style). |
|
|
125
|
+
|
|
126
|
+
|
|
@@ -44,7 +44,7 @@ function TabIndicatorExample() {
|
|
|
44
44
|
| `x` | `number` | Yes | `-` | The xPosition of the active TabLabel. |
|
|
45
45
|
| `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 | `: 'bg'` | This should always match the background color of the parent container |
|
|
46
46
|
| `key` | `Key \| null` | No | `-` | - |
|
|
47
|
-
| `ref` | `(
|
|
47
|
+
| `ref` | `null \| RefObject<View \| null> \| (instance: View \| null) => void \| (() => VoidOrUndefinedOnly)` | No | `-` | Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). |
|
|
48
48
|
| `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 |
|
|
49
49
|
|
|
50
50
|
|
|
@@ -65,21 +65,21 @@ import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
|
|
|
65
65
|
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
66
66
|
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
67
67
|
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
68
|
-
| `bottom` | `
|
|
69
|
-
| `children` | `null \| string \| number \| false \| true \| ReactElement<
|
|
68
|
+
| `bottom` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
69
|
+
| `children` | `null \| string \| number \| bigint \| false \| true \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode>` | No | `-` | Display title to render as the TabLabel. |
|
|
70
70
|
| `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 | `-` | - |
|
|
71
|
-
| `columnGap` | `0 \| 1 \| 2 \|
|
|
71
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
72
72
|
| `count` | `number` | No | `-` | The number value to be shown in the dot. If count is <= 0, dot will not show up. |
|
|
73
73
|
| `dangerouslySetBackground` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
74
74
|
| `dangerouslySetColor` | `string \| OpaqueColorValue` | No | `-` | - |
|
|
75
75
|
| `dataDetectorType` | `link \| none \| all \| email \| phoneNumber \| null` | No | `-` | Determines the types of data converted to clickable URLs in the text element. By default no data types are detected. |
|
|
76
76
|
| `disabled` | `boolean` | No | `-` | Add disabled opacity style to text Specifies the disabled state of the text view for testing purposes. |
|
|
77
|
-
| `display` | `flex \| none` | No | `-` | - |
|
|
77
|
+
| `display` | `flex \| none \| contents` | No | `-` | - |
|
|
78
78
|
| `dynamicTypeRamp` | `title1 \| title2 \| title3 \| headline \| body \| caption2 \| caption1 \| footnote \| subheadline \| callout \| largeTitle` | No | `-` | The Dynamic Type scale ramp to apply to this element on iOS. |
|
|
79
79
|
| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
|
|
80
|
-
| `ellipsize` | `middle \|
|
|
81
|
-
| `ellipsizeMode` | `middle \|
|
|
82
|
-
| `flexBasis` | `
|
|
80
|
+
| `ellipsize` | `middle \| clip \| head \| tail` | No | `-` | Choose ellipsize mode. |
|
|
81
|
+
| `ellipsizeMode` | `middle \| clip \| head \| tail` | No | `-` | This can be one of the following values: - head - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., ...wxyz - middle - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. ab...yz - tail - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., abcd... - clip - Lines are not drawn past the edge of the text container. The default is tail. numberOfLines must be set in conjunction with this prop. > clip is working only for iOS |
|
|
82
|
+
| `flexBasis` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
83
83
|
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
84
84
|
| `flexGrow` | `number` | No | `-` | - |
|
|
85
85
|
| `flexShrink` | `number` | No | `-` | - |
|
|
@@ -88,27 +88,27 @@ import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
|
|
|
88
88
|
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
89
89
|
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
90
90
|
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
91
|
-
| `gap` | `0 \| 1 \| 2 \|
|
|
92
|
-
| `height` | `
|
|
91
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
92
|
+
| `height` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
93
93
|
| `id` | `string` | No | `-` | Used to reference react managed views from native code. |
|
|
94
94
|
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
95
|
-
| `left` | `
|
|
96
|
-
| `lineBreakMode` | `middle \|
|
|
95
|
+
| `left` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
96
|
+
| `lineBreakMode` | `middle \| clip \| head \| tail` | No | `-` | Line Break mode. Works only with numberOfLines. clip is working only for iOS |
|
|
97
97
|
| `lineBreakStrategyIOS` | `none \| standard \| hangul-word \| push-out` | No | `-` | Set line break strategy on iOS. |
|
|
98
98
|
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
99
|
-
| `margin` | `0 \| -1 \| -2 \| -
|
|
100
|
-
| `marginBottom` | `0 \| -1 \| -2 \| -
|
|
101
|
-
| `marginEnd` | `0 \| -1 \| -2 \| -
|
|
102
|
-
| `marginStart` | `0 \| -1 \| -2 \| -
|
|
103
|
-
| `marginTop` | `0 \| -1 \| -2 \| -
|
|
104
|
-
| `marginX` | `0 \| -1 \| -2 \| -
|
|
105
|
-
| `marginY` | `0 \| -1 \| -2 \| -
|
|
99
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
100
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
101
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
102
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
103
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
104
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
105
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
106
106
|
| `max` | `number` | No | `99` | If a badge count is greater than max, it will truncate the numbers so its max+ |
|
|
107
107
|
| `maxFontSizeMultiplier` | `number \| null` | No | `-` | Specifies largest possible scale a font can reach when allowFontScaling is enabled. Possible values: - null/undefined (default): inherit from the parent node or the global default (0) - 0: no max, ignore parent/global default - >= 1: sets the maxFontSizeMultiplier of this node to this value |
|
|
108
|
-
| `maxHeight` | `
|
|
109
|
-
| `maxWidth` | `
|
|
110
|
-
| `minHeight` | `
|
|
111
|
-
| `minWidth` | `
|
|
108
|
+
| `maxHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
109
|
+
| `maxWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
110
|
+
| `minHeight` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
111
|
+
| `minWidth` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
112
112
|
| `minimumFontScale` | `number` | No | `-` | Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0). |
|
|
113
113
|
| `mono` | `boolean` | No | `-` | Use monospace font family. |
|
|
114
114
|
| `nativeID` | `string` | No | `-` | Used to reference react managed views from native code. |
|
|
@@ -119,23 +119,25 @@ import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
|
|
|
119
119
|
| `onPress` | `((() => void) & ((event: GestureResponderEvent) => void))` | No | `-` | Callback to fire when pressed This function is called on press. Text intrinsically supports press handling with a default highlight state (which can be disabled with suppressHighlighting). |
|
|
120
120
|
| `onPressIn` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
|
|
121
121
|
| `onPressOut` | `((event: GestureResponderEvent) => void)` | No | `-` | - |
|
|
122
|
-
| `onTextLayout` | `((event:
|
|
122
|
+
| `onTextLayout` | `((event: TextLayoutEvent) => void)` | No | `-` | Invoked on Text layout |
|
|
123
123
|
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
124
124
|
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
125
|
-
| `padding` | `0 \| 1 \| 2 \|
|
|
126
|
-
| `paddingBottom` | `0 \| 1 \| 2 \|
|
|
127
|
-
| `paddingEnd` | `0 \| 1 \| 2 \|
|
|
128
|
-
| `paddingStart` | `0 \| 1 \| 2 \|
|
|
129
|
-
| `paddingTop` | `0 \| 1 \| 2 \|
|
|
130
|
-
| `paddingX` | `0 \| 1 \| 2 \|
|
|
131
|
-
| `paddingY` | `0 \| 1 \| 2 \|
|
|
132
|
-
| `
|
|
125
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
126
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
127
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
128
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
129
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
130
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
131
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
132
|
+
| `pointerEvents` | `box-none \| none \| box-only \| auto` | No | `-` | Controls how touch events are handled. Similar to Views pointerEvents. |
|
|
133
|
+
| `position` | `absolute \| relative \| static` | No | `-` | - |
|
|
134
|
+
| `pressRetentionOffset` | `{ top: number; left: number; bottom: number; right: number; }` | No | `-` | Defines how far your touch may move off of the button, before deactivating the button. |
|
|
133
135
|
| `renderEmptyNode` | `boolean` | No | `-` | - |
|
|
134
|
-
| `right` | `
|
|
135
|
-
| `rowGap` | `0 \| 1 \| 2 \|
|
|
136
|
+
| `right` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
137
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
136
138
|
| `selectable` | `boolean` | No | `-` | Lets the user select text, to use the native copy and paste functionality. |
|
|
137
139
|
| `selectionColor` | `string \| OpaqueColorValue` | No | `-` | The highlight color of the text. |
|
|
138
|
-
| `style` | `false \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
|
|
140
|
+
| `style` | `false \| \| Value \| AnimatedInterpolation<string \| number> \| RegisteredStyle<TextStyle> \| WithAnimatedObject<TextStyle> \| WithAnimatedArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle> \| RecursiveArray<Falsy \| TextStyle \| RegisteredStyle<TextStyle>> \| readonly (Falsy \| TextStyle \| RegisteredStyle<TextStyle>)[]> \| null` | No | `-` | - |
|
|
139
141
|
| `suppressHighlighting` | `boolean` | No | `-` | When true, no visual change is made when text is pressed down. By default, a gray oval highlights the text on press down. |
|
|
140
142
|
| `tabularNumbers` | `boolean` | No | `false` | Activates the set of figures where numbers are all of the same size, allowing them to be easily aligned. |
|
|
141
143
|
| `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 Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
|
|
@@ -144,12 +146,12 @@ import { TabLabel } from '@coinbase/cds-mobile/tabs/TabLabel'
|
|
|
144
146
|
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
145
147
|
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
146
148
|
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
147
|
-
| `top` | `
|
|
148
|
-
| `transform` | `string \| (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
149
|
+
| `top` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
150
|
+
| `transform` | `string \| readonly (({ scaleX: AnimatableNumericValue; } & { scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scaleY: AnimatableNumericValue; } & { scaleX?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateX: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ translateY: AnimatableNumericValue \| ${number}%; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ perspective: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotate: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ rotateZ: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ scale: AnimatableNumericValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; skewX?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewX: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewY?: undefined; matrix?: undefined; }) \| ({ skewY: AnimatableStringValue; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; matrix?: undefined; }) \| ({ matrix: AnimatableNumericValue[]; } & { scaleX?: undefined; scaleY?: undefined; translateX?: undefined; translateY?: undefined; perspective?: undefined; rotate?: undefined; rotateX?: undefined; rotateY?: undefined; rotateZ?: undefined; scale?: undefined; skewX?: undefined; skewY?: undefined; }))[]` | No | `-` | - |
|
|
149
151
|
| `underline` | `boolean` | No | `false` | Set text decoration to underline. |
|
|
150
152
|
| `userSelect` | `none \| auto \| text \| contain \| all` | No | `-` | - |
|
|
151
153
|
| `variant` | `primary \| secondary` | No | `'primary'` | See the Tabs TDD to understand which variant should be used. |
|
|
152
|
-
| `width` | `
|
|
154
|
+
| `width` | `null \| number \| AnimatedNode \| auto \| ${number}%` | No | `-` | - |
|
|
153
155
|
| `zIndex` | `number` | No | `-` | - |
|
|
154
156
|
|
|
155
157
|
|