@coinbase/cds-mcp-server 8.17.2 → 8.17.4
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/Accordion.txt +188 -0
- package/mcp-docs/mobile/components/AccordionItem.txt +29 -0
- package/mcp-docs/mobile/components/Alert.txt +155 -0
- package/mcp-docs/mobile/components/AreaChart.txt +265 -0
- package/mcp-docs/mobile/components/Avatar.txt +195 -0
- package/mcp-docs/mobile/components/AvatarButton.txt +225 -0
- package/mcp-docs/mobile/components/Banner.txt +221 -0
- package/mcp-docs/mobile/components/BarChart.txt +815 -0
- package/mcp-docs/mobile/components/Box.txt +173 -0
- package/mcp-docs/mobile/components/BrowserBar.txt +146 -0
- package/mcp-docs/mobile/components/Button.txt +198 -0
- package/mcp-docs/mobile/components/ButtonGroup.txt +79 -0
- package/mcp-docs/mobile/components/Carousel.txt +1083 -0
- package/mcp-docs/mobile/components/CartesianChart.txt +825 -0
- package/mcp-docs/mobile/components/CellMedia.txt +70 -0
- package/mcp-docs/mobile/components/Checkbox.txt +245 -0
- package/mcp-docs/mobile/components/CheckboxCell.txt +201 -0
- package/mcp-docs/mobile/components/CheckboxGroup.txt +284 -0
- package/mcp-docs/mobile/components/Chip.txt +194 -0
- package/mcp-docs/mobile/components/Coachmark.txt +157 -0
- package/mcp-docs/mobile/components/Collapsible.txt +104 -0
- package/mcp-docs/mobile/components/ContainedAssetCard.txt +134 -0
- package/mcp-docs/mobile/components/ContentCard.txt +365 -0
- package/mcp-docs/mobile/components/ContentCardBody.txt +135 -0
- package/mcp-docs/mobile/components/ContentCardFooter.txt +127 -0
- package/mcp-docs/mobile/components/ContentCardHeader.txt +145 -0
- package/mcp-docs/mobile/components/ContentCell.txt +226 -0
- package/mcp-docs/mobile/components/ControlGroup.txt +443 -0
- package/mcp-docs/mobile/components/DatePicker.txt +496 -0
- package/mcp-docs/mobile/components/Divider.txt +138 -0
- package/mcp-docs/mobile/components/DotCount.txt +145 -0
- package/mcp-docs/mobile/components/DotStatusColor.txt +58 -0
- package/mcp-docs/mobile/components/DotSymbol.txt +134 -0
- package/mcp-docs/mobile/components/Fallback.txt +157 -0
- package/mcp-docs/mobile/components/FloatingAssetCard.txt +155 -0
- package/mcp-docs/mobile/components/HStack.txt +234 -0
- package/mcp-docs/mobile/components/HeroSquare.txt +47 -0
- package/mcp-docs/mobile/components/Icon.txt +51 -0
- package/mcp-docs/mobile/components/IconButton.txt +268 -0
- package/mcp-docs/mobile/components/InputChip.txt +187 -0
- package/mcp-docs/mobile/components/Interactable.txt +186 -0
- package/mcp-docs/mobile/components/LineChart.txt +1324 -0
- package/mcp-docs/mobile/components/Link.txt +291 -0
- package/mcp-docs/mobile/components/ListCell.txt +412 -0
- package/mcp-docs/mobile/components/LogoMark.txt +84 -0
- package/mcp-docs/mobile/components/LogoWordMark.txt +93 -0
- package/mcp-docs/mobile/components/Lottie.txt +138 -0
- package/mcp-docs/mobile/components/LottieStatusAnimation.txt +46 -0
- package/mcp-docs/mobile/components/Modal.txt +83 -0
- package/mcp-docs/mobile/components/ModalBody.txt +33 -0
- package/mcp-docs/mobile/components/ModalFooter.txt +24 -0
- package/mcp-docs/mobile/components/ModalHeader.txt +27 -0
- package/mcp-docs/mobile/components/MultiContentModule.txt +379 -0
- package/mcp-docs/mobile/components/NavigationTitle.txt +131 -0
- package/mcp-docs/mobile/components/NavigationTitleSelect.txt +141 -0
- package/mcp-docs/mobile/components/NudgeCard.txt +89 -0
- package/mcp-docs/mobile/components/Numpad.txt +340 -0
- package/mcp-docs/mobile/components/Overlay.txt +151 -0
- package/mcp-docs/mobile/components/PageFooter.txt +160 -0
- package/mcp-docs/mobile/components/PageHeader.txt +185 -0
- package/mcp-docs/mobile/components/PeriodSelector.txt +407 -0
- package/mcp-docs/mobile/components/Pictogram.txt +47 -0
- package/mcp-docs/mobile/components/Point.txt +204 -0
- package/mcp-docs/mobile/components/PortalProvider.txt +78 -0
- package/mcp-docs/mobile/components/Pressable.txt +210 -0
- package/mcp-docs/mobile/components/ProgressBar.txt +129 -0
- package/mcp-docs/mobile/components/ProgressBarWithFixedLabels.txt +160 -0
- package/mcp-docs/mobile/components/ProgressBarWithFloatLabel.txt +137 -0
- package/mcp-docs/mobile/components/ProgressCircle.txt +236 -0
- package/mcp-docs/mobile/components/Radio.txt +241 -0
- package/mcp-docs/mobile/components/RadioCell.txt +201 -0
- package/mcp-docs/mobile/components/RadioGroup.txt +281 -0
- package/mcp-docs/mobile/components/ReferenceLine.txt +152 -0
- package/mcp-docs/mobile/components/RemoteImage.txt +105 -0
- package/mcp-docs/mobile/components/RemoteImageGroup.txt +60 -0
- package/mcp-docs/mobile/components/RollingNumber.txt +788 -0
- package/mcp-docs/mobile/components/Scrubber.txt +203 -0
- package/mcp-docs/mobile/components/SearchInput.txt +191 -0
- package/mcp-docs/mobile/components/SectionHeader.txt +204 -0
- package/mcp-docs/mobile/components/SegmentedTabs.txt +315 -0
- package/mcp-docs/mobile/components/Select.txt +211 -0
- package/mcp-docs/mobile/components/SelectChip.txt +323 -0
- package/mcp-docs/mobile/components/SelectOption.txt +84 -0
- package/mcp-docs/mobile/components/SlideButton.txt +330 -0
- package/mcp-docs/mobile/components/Spacer.txt +83 -0
- package/mcp-docs/mobile/components/Sparkline.txt +122 -0
- package/mcp-docs/mobile/components/SparklineGradient.txt +106 -0
- package/mcp-docs/mobile/components/SparklineInteractive.txt +156 -0
- package/mcp-docs/mobile/components/SparklineInteractiveHeader.txt +72 -0
- package/mcp-docs/mobile/components/Spinner.txt +48 -0
- package/mcp-docs/mobile/components/SpotIcon.txt +47 -0
- package/mcp-docs/mobile/components/SpotRectangle.txt +47 -0
- package/mcp-docs/mobile/components/SpotSquare.txt +47 -0
- package/mcp-docs/mobile/components/Stepper.txt +527 -0
- package/mcp-docs/mobile/components/SubBrandLogoMark.txt +125 -0
- package/mcp-docs/mobile/components/SubBrandLogoWordMark.txt +125 -0
- package/mcp-docs/mobile/components/Switch.txt +97 -0
- package/mcp-docs/mobile/components/TabIndicator.txt +48 -0
- package/mcp-docs/mobile/components/TabLabel.txt +153 -0
- package/mcp-docs/mobile/components/TabNavigation.txt +146 -0
- package/mcp-docs/mobile/components/TabbedChips.txt +142 -0
- package/mcp-docs/mobile/components/Tabs.txt +190 -0
- package/mcp-docs/mobile/components/Tag.txt +300 -0
- package/mcp-docs/mobile/components/Text.txt +211 -0
- package/mcp-docs/mobile/components/TextInput.txt +717 -0
- package/mcp-docs/mobile/components/ThemeProvider.txt +132 -0
- package/mcp-docs/mobile/components/Toast.txt +196 -0
- package/mcp-docs/mobile/components/Tooltip.txt +59 -0
- package/mcp-docs/mobile/components/TopNavBar.txt +161 -0
- package/mcp-docs/mobile/components/Tour.txt +158 -0
- package/mcp-docs/mobile/components/Tray.txt +252 -0
- package/mcp-docs/mobile/components/UpsellCard.txt +321 -0
- package/mcp-docs/mobile/components/VStack.txt +222 -0
- package/mcp-docs/mobile/components/XAxis.txt +621 -0
- package/mcp-docs/mobile/components/YAxis.txt +567 -0
- package/mcp-docs/mobile/getting-started/ai-overview.txt +108 -0
- package/mcp-docs/mobile/getting-started/installation.txt +57 -0
- package/mcp-docs/mobile/getting-started/introduction.txt +102 -0
- package/mcp-docs/mobile/getting-started/playground.txt +28 -0
- package/mcp-docs/mobile/getting-started/styling.txt +84 -0
- package/mcp-docs/mobile/getting-started/theming.txt +286 -0
- package/mcp-docs/mobile/hooks/useDimensions.txt +72 -0
- package/mcp-docs/mobile/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/mobile/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/mobile/hooks/useOverlayContentContext.txt +280 -0
- package/mcp-docs/mobile/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/mobile/hooks/useRefMap.txt +178 -0
- package/mcp-docs/mobile/hooks/useTheme.txt +321 -0
- package/mcp-docs/mobile/routes.txt +139 -0
- package/mcp-docs/web/components/Accordion.txt +189 -0
- package/mcp-docs/web/components/AccordionItem.txt +31 -0
- package/mcp-docs/web/components/Alert.txt +164 -0
- package/mcp-docs/web/components/AreaChart.txt +510 -0
- package/mcp-docs/web/components/Avatar.txt +211 -0
- package/mcp-docs/web/components/AvatarButton.txt +240 -0
- package/mcp-docs/web/components/Banner.txt +226 -0
- package/mcp-docs/web/components/BarChart.txt +1267 -0
- package/mcp-docs/web/components/Box.txt +175 -0
- package/mcp-docs/web/components/Button.txt +212 -0
- package/mcp-docs/web/components/ButtonGroup.txt +79 -0
- package/mcp-docs/web/components/Calendar.txt +181 -0
- package/mcp-docs/web/components/Carousel.txt +1575 -0
- package/mcp-docs/web/components/CartesianChart.txt +1044 -0
- package/mcp-docs/web/components/CellMedia.txt +56 -0
- package/mcp-docs/web/components/Checkbox.txt +188 -0
- package/mcp-docs/web/components/CheckboxCell.txt +202 -0
- package/mcp-docs/web/components/CheckboxGroup.txt +219 -0
- package/mcp-docs/web/components/Chip.txt +196 -0
- package/mcp-docs/web/components/Coachmark.txt +188 -0
- package/mcp-docs/web/components/Collapsible.txt +119 -0
- package/mcp-docs/web/components/ContainedAssetCard.txt +232 -0
- package/mcp-docs/web/components/ContentCard.txt +367 -0
- package/mcp-docs/web/components/ContentCardBody.txt +137 -0
- package/mcp-docs/web/components/ContentCardFooter.txt +129 -0
- package/mcp-docs/web/components/ContentCardHeader.txt +147 -0
- package/mcp-docs/web/components/ContentCell.txt +219 -0
- package/mcp-docs/web/components/ControlGroup.txt +436 -0
- package/mcp-docs/web/components/DatePicker.txt +505 -0
- package/mcp-docs/web/components/Divider.txt +143 -0
- package/mcp-docs/web/components/DotCount.txt +149 -0
- package/mcp-docs/web/components/DotStatusColor.txt +58 -0
- package/mcp-docs/web/components/DotSymbol.txt +137 -0
- package/mcp-docs/web/components/Dropdown.txt +119 -0
- package/mcp-docs/web/components/Fallback.txt +163 -0
- package/mcp-docs/web/components/FloatingAssetCard.txt +250 -0
- package/mcp-docs/web/components/FullscreenAlert.txt +69 -0
- package/mcp-docs/web/components/FullscreenModal.txt +145 -0
- package/mcp-docs/web/components/FullscreenModalLayout.txt +187 -0
- package/mcp-docs/web/components/Grid.txt +236 -0
- package/mcp-docs/web/components/GridColumn.txt +209 -0
- package/mcp-docs/web/components/HStack.txt +236 -0
- package/mcp-docs/web/components/HeroSquare.txt +48 -0
- package/mcp-docs/web/components/Icon.txt +145 -0
- package/mcp-docs/web/components/IconButton.txt +390 -0
- package/mcp-docs/web/components/InputChip.txt +187 -0
- package/mcp-docs/web/components/Interactable.txt +193 -0
- package/mcp-docs/web/components/LineChart.txt +1576 -0
- package/mcp-docs/web/components/Link.txt +243 -0
- package/mcp-docs/web/components/ListCell.txt +418 -0
- package/mcp-docs/web/components/LogoMark.txt +84 -0
- package/mcp-docs/web/components/LogoWordMark.txt +93 -0
- package/mcp-docs/web/components/Lottie.txt +157 -0
- package/mcp-docs/web/components/LottieStatusAnimation.txt +57 -0
- package/mcp-docs/web/components/MediaQueryProvider.txt +108 -0
- package/mcp-docs/web/components/Modal.txt +196 -0
- package/mcp-docs/web/components/ModalBody.txt +117 -0
- package/mcp-docs/web/components/ModalFooter.txt +119 -0
- package/mcp-docs/web/components/ModalHeader.txt +123 -0
- package/mcp-docs/web/components/MultiContentModule.txt +381 -0
- package/mcp-docs/web/components/NavigationBar.txt +102 -0
- package/mcp-docs/web/components/NavigationTitle.txt +25 -0
- package/mcp-docs/web/components/NavigationTitleSelect.txt +45 -0
- package/mcp-docs/web/components/NudgeCard.txt +181 -0
- package/mcp-docs/web/components/Overlay.txt +171 -0
- package/mcp-docs/web/components/PageFooter.txt +184 -0
- package/mcp-docs/web/components/PageHeader.txt +243 -0
- package/mcp-docs/web/components/Pagination.txt +499 -0
- package/mcp-docs/web/components/PeriodSelector.txt +703 -0
- package/mcp-docs/web/components/Pictogram.txt +48 -0
- package/mcp-docs/web/components/Point.txt +460 -0
- package/mcp-docs/web/components/PortalProvider.txt +76 -0
- package/mcp-docs/web/components/Pressable.txt +193 -0
- package/mcp-docs/web/components/ProgressBar.txt +163 -0
- package/mcp-docs/web/components/ProgressBarWithFixedLabels.txt +212 -0
- package/mcp-docs/web/components/ProgressBarWithFloatLabel.txt +181 -0
- package/mcp-docs/web/components/ProgressCircle.txt +443 -0
- package/mcp-docs/web/components/Radio.txt +219 -0
- package/mcp-docs/web/components/RadioCell.txt +215 -0
- package/mcp-docs/web/components/RadioGroup.txt +288 -0
- package/mcp-docs/web/components/ReferenceLine.txt +451 -0
- package/mcp-docs/web/components/RemoteImage.txt +165 -0
- package/mcp-docs/web/components/RemoteImageGroup.txt +86 -0
- package/mcp-docs/web/components/RollingNumber.txt +1021 -0
- package/mcp-docs/web/components/Scrubber.txt +231 -0
- package/mcp-docs/web/components/SearchInput.txt +117 -0
- package/mcp-docs/web/components/SectionHeader.txt +217 -0
- package/mcp-docs/web/components/SegmentedTabs.txt +324 -0
- package/mcp-docs/web/components/Select.txt +224 -0
- package/mcp-docs/web/components/SelectChip.txt +314 -0
- package/mcp-docs/web/components/SelectOption.txt +165 -0
- package/mcp-docs/web/components/Sidebar.txt +349 -0
- package/mcp-docs/web/components/SidebarItem.txt +131 -0
- package/mcp-docs/web/components/SidebarMoreMenu.txt +30 -0
- package/mcp-docs/web/components/Spacer.txt +173 -0
- package/mcp-docs/web/components/Sparkline.txt +122 -0
- package/mcp-docs/web/components/SparklineGradient.txt +106 -0
- package/mcp-docs/web/components/SparklineInteractive.txt +153 -0
- package/mcp-docs/web/components/SparklineInteractiveHeader.txt +76 -0
- package/mcp-docs/web/components/Spinner.txt +128 -0
- package/mcp-docs/web/components/SpotIcon.txt +48 -0
- package/mcp-docs/web/components/SpotRectangle.txt +48 -0
- package/mcp-docs/web/components/SpotSquare.txt +48 -0
- package/mcp-docs/web/components/Stepper.txt +682 -0
- package/mcp-docs/web/components/SubBrandLogoMark.txt +125 -0
- package/mcp-docs/web/components/SubBrandLogoWordMark.txt +125 -0
- package/mcp-docs/web/components/Switch.txt +85 -0
- package/mcp-docs/web/components/TabIndicator.txt +48 -0
- package/mcp-docs/web/components/TabLabel.txt +158 -0
- package/mcp-docs/web/components/TabNavigation.txt +159 -0
- package/mcp-docs/web/components/TabbedChips.txt +155 -0
- package/mcp-docs/web/components/Table.txt +367 -0
- package/mcp-docs/web/components/TableBody.txt +83 -0
- package/mcp-docs/web/components/TableCaption.txt +102 -0
- package/mcp-docs/web/components/TableCell.txt +165 -0
- package/mcp-docs/web/components/TableCellFallback.txt +97 -0
- package/mcp-docs/web/components/TableFooter.txt +83 -0
- package/mcp-docs/web/components/TableHeader.txt +100 -0
- package/mcp-docs/web/components/TableRow.txt +140 -0
- package/mcp-docs/web/components/Tabs.txt +212 -0
- package/mcp-docs/web/components/Tag.txt +304 -0
- package/mcp-docs/web/components/Text.txt +232 -0
- package/mcp-docs/web/components/TextInput.txt +652 -0
- package/mcp-docs/web/components/ThemeProvider.txt +199 -0
- package/mcp-docs/web/components/TileButton.txt +158 -0
- package/mcp-docs/web/components/Toast.txt +203 -0
- package/mcp-docs/web/components/Tooltip.txt +89 -0
- package/mcp-docs/web/components/Tour.txt +179 -0
- package/mcp-docs/web/components/Tray.txt +288 -0
- package/mcp-docs/web/components/UpsellCard.txt +319 -0
- package/mcp-docs/web/components/VStack.txt +224 -0
- package/mcp-docs/web/components/XAxis.txt +619 -0
- package/mcp-docs/web/components/YAxis.txt +548 -0
- package/mcp-docs/web/getting-started/ai-overview.txt +108 -0
- package/mcp-docs/web/getting-started/installation.txt +103 -0
- package/mcp-docs/web/getting-started/introduction.txt +102 -0
- package/mcp-docs/web/getting-started/playground.txt +28 -0
- package/mcp-docs/web/getting-started/styling.txt +161 -0
- package/mcp-docs/web/getting-started/templates.txt +121 -0
- package/mcp-docs/web/getting-started/theming.txt +426 -0
- package/mcp-docs/web/hooks/useBreakpoints.txt +61 -0
- package/mcp-docs/web/hooks/useDimensions.txt +114 -0
- package/mcp-docs/web/hooks/useEventHandler.txt +120 -0
- package/mcp-docs/web/hooks/useHasMounted.txt +75 -0
- package/mcp-docs/web/hooks/useIsoEffect.txt +58 -0
- package/mcp-docs/web/hooks/useMediaQuery.txt +114 -0
- package/mcp-docs/web/hooks/useMergeRefs.txt +116 -0
- package/mcp-docs/web/hooks/useOverlayContentContext.txt +279 -0
- package/mcp-docs/web/hooks/usePreviousValue.txt +74 -0
- package/mcp-docs/web/hooks/useRefMap.txt +178 -0
- package/mcp-docs/web/hooks/useScrollBlocker.txt +82 -0
- package/mcp-docs/web/hooks/useTheme.txt +364 -0
- package/mcp-docs/web/routes.txt +163 -0
- package/package.json +1 -1
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# ContentCardBody
|
|
2
|
+
|
|
3
|
+
ContentCardBody is a subcomponent of ContentCard that provides the main content area of the card.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { ContentCardBody } from '@coinbase/cds-mobile/cards/ContentCard'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Examples
|
|
12
|
+
|
|
13
|
+
### Basic Example
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
<VStack bordered borderRadius="400" maxWidth={375} padding={2}>
|
|
17
|
+
<ContentCardBody
|
|
18
|
+
body="Bitcoin Network Shatters Records With Hashrate Climbing to 464 EH/s"
|
|
19
|
+
label={
|
|
20
|
+
<HStack alignItems="flex-end" flexWrap="wrap" gap={0.5}>
|
|
21
|
+
<TextLabel2 as="p" color="fgMuted" numberOfLines={1}>
|
|
22
|
+
BTC
|
|
23
|
+
</TextLabel2>
|
|
24
|
+
<TextLabel2 accessibilityLabel="Up 5.12%" as="p" color="fgPositive">
|
|
25
|
+
↗ 5.12%
|
|
26
|
+
</TextLabel2>
|
|
27
|
+
</HStack>
|
|
28
|
+
}
|
|
29
|
+
/>
|
|
30
|
+
</VStack>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Required | Default | Description |
|
|
36
|
+
| --- | --- | --- | --- | --- |
|
|
37
|
+
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
38
|
+
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
39
|
+
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
40
|
+
| `animated` | `boolean` | No | `-` | - |
|
|
41
|
+
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
42
|
+
| `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 | `-` | - |
|
|
43
|
+
| `body` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Main body copy |
|
|
44
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
45
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
46
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
47
|
+
| `borderColor` | `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 | `-` | - |
|
|
48
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
49
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
50
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
51
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
52
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
53
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
54
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
55
|
+
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
56
|
+
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
57
|
+
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
58
|
+
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
59
|
+
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
60
|
+
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
61
|
+
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
62
|
+
| `bottom` | `string \| number` | No | `-` | - |
|
|
63
|
+
| `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 | `-` | - |
|
|
64
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
65
|
+
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
66
|
+
| `display` | `flex \| none` | No | `-` | - |
|
|
67
|
+
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
68
|
+
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
69
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
70
|
+
| `flexGrow` | `number` | No | `-` | - |
|
|
71
|
+
| `flexShrink` | `number` | No | `-` | - |
|
|
72
|
+
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
73
|
+
| `font` | `inherit \| FontFamily` | No | `-` | - |
|
|
74
|
+
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
75
|
+
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
76
|
+
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
77
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
78
|
+
| `height` | `string \| number` | No | `-` | - |
|
|
79
|
+
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
80
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
81
|
+
| `label` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Use for supplemental data |
|
|
82
|
+
| `left` | `string \| number` | No | `-` | - |
|
|
83
|
+
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
84
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
85
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
86
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
87
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
88
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
89
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
90
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
91
|
+
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
92
|
+
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
93
|
+
| `media` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Media, image or video to show |
|
|
94
|
+
| `mediaPosition` | `top \| bottom \| left \| right` | No | `-` | The position of the media within the card. Can be one of: top, bottom, right or left. |
|
|
95
|
+
| `minHeight` | `string \| number` | No | `-` | - |
|
|
96
|
+
| `minWidth` | `string \| number` | No | `-` | - |
|
|
97
|
+
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
98
|
+
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
99
|
+
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
100
|
+
| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
101
|
+
| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
102
|
+
| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
103
|
+
| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
104
|
+
| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
105
|
+
| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
106
|
+
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
107
|
+
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
108
|
+
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
109
|
+
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
110
|
+
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
111
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
112
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
113
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
114
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
115
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
116
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
117
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
118
|
+
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
119
|
+
| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
|
|
120
|
+
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
121
|
+
| `right` | `string \| number` | No | `-` | - |
|
|
122
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
123
|
+
| `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 | `-` | - |
|
|
124
|
+
| `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. |
|
|
125
|
+
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
126
|
+
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
127
|
+
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
128
|
+
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
129
|
+
| `top` | `string \| number` | No | `-` | - |
|
|
130
|
+
| `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 | `-` | - |
|
|
131
|
+
| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
|
|
132
|
+
| `width` | `string \| number` | No | `-` | - |
|
|
133
|
+
| `zIndex` | `number` | No | `-` | - |
|
|
134
|
+
|
|
135
|
+
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
# ContentCardFooter
|
|
2
|
+
|
|
3
|
+
ContentCardFooter is a subcomponent of ContentCard that provides the footer section of the card, typically used for actions or additional information.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { ContentCardFooter } from '@coinbase/cds-mobile/cards/ContentCard'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Examples
|
|
12
|
+
|
|
13
|
+
### Basic Example
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
function Example() {
|
|
17
|
+
return (
|
|
18
|
+
<VStack bordered borderRadius="400" maxWidth={375} padding={2}>
|
|
19
|
+
<ContentCardFooter>
|
|
20
|
+
<IconCounterButton count={20} icon="heart" />
|
|
21
|
+
<IconCounterButton count={40} icon="comment" />
|
|
22
|
+
<IconCounterButton count={32} icon="wireTransfer" />
|
|
23
|
+
</ContentCardFooter>
|
|
24
|
+
</VStack>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Props
|
|
30
|
+
|
|
31
|
+
| Prop | Type | Required | Default | Description |
|
|
32
|
+
| --- | --- | --- | --- | --- |
|
|
33
|
+
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
34
|
+
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
35
|
+
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
36
|
+
| `animated` | `boolean` | No | `-` | - |
|
|
37
|
+
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
38
|
+
| `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 | `-` | - |
|
|
39
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
40
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
41
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
42
|
+
| `borderColor` | `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 | `-` | - |
|
|
43
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
44
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
45
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
46
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
47
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
48
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
49
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
50
|
+
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
51
|
+
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
52
|
+
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
53
|
+
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
54
|
+
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
55
|
+
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
56
|
+
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
57
|
+
| `bottom` | `string \| number` | No | `-` | - |
|
|
58
|
+
| `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 | `-` | - |
|
|
59
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
60
|
+
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
61
|
+
| `display` | `flex \| none` | No | `-` | - |
|
|
62
|
+
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
63
|
+
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
64
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
65
|
+
| `flexGrow` | `number` | No | `-` | - |
|
|
66
|
+
| `flexShrink` | `number` | No | `-` | - |
|
|
67
|
+
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
68
|
+
| `font` | `inherit \| FontFamily` | No | `-` | - |
|
|
69
|
+
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
70
|
+
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
71
|
+
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
72
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
73
|
+
| `height` | `string \| number` | No | `-` | - |
|
|
74
|
+
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
75
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
76
|
+
| `left` | `string \| number` | No | `-` | - |
|
|
77
|
+
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
78
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
79
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
80
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
81
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
82
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
83
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
84
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
85
|
+
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
86
|
+
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
87
|
+
| `minHeight` | `string \| number` | No | `-` | - |
|
|
88
|
+
| `minWidth` | `string \| number` | No | `-` | - |
|
|
89
|
+
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
90
|
+
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
91
|
+
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
92
|
+
| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
93
|
+
| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
94
|
+
| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
95
|
+
| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
96
|
+
| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
97
|
+
| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
98
|
+
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
99
|
+
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
100
|
+
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
101
|
+
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
102
|
+
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
103
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
104
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
105
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
106
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
107
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
108
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
109
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
110
|
+
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
111
|
+
| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
|
|
112
|
+
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
113
|
+
| `right` | `string \| number` | No | `-` | - |
|
|
114
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
115
|
+
| `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 | `-` | - |
|
|
116
|
+
| `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. |
|
|
117
|
+
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
118
|
+
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
119
|
+
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
120
|
+
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
121
|
+
| `top` | `string \| number` | No | `-` | - |
|
|
122
|
+
| `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 | `-` | - |
|
|
123
|
+
| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
|
|
124
|
+
| `width` | `string \| number` | No | `-` | - |
|
|
125
|
+
| `zIndex` | `number` | No | `-` | - |
|
|
126
|
+
|
|
127
|
+
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# ContentCardHeader
|
|
2
|
+
|
|
3
|
+
ContentCardHeader is a subcomponent of ContentCard that provides the header section of the card, typically used for the title and subtitle.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { ContentCardHeader } from '@coinbase/cds-mobile/cards/ContentCard'
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Examples
|
|
12
|
+
|
|
13
|
+
### Basic Example
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
function Example() {
|
|
17
|
+
return (
|
|
18
|
+
<VStack bordered borderRadius="400" maxWidth={375} padding={1}>
|
|
19
|
+
<ContentCardHeader
|
|
20
|
+
avatar="/img/card/content_card_custom_avatar_1.png"
|
|
21
|
+
meta={
|
|
22
|
+
<Box marginLeft={-1}>
|
|
23
|
+
<TextLabel2 as="span" color="fgMuted" numberOfLines={1}>
|
|
24
|
+
・News・5 hrs
|
|
25
|
+
</TextLabel2>
|
|
26
|
+
</Box>
|
|
27
|
+
}
|
|
28
|
+
title="Description"
|
|
29
|
+
end={
|
|
30
|
+
<IconButton
|
|
31
|
+
transparent
|
|
32
|
+
accessibilityLabel="More information about coinDesk card news"
|
|
33
|
+
name="more"
|
|
34
|
+
variant="secondary"
|
|
35
|
+
/>
|
|
36
|
+
}
|
|
37
|
+
/>
|
|
38
|
+
</VStack>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Props
|
|
44
|
+
|
|
45
|
+
| Prop | Type | Required | Default | Description |
|
|
46
|
+
| --- | --- | --- | --- | --- |
|
|
47
|
+
| `title` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Name of the publisher |
|
|
48
|
+
| `alignContent` | `flex-start \| flex-end \| center \| stretch \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
49
|
+
| `alignItems` | `flex-start \| flex-end \| center \| stretch \| baseline` | No | `-` | - |
|
|
50
|
+
| `alignSelf` | `auto \| FlexAlignType` | No | `-` | - |
|
|
51
|
+
| `animated` | `boolean` | No | `-` | - |
|
|
52
|
+
| `aspectRatio` | `string \| number` | No | `-` | - |
|
|
53
|
+
| `avatar` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | A media object like an image, avatar, illustration, or cryptocurrency asset. |
|
|
54
|
+
| `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 | `-` | - |
|
|
55
|
+
| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
56
|
+
| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
57
|
+
| `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
58
|
+
| `borderColor` | `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 | `-` | - |
|
|
59
|
+
| `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
60
|
+
| `borderRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
61
|
+
| `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
62
|
+
| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
63
|
+
| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
|
|
64
|
+
| `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
65
|
+
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
|
|
66
|
+
| `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
|
|
67
|
+
| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
|
|
68
|
+
| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
|
|
69
|
+
| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
|
|
70
|
+
| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
|
|
71
|
+
| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
|
|
72
|
+
| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
|
|
73
|
+
| `bottom` | `string \| number` | No | `-` | - |
|
|
74
|
+
| `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 | `-` | - |
|
|
75
|
+
| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
76
|
+
| `dangerouslySetBackground` | `string` | No | `-` | - |
|
|
77
|
+
| `display` | `flex \| none` | No | `-` | - |
|
|
78
|
+
| `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
|
|
79
|
+
| `end` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Typically an Icon Button or Tag |
|
|
80
|
+
| `flexBasis` | `string \| number` | No | `-` | - |
|
|
81
|
+
| `flexDirection` | `row \| column \| row-reverse \| column-reverse` | No | `-` | - |
|
|
82
|
+
| `flexGrow` | `number` | No | `-` | - |
|
|
83
|
+
| `flexShrink` | `number` | No | `-` | - |
|
|
84
|
+
| `flexWrap` | `wrap \| nowrap \| wrap-reverse` | No | `-` | - |
|
|
85
|
+
| `font` | `inherit \| FontFamily` | No | `-` | - |
|
|
86
|
+
| `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
|
|
87
|
+
| `fontSize` | `inherit \| FontSize` | No | `-` | - |
|
|
88
|
+
| `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
|
|
89
|
+
| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
90
|
+
| `height` | `string \| number` | No | `-` | - |
|
|
91
|
+
| `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
|
|
92
|
+
| `key` | `Key \| null` | No | `-` | - |
|
|
93
|
+
| `left` | `string \| number` | No | `-` | - |
|
|
94
|
+
| `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
|
|
95
|
+
| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
96
|
+
| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
97
|
+
| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
98
|
+
| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
99
|
+
| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
100
|
+
| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
101
|
+
| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
|
|
102
|
+
| `maxHeight` | `string \| number` | No | `-` | - |
|
|
103
|
+
| `maxWidth` | `string \| number` | No | `-` | - |
|
|
104
|
+
| `meta` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Includes data like content category type and time |
|
|
105
|
+
| `minHeight` | `string \| number` | No | `-` | - |
|
|
106
|
+
| `minWidth` | `string \| number` | No | `-` | - |
|
|
107
|
+
| `onPointerCancel` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
108
|
+
| `onPointerCancelCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
109
|
+
| `onPointerDown` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
110
|
+
| `onPointerDownCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
111
|
+
| `onPointerEnter` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
112
|
+
| `onPointerEnterCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
113
|
+
| `onPointerLeave` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
114
|
+
| `onPointerLeaveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
115
|
+
| `onPointerMove` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
116
|
+
| `onPointerMoveCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
117
|
+
| `onPointerUp` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
118
|
+
| `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
|
|
119
|
+
| `opacity` | `number \| AnimatedNode` | No | `-` | - |
|
|
120
|
+
| `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
|
|
121
|
+
| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
122
|
+
| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
123
|
+
| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
124
|
+
| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
125
|
+
| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
126
|
+
| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
127
|
+
| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
128
|
+
| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
|
|
129
|
+
| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
|
|
130
|
+
| `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
|
|
131
|
+
| `right` | `string \| number` | No | `-` | - |
|
|
132
|
+
| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
|
|
133
|
+
| `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 | `-` | - |
|
|
134
|
+
| `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. |
|
|
135
|
+
| `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |
|
|
136
|
+
| `textDecorationLine` | `none \| underline \| line-through \| underline line-through` | No | `-` | - |
|
|
137
|
+
| `textDecorationStyle` | `solid \| dotted \| dashed \| double` | No | `-` | - |
|
|
138
|
+
| `textTransform` | `none \| capitalize \| uppercase \| lowercase` | No | `-` | - |
|
|
139
|
+
| `top` | `string \| number` | No | `-` | - |
|
|
140
|
+
| `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 | `-` | - |
|
|
141
|
+
| `userSelect` | `none \| auto \| contain \| text \| all` | No | `-` | - |
|
|
142
|
+
| `width` | `string \| number` | No | `-` | - |
|
|
143
|
+
| `zIndex` | `number` | No | `-` | - |
|
|
144
|
+
|
|
145
|
+
|