ActionCard

Functions summary

Unit

@Composable
ActionCard(
    action: @Composable () -> Unit,
    modifier: Modifier,
    title: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    header: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    content: @Composable () -> Unit
)

ActionCard is a version of a card that contains a primary action that is placed in the center of the bottom edge of the card.

Functions

ActionCard

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha15

@Composable
fun ActionCard(
    action: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    border: BorderStroke? = SurfaceDefaults.border(),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    content: @Composable () -> Unit
): Unit

ActionCard is a version of a card that contains a primary action that is placed in the center of the bottom edge of the card. The action should be a Button, and represents the action that will be performed when this card is interacted with. The main card itself is not focusable - the action takes the focus instead.

ActionCard is a component used to group related information into a single digestible unit. An action card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. An action card contains text content, and may also have any combination of title, subtitle, leadingIcon, and trailingIcon. If specified, title is placed on top of the subtitle, which is placed on top of the content. An action card fills the maximum width available by default.

For more documentation and samples of the other cards, see Card.

import androidx.xr.glimmer.ActionCard
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

ActionCard(action = { Button(onClick = {}) { Text("Send") } }, title = { Text("Title") }) {
    Text("This is a card with a title and action")
}

Parameters
`action: @Composable () -> Unit`	the action for this card. This should be a `Button`, and represents the action performed when a user interacts with this card. The action is placed overlapping the bottom edge of the card.
`modifier: Modifier = Modifier`	the `Modifier` to be applied to the outer layout containing the card and action
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon` tinted with `contentColor` by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon` tinted with `contentColor` by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title`, `subtitle`, `leadingIcon`, and `trailingIcon`.
`border: BorderStroke? = SurfaceDefaults.border()`	the border to draw around this card
`contentPadding: PaddingValues = CardDefaults.contentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`content: @Composable () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.