surface

surface

@Composable
public fun Modifier.surface(
    focusable: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depthEffect: SurfaceDepthEffect? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: MutableInteractionSource? = null,
): Modifier

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A surface is responsible for: 1) Clipping: a surface clips its children to the shape specified by shape 2) Border: a surface draws an inner border to emphasize the boundary of the component. 3) Background: a surface has a background color of color. 4) Depth effect: a surface can have different DepthEffect shadows for different states, as specified by depthEffect. 5) Content color: a surface provides a contentColor for text and icons inside the surface. By default this is calculated from the provided background color. 6) Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from interactionSource, whether this surface is focusable or not.

This surface is focusable by default - set focusable to false for un-interactive / decorative surfaces. For handling clicks, use the other surface overload with an onClick parameter.

Simple usage:

For custom gesture handling, add the gesture modifier after this surface, and provide a shared MutableInteractionSource to enable this surface to handle focus / press states. You should also pass false for focusable if that modifier already includes a focus target by default. For example, to create a toggleable surface:

Parameters

surface

@Composable
public fun Modifier.surface(
    enabled: Boolean = true,
    shape: Shape = GlimmerTheme.shapes.medium,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    depthEffect: SurfaceDepthEffect? = null,
    border: BorderStroke? = SurfaceDefaults.border(),
    interactionSource: MutableInteractionSource? = null,
    onClick: () -> Unit,
): Modifier

A surface is a fundamental building block in Glimmer. A surface represents a distinct visual area or 'physical' boundary for components such as buttons and cards. A surface is responsible for: 1) Clipping: a surface clips its children to the shape specified by shape 2) Border: a surface draws an inner border to emphasize the boundary of the component. When focused, a surface draws a wider border with a focused highlight on top to indicate the focus state. 3) Background: a surface has a background color of color. 4) Depth effect: a surface can have different DepthEffect shadows for different states, as specified by depthEffect. 5) Content color: a surface provides a contentColor for text and icons inside the surface. By default this is calculated from the provided background color. 6) Interaction states: when focused, a surface displays draws a wider border with a focused highlight on top. When pressed, a surface draws a pressed overlay. This happens for interactions emitted from interactionSource, whether this surface is enabled or not.

This surface is focusable and handles clicks. For non-clickable surfaces, use the other overload of surface instead. For surfaces with custom gesture handling, refer to the sample and guidance on the other overload of surface.

Parameters