CardKt

Added in 1.0.0-alpha01

Kotlin |Java

public final class CardKt

Summary

Public methods
`static final void`	@Composable Card( @Composable @NonNull Function0<Unit> action, @NonNull Modifier modifier, @Composable Function0<Unit> title, @Composable Function0<Unit> subtitle, @Composable Function0<Unit> header, @Composable Function0<Unit> leadingIcon, @Composable Function0<Unit> trailingIcon, @NonNull Shape shape, @NonNull Color color, @NonNull Color contentColor, BorderStroke border, @NonNull PaddingValues contentPadding, @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.
`static final void`	@Composable Card( @NonNull Modifier modifier, @Composable Function0<Unit> title, @Composable Function0<Unit> subtitle, @Composable Function0<Unit> header, @Composable Function0<Unit> leadingIcon, @Composable Function0<Unit> trailingIcon, @NonNull Shape shape, @NonNull Color color, @NonNull Color contentColor, BorderStroke border, @NonNull PaddingValues contentPadding, MutableInteractionSource interactionSource, @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.
`static final void`	@Composable Card( @NonNull Function0<Unit> onClick, @NonNull Modifier modifier, @Composable Function0<Unit> title, @Composable Function0<Unit> subtitle, @Composable Function0<Unit> header, @Composable Function0<Unit> leadingIcon, @Composable Function0<Unit> trailingIcon, @NonNull Shape shape, @NonNull Color color, @NonNull Color contentColor, BorderStroke border, @NonNull PaddingValues contentPadding, MutableInteractionSource interactionSource, @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.

Public methods

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
public static final void Card(
    @Composable @NonNull Function0<Unit> action,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function0<Unit> content
)

Card is a component used to group related information into a single digestible unit. A card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. A 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. A card fills the maximum width available by default.

This Card contains an action that is placed on 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.

For more documentation and samples of the other card parameters, see the other card overload without an action.

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

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

Parameters
`@Composable @NonNull Function0<Unit> action`	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.
`@NonNull Modifier modifier`	the `Modifier` to be applied to the outer layout containing the card and action
`@Composable Function0<Unit> title`	optional title to be placed above `subtitle` and `content`, below `header`
`@Composable Function0<Unit> subtitle`	optional subtitle to be placed above `content`, below `title`
`@Composable Function0<Unit> header`	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.
`@Composable Function0<Unit> leadingIcon`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@Composable Function0<Unit> trailingIcon`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@NonNull Shape shape`	the `Shape` used to clip this card, and also used to draw the background and border
`@NonNull Color color`	background color of this card
`@NonNull Color contentColor`	content color used by components inside `content`, `title` and `subtitle`.
`BorderStroke border`	the border to draw around this card
`@NonNull PaddingValues 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.
`@Composable @NonNull Function0<Unit> content`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
public static final void Card(
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

This Card is focusable - see the other Card overload for a clickable Card.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card { Text("This is a card") }

A Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`@NonNull Modifier modifier`	the `Modifier` to be applied to this card
`@Composable Function0<Unit> title`	optional title to be placed above `subtitle` and `content`, below `header`
`@Composable Function0<Unit> subtitle`	optional subtitle to be placed above `content`, below `title`
`@Composable Function0<Unit> header`	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.
`@Composable Function0<Unit> leadingIcon`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@Composable Function0<Unit> trailingIcon`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@NonNull Shape shape`	the `Shape` used to clip this card, and also used to draw the background and border
`@NonNull Color color`	background color of this card
`@NonNull Color contentColor`	content color used by components inside `content`, `title` and `subtitle`.
`BorderStroke border`	the border to draw around this card
`@NonNull PaddingValues 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.
`MutableInteractionSource interactionSource`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`@Composable @NonNull Function0<Unit> content`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
public static final void Card(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

This Card is focusable and clickable - see the other Card overload for a Card that is only focusable.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple clickable Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(onClick = {}) { Text("This is a card") }

A clickable Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A clickable Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A clickable Card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`@NonNull Function0<Unit> onClick`	called when this card item is clicked
`@NonNull Modifier modifier`	the `Modifier` to be applied to this card
`@Composable Function0<Unit> title`	optional title to be placed above `subtitle` and `content`, below `header`
`@Composable Function0<Unit> subtitle`	optional subtitle to be placed above `content`, below `title`
`@Composable Function0<Unit> header`	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.
`@Composable Function0<Unit> leadingIcon`	optional leading icon to be placed before `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@Composable Function0<Unit> trailingIcon`	optional trailing icon to be placed after `content`. This is typically an `Icon`. `Colors.primary` is provided as the content color by default.
`@NonNull Shape shape`	the `Shape` used to clip this card, and also used to draw the background and border
`@NonNull Color color`	background color of this card
`@NonNull Color contentColor`	content color used by components inside `content`, `title` and `subtitle`.
`BorderStroke border`	the border to draw around this card
`@NonNull PaddingValues 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.
`MutableInteractionSource interactionSource`	an optional hoisted `MutableInteractionSource` for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if `null` is provided, interactions will still happen internally.
`@Composable @NonNull Function0<Unit> content`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.