Skip to main content
Version: 12.10.0

dialog

OCDialog - Composable Dialog for Android- A custom composable dialog tailored for Android using Jetpack Compose.

  1. Overview

OCDialog is a custom dialog tailored to present content in a visually appealing manner.

  1. Features

Customizable Content: Supports different styles, such as basic, bubble, and illustrative content presentation. Flexible Layout: It supports images, text, and buttons with customizable spacings. 3. Implementation

Main Components OCDialog: The primary composable function which shows a dialog based on the provided parameters. OCDialogContentStyle: Determines the style of content inside the dialog. OCDialogType: Specifies the type of dialog, whether it's basic, illustrative, or bubble. 4. Usage

To use OCDialog in your Jetpack Compose UI:

`@Preview
@Composable
fun OCDialogPreview() {
OCTheme {
Box(
modifier = Modifier
.fillMaxSize()
.background(OCTheme.colors.backgroundBackground),
) {
var showDialog by remember { mutableStateOf(true) }`

OCDialog(
showDialog = showDialog,
onDialogClose = { showDialog = false },
dialogType = OCDialogType.Bubble(),
contentStyle = OCDialogContentStyle.Content(
"A longer title can extend over multiple lines...",
"Description...",
true
),
ocButtonComposable = { onDismiss ->
OCButton(
onClick = { onDismiss() },
buttonType = PrimaryDanger,
title = "Button Title1",
modifier = Modifier.width(279.dp)
)
OCButton(
onClick = { },
buttonType = Secondary,
title = "Button Title2",
modifier = Modifier.width(279.dp)
)
OCTextButton(
onClick = { },
title = "Button Title3",
modifier = Modifier.width(279.dp)
)
}
)
}
}
`}`
  1. Customization

Dialog Types You can choose between three types of dialog designs:

Basic: Standard dialog without any additional graphics. Bubble: Features a bubble graphic with customizable icon, color, and position. Illustrative: Provides space for a centered image or illustration.

Content Style Specify the content style using OCDialogContentStyle.Content. This allows you to set the title, description, and visibility of the close button.

Colors Utilize the getBubbleColor composable to customize the bubble color based on OCColorType.