# RemoteCard

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)( onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction, modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier, enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean, shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors, border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a single slot to take any content. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)( onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction, containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter, modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier, enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean, shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors, border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a single slot to take any content, with a background image. |

## Functions

### RemoteCard

Artifact: [androidx.wear.compose.remote:remote-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose-remote) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/remote/material3/RemoteCard.kt+function:RemoteCard) Added in [1.0.0-alpha15](https://developer.android.com/jetpack/androidx/releases/wear-compose-remote#1.0.0-alpha15)

```
@RemoteComposable
@Composable
fun RemoteCard(
    onClick: RemoteAction,
    modifier: RemoteModifier = RemoteModifier,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardColors(),
    border: RemoteBorderStroke? = null,
    contentPadding: RemotePaddingValues = RemoteCardDefaults.ContentPadding,
    content: @Composable @RemoteComposable () -> Unit
): Unit
```

Base level Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a single slot to take any content.

Is used as the container for more opinionated `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` components that take specific content such as icons, images, titles, subtitles and labels.

```kotlin
import androidx.compose.remote.creation.compose.action.RemoteAction
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteCard
import androidx.wear.compose.remote.material3.RemoteText

RemoteCard(onClick = RemoteAction.Empty, modifier = RemoteModifier.padding(16.rdp)) {
    RemoteText("This is a basic card".rs)
}
```

| Parameters |
|---|---|
| `onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction` | Will be called when the user clicks the card |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier = RemoteModifier` | Modifier to be applied to the card |
| `enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean = true.rb` | Controls the enabled state of the card. When false, this component will not respond to user input |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape = RemoteCardDefaults.shape` | Defines the card's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors = RemoteCardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` that will be used to resolve the colors used for this card. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#cardColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke? = null` | A `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke` used for drawing the card's outline border |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues = RemoteCardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for the content of this card |

### RemoteCard

Artifact: [androidx.wear.compose.remote:remote-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose-remote) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/remote/material3/RemoteCard.kt+function:RemoteCard) Added in [1.0.0-alpha15](https://developer.android.com/jetpack/androidx/releases/wear-compose-remote#1.0.0-alpha15)

```
@RemoteComposable
@Composable
fun RemoteCard(
    onClick: RemoteAction,
    containerPainter: RemotePainter,
    modifier: RemoteModifier = RemoteModifier,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors(),
    border: RemoteBorderStroke? = null,
    contentPadding: RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding,
    content: @Composable @RemoteComposable () -> Unit
): Unit
```

Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` that offers a single slot to take any content, with a background image.

An Image background is a means to reinforce the meaning of information in a Card, e.g. to help to contextualize the information. Cards should have a content color that contrasts with the background image and scrim. This `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` takes `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/package-summary#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)` for the container image background to be drawn (the `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` containerColor property is ignored). It is recommended to use `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#containerPainter(androidx.compose.remote.creation.compose.state.RemoteImageBitmap,androidx.compose.remote.creation.compose.shaders.RemoteBrush,androidx.compose.remote.creation.compose.state.RemoteFloat,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.ui.layout.ContentScale)` to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

```kotlin
import androidx.compose.remote.creation.compose.action.RemoteAction
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.RemoteImageBitmap.Companion.createNamedRemoteImageBitmap
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.asImageBitmap
import androidx.wear.compose.remote.material3.RemoteCard
import androidx.wear.compose.remote.material3.RemoteCardDefaults
import androidx.wear.compose.remote.material3.RemoteText
import androidx.wear.compose.remote.material3.previews.utils.createImage

val backgroundImage = remember {
    createNamedRemoteImageBitmap(name = "backgroundImage") {
        createImage(200, 200).asImageBitmap()
    }
}
val containerPainter = RemoteCardDefaults.containerPainter(backgroundImage)
RemoteCard(
    onClick = RemoteAction.Empty,
    containerPainter = containerPainter,
    modifier = RemoteModifier.padding(16.rdp),
) {
    RemoteText("Card with image".rs)
}
```

| Parameters |
|---|---|
| `onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction` | Will be called when the user clicks the card |
| `containerPainter: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter` | The `https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/painter/RemotePainter` to use to draw the container image of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCard.composable#RemoteCard(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.painter.RemotePainter,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.wear.compose.remote.material3.RemoteCardColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function0)`, such as returned by `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#containerPainter(androidx.compose.remote.creation.compose.state.RemoteImageBitmap,androidx.compose.remote.creation.compose.shaders.RemoteBrush,androidx.compose.remote.creation.compose.state.RemoteFloat,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.ui.layout.ContentScale)`. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier = RemoteModifier` | Modifier to be applied to the card |
| `enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean = true.rb` | Controls the enabled state of the card. When false, this component will not respond to user input |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape = RemoteCardDefaults.shape` | Defines the card's shape. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardColors` that will be used to resolve the colors used for this card. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteCardDefaults#cardWithContainerPainterColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke? = null` | A `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke` used for drawing the card's outline border |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding` | The spacing values to apply internally between the container and the content |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for the content of this card |