Design/net.ikea.skapa.ui.components/InlineMessage

InlineMessage

@Composable
fun InlineMessage(body: String, modifier: Modifier = Modifier, title: String? = null, variant: InlineMessageVariant = InlineMessageVariant.Informative, @DrawableRes iconId: Int? = R.drawable.ic_inline_message_informative, style: InlineMessageStyle = Emphasised, visibility: InlineMessageVisibility = InlineMessageVisibility.Visible, dismissible: DismissParams? = null)

Inline Message is use to displays highly contextual, non-interruptive messages inline with content.

Note: if you are looking for a version with a actions look for the Composable with InlineMessageActions.

Parameters

body

string to be display as main message.

modifier

Modifier to be applied to the InlineMessage.

title

optional string to be display at the top of the InlineMessage. title will not display when style is set to InlineMessageStyle.Subtle.

variant

InlineMessageVariant defines the semantic meaning of the message.

iconId

resources object to query the image file from.

style

defines the visual accentuation of the InlineMessage, with InlineMessageStyle.Subtle the title will is removed and the surface flattened.

visibility

InlineMessageVisibility enum that handles visibility state of the component

dismissible

DismissParams if provided, the component will display a close button in the top, close interaction need to be handle trough visibility and DismissParams.onDismissRequest.

See also

Samples

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.DismissParams
import net.ikea.skapa.ui.components.InlineMessage
import net.ikea.skapa.ui.components.InlineMessageStyle
import net.ikea.skapa.ui.components.InlineMessageVariant
import net.ikea.skapa.ui.components.InlineMessageVisibility

fun main() { 
   //sampleStart 
   var showInlineMessage by remember { mutableStateOf(InlineMessageVisibility.Visible) }
var loading by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    with(SkapaSpacing) {
        Column(
            modifier = Modifier.padding(horizontal = space125)
        ) {
            Box(
                modifier = Modifier
                    .background(SkapaTheme.colors.neutral3)
                    .height(space1000)
                    .fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(space100))
            InlineMessage(
                title = "Upload failed",
                body = "Check your internet connection and try please again.",
                variant = InlineMessageVariant.Negative,
                style = InlineMessageStyle.Emphasised,
                modifier = Modifier.padding(bottom = space150),
                dismissible = DismissParams(
                    onDismissRequest = {
                        showInlineMessage = InlineMessageVisibility.Hidden
                    },
                    dismissButtonContentDescription = "Close"
                )
            )
            Button(
                label = "Upload Image",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = space150),
                loading = loading,
                variant = ButtonVariant.Emphasised
            ) {
                loading = true
                scope.launch {
                    delay(3000L)
                    loading = false
                    showInlineMessage = InlineMessageVisibility.Visible
                }
            }
        }
    }
} 
   //sampleEnd
}
@Composable
fun InlineMessage(body: String, actions: InlineMessageActions, modifier: Modifier = Modifier, title: String? = null, variant: InlineMessageVariant = InlineMessageVariant.Informative, @DrawableRes iconId: Int? = R.drawable.ic_inline_message_informative, visibility: InlineMessageVisibility = InlineMessageVisibility.Visible, dismissible: DismissParams? = null)

Inline Message is use to displays highly contextual, non-interruptive messages inline with content.

Parameters

body

string to be display as main message.

actions

InlineMessageActions to be added to the component, first and second action type is InlineMessageActionParams.

modifier

Modifier to be applied to the InlineMessage.

title

optional string to be display at the top of the InlineMessage.

variant

InlineMessageVariant defines the semantic meaning of the message.

iconId

resources object to query the image file from.

visibility

InlineMessageVisibility enum that handles visibility state of the component

dismissible

DismissParams if provided, the component will display a close button in the top, close interaction need to be handle trough visibility and DismissParams.onDismissRequest.

See also

Samples

import androidx.compose.foundation.background
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.DismissParams
import net.ikea.skapa.ui.components.InlineMessage
import net.ikea.skapa.ui.components.InlineMessageStyle
import net.ikea.skapa.ui.components.InlineMessageVariant
import net.ikea.skapa.ui.components.InlineMessageVisibility

fun main() { 
   //sampleStart 
   var showInlineMessage by remember { mutableStateOf(InlineMessageVisibility.Visible) }
var loading by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()
SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
    with(SkapaSpacing) {
        Column(
            modifier = Modifier.padding(horizontal = space125)
        ) {
            Box(
                modifier = Modifier
                    .background(SkapaTheme.colors.neutral3)
                    .height(space1000)
                    .fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(space100))
            InlineMessage(
                title = "Upload failed",
                body = "Check your internet connection and try please again.",
                variant = InlineMessageVariant.Negative,
                style = InlineMessageStyle.Emphasised,
                modifier = Modifier.padding(bottom = space150),
                dismissible = DismissParams(
                    onDismissRequest = {
                        showInlineMessage = InlineMessageVisibility.Hidden
                    },
                    dismissButtonContentDescription = "Close"
                )
            )
            Button(
                label = "Upload Image",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = space150),
                loading = loading,
                variant = ButtonVariant.Emphasised
            ) {
                loading = true
                scope.launch {
                    delay(3000L)
                    loading = false
                    showInlineMessage = InlineMessageVisibility.Visible
                }
            }
        }
    }
} 
   //sampleEnd
}