feat: update demo

samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Locales.kt

@@ -66,7 +66,7 @@ private val EnString = Strings(
     openLink = "Open Link",
     openLinkDescription = "Open the project URL in the browser?",
     open = "Open",
-    comfirm = "OK",
+    confirm = "OK",
     cancel = "Cancel",
     singlePageDemo = "Single Page Demo",
     singlePageDemoDescription = "Open a single page",
@@ -83,7 +83,41 @@ private val EnString = Strings(
     linearList = "Linear List",
     gridList = "Grid List",
     listRemoveSingle = "Remove this data",
-    listNoData = "No data to show"
+    listNoData = "No data to show",
+    textAndInput = "Text and Input",
+    enterTextHere = "Enter text here",
+    enterTextHereDescription = "The text you enter will be displayed here",
+    dropdownAndAutoComplete = "Dropdown and Auto Complete",
+    dropdownSimpleDescription = "Please select a data",
+    dropdownAndAutoCompleteDescription = "Enter the beginning of the text from the drop-down list above to experience autocompletion.",
+    simpleStringData = listOf(
+        "Week",
+        "Year",
+        "Month",
+        "Auto complete this text",
+        "Auto complete those text",
+        "The weather is nice today",
+        "Flexi UI is beautiful and useful"
+    ),
+    progressIndicator = "Progress Indicator",
+    progressTo30 = "Progress to 30%",
+    progressTo100 = "Progress to 100%",
+    useCircularIndicator = "Use circular progress indicator",
+    switchToIndeterminateProgress = "Switch to indeterminate progress",
+    dialog = "Dialog",
+    normalDialog = "Show a Normal Dialog",
+    normalDialogDescription = "This is a normal dialog.",
+    multiButtonDialog = "Multi-Button",
+    multiButtonDialogDescription = "In this dialog you have two options.",
+    dialogWithIcon = "With an Icon",
+    progressDialog = "Progress Indicator",
+    loadingDialog = "Loading",
+    singleInputDialog = "Single Input Box",
+    multiInputDialog = "Multi Input Box",
+    passwordInputDialog = "Password Input Box",
+    dropdownListDialog = "Dropdown List",
+    singleChoiceDialog = "Single Choice",
+    mutliChoiceDialog = "Multi Choice"
 )
 
 private val ZhCnString = Strings(
@@ -102,7 +136,7 @@ private val ZhCnString = Strings(
     openLink = "打开链接",
     openLinkDescription = "在浏览器中打开项目链接？",
     open = "打开",
-    comfirm = "确定",
+    confirm = "确定",
     cancel = "取消",
     singlePageDemo = "独立页面演示",
     singlePageDemoDescription = "打开一个独立页面",
@@ -119,7 +153,41 @@ private val ZhCnString = Strings(
     linearList = "线性列表",
     gridList = "九宫格列表",
     listRemoveSingle = "移除这条数据",
-    listNoData = "暂无数据"
+    listNoData = "暂无数据",
+    textAndInput = "文本与输入",
+    enterTextHere = "在这里输入文字",
+    enterTextHereDescription = "你输入的文字会显示在这里",
+    dropdownAndAutoComplete = "下拉列表与自动完成",
+    dropdownSimpleDescription = "请选择一项数据",
+    dropdownAndAutoCompleteDescription = "输入上方下拉列表中的文字开头部分可体验自动补全功能。",
+    simpleStringData = listOf(
+        "星期",
+        "年份",
+        "月份",
+        "自动补全这条文本",
+        "自动补全这些文本",
+        "今天天气很好",
+        "Flexi UI 美观且实用"
+    ),
+    progressIndicator = "进度指示器",
+    progressTo30 = "进度到 30%",
+    progressTo100 = "进度到 100%",
+    useCircularIndicator = "使用圆形进度条",
+    switchToIndeterminateProgress = "切换到不确定进度",
+    dialog = "对话框",
+    normalDialog = "显示一个普通对话框",
+    normalDialogDescription = "这是一个普通的对话框。",
+    multiButtonDialog = "多个按钮",
+    multiButtonDialogDescription = "在这个对话框中你有两个选择。",
+    dialogWithIcon = "带个图标",
+    progressDialog = "进度指示",
+    loadingDialog = "加载中",
+    singleInputDialog = "单行输入框",
+    multiInputDialog = "多行输入框",
+    passwordInputDialog = "密码输入框",
+    dropdownListDialog = "下拉列表",
+    singleChoiceDialog = "单项选择",
+    mutliChoiceDialog = "多项选择"
 )
 
 @Immutable
@@ -139,7 +207,7 @@ data class Strings(
     val openLink: String,
     val openLinkDescription: String,
     val open: String,
-    val comfirm: String,
+    val confirm: String,
     val cancel: String,
     val singlePageDemo: String,
     val singlePageDemoDescription: String,
@@ -153,5 +221,31 @@ data class Strings(
     val linearList: String,
     val gridList: String,
     val listRemoveSingle: String,
-    val listNoData: String
+    val listNoData: String,
+    val textAndInput: String,
+    val enterTextHere: String,
+    val enterTextHereDescription: String,
+    val dropdownAndAutoComplete: String,
+    val dropdownSimpleDescription: String,
+    val dropdownAndAutoCompleteDescription: String,
+    val simpleStringData: List<String>,
+    val progressIndicator: String,
+    val progressTo30: String,
+    val progressTo100: String,
+    val useCircularIndicator: String,
+    val switchToIndeterminateProgress: String,
+    val dialog: String,
+    val normalDialog: String,
+    val normalDialogDescription: String,
+    val multiButtonDialog: String,
+    val multiButtonDialogDescription: String,
+    val dialogWithIcon: String,
+    val progressDialog: String,
+    val loadingDialog: String,
+    val singleInputDialog: String,
+    val multiInputDialog: String,
+    val passwordInputDialog: String,
+    val dropdownListDialog: String,
+    val singleChoiceDialog: String,
+    val mutliChoiceDialog: String
 )

samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/Resources.kt

@@ -534,3 +534,195 @@ val FlexiIcons.DeleteForever by lazy {
         }
     }
 }
+
+val FlexiIcons.TextFields by lazy {
+    ImageVector(
+        name = "text_fields",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(2.5f, 5.5f)
+            curveTo(2.5f, 6.33f, 3.17f, 7f, 4f, 7f)
+            horizontalLineToRelative(3.5f)
+            verticalLineToRelative(10.5f)
+            curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
+            reflectiveCurveToRelative(1.5f, -0.67f, 1.5f, -1.5f)
+            verticalLineTo(7f)
+            horizontalLineTo(14f)
+            curveToRelative(0.83f, 0f, 1.5f, -0.67f, 1.5f, -1.5f)
+            reflectiveCurveTo(14.83f, 4f, 14f, 4f)
+            horizontalLineTo(4f)
+            curveToRelative(-0.83f, 0f, -1.5f, 0.67f, -1.5f, 1.5f)
+            close()
+            moveTo(20f, 9f)
+            horizontalLineToRelative(-6f)
+            curveToRelative(-0.83f, 0f, -1.5f, 0.67f, -1.5f, 1.5f)
+            reflectiveCurveTo(13.17f, 12f, 14f, 12f)
+            horizontalLineToRelative(1.5f)
+            verticalLineToRelative(5.5f)
+            curveToRelative(0f, 0.83f, 0.67f, 1.5f, 1.5f, 1.5f)
+            reflectiveCurveToRelative(1.5f, -0.67f, 1.5f, -1.5f)
+            verticalLineTo(12f)
+            horizontalLineTo(20f)
+            curveToRelative(0.83f, 0f, 1.5f, -0.67f, 1.5f, -1.5f)
+            reflectiveCurveTo(20.83f, 9f, 20f, 9f)
+            close()
+        }
+    }
+}
+
+val FlexiIcons.AutoList by lazy {
+    ImageVector(
+        name = "auto_list",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(22f, 8f)
+            curveToRelative(0f, -0.55f, -0.45f, -1f, -1f, -1f)
+            horizontalLineToRelative(-7f)
+            curveToRelative(-0.55f, 0f, -1f, 0.45f, -1f, 1f)
+            reflectiveCurveToRelative(0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(7f)
+            curveTo(21.55f, 9f, 22f, 8.55f, 22f, 8f)
+            close()
+            moveTo(13f, 16f)
+            curveToRelative(0f, 0.55f, 0.45f, 1f, 1f, 1f)
+            horizontalLineToRelative(7f)
+            curveToRelative(0.55f, 0f, 1f, -0.45f, 1f, -1f)
+            curveToRelative(0f, -0.55f, -0.45f, -1f, -1f, -1f)
+            horizontalLineToRelative(-7f)
+            curveTo(13.45f, 15f, 13f, 15.45f, 13f, 16f)
+            close()
+            moveTo(10.47f, 4.63f)
+            curveToRelative(0.39f, 0.39f, 0.39f, 1.02f, 0f, 1.41f)
+            lineToRelative(-4.23f, 4.25f)
+            curveToRelative(-0.39f, 0.39f, -1.02f, 0.39f, -1.42f, 0f)
+            lineTo(2.7f, 8.16f)
+            curveToRelative(-0.39f, -0.39f, -0.39f, -1.02f, 0f, -1.41f)
+            curveToRelative(0.39f, -0.39f, 1.02f, -0.39f, 1.41f, 0f)
+            lineToRelative(1.42f, 1.42f)
+            lineToRelative(3.54f, -3.54f)
+            curveTo(9.45f, 4.25f, 10.09f, 4.25f, 10.47f, 4.63f)
+            close()
+            moveTo(10.48f, 12.64f)
+            curveToRelative(0.39f, 0.39f, 0.39f, 1.02f, 0f, 1.41f)
+            lineToRelative(-4.23f, 4.25f)
+            curveToRelative(-0.39f, 0.39f, -1.02f, 0.39f, -1.42f, 0f)
+            lineTo(2.7f, 16.16f)
+            curveToRelative(-0.39f, -0.39f, -0.39f, -1.02f, 0f, -1.41f)
+            reflectiveCurveToRelative(1.02f, -0.39f, 1.41f, 0f)
+            lineToRelative(1.42f, 1.42f)
+            lineToRelative(3.54f, -3.54f)
+            curveTo(9.45f, 12.25f, 10.09f, 12.25f, 10.48f, 12.64f)
+            lineTo(10.48f, 12.64f)
+            close()
+        }
+    }
+}
+
+val FlexiIcons.Signpost by lazy {
+    ImageVector(
+        name = "signpost",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(13f, 10f)
+            lineToRelative(5f, 0f)
+            lineToRelative(3f, -3f)
+            lineToRelative(-3f, -3f)
+            lineToRelative(-5f, 0f)
+            lineToRelative(0f, -2f)
+            lineToRelative(-2f, 0f)
+            lineToRelative(0f, 2f)
+            lineToRelative(-7f, 0f)
+            lineToRelative(0f, 6f)
+            lineToRelative(7f, 0f)
+            lineToRelative(0f, 2f)
+            lineToRelative(-5f, 0f)
+            lineToRelative(-3f, 3f)
+            lineToRelative(3f, 3f)
+            lineToRelative(5f, 0f)
+            lineToRelative(0f, 4f)
+            lineToRelative(2f, 0f)
+            lineToRelative(0f, -4f)
+            lineToRelative(7f, 0f)
+            lineToRelative(0f, -6f)
+            lineToRelative(-7f, 0f)
+            close()
+        }
+    }
+}
+
+val FlexiIcons.Dialog by lazy {
+    ImageVector(
+        name = "dialog",
+        defaultWidth = 24.dp,
+        defaultHeight = 24.dp,
+        viewportWidth = 24f,
+        viewportHeight = 24f
+    ) {
+        path(
+            fill = SolidColor(Color.White),
+            fillAlpha = 1.0f,
+            strokeAlpha = 1.0f,
+            strokeLineWidth = 1.0f,
+            strokeLineCap = StrokeCap.Butt,
+            strokeLineJoin = StrokeJoin.Miter,
+            strokeLineMiter = 1.0f,
+            pathFillType = PathFillType.NonZero
+        ) {
+            moveTo(19f, 5f)
+            horizontalLineTo(5f)
+            curveTo(3.9f, 5f, 3f, 5.9f, 3f, 7f)
+            verticalLineToRelative(10f)
+            curveToRelative(0f, 1.1f, 0.9f, 2f, 2f, 2f)
+            horizontalLineToRelative(14f)
+            curveToRelative(1.1f, 0f, 2f, -0.9f, 2f, -2f)
+            verticalLineTo(7f)
+            curveTo(21f, 5.9f, 20.1f, 5f, 19f, 5f)
+            close()
+            moveTo(19f, 17f)
+            horizontalLineTo(5f)
+            verticalLineTo(7f)
+            horizontalLineToRelative(14f)
+            verticalLineTo(17f)
+            close()
+        }
+    }
+}

samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/LazyListScreen.kt

@@ -95,7 +95,7 @@ fun LazyListScreen() {
                             showRemoveAllDialog = false
                             testListData.clear()
                         }
-                    ) { Text(strings.comfirm) }
+                    ) { Text(strings.confirm) }
                 },
                 cancelButton = {
                     Button(
@@ -178,7 +178,9 @@ fun LazyListScreen() {
             }
             if (testListData.isNotEmpty()) when (index) {
                 0 -> LazyColumn(
-                    modifier = Modifier.fillMaxSize().padding(innerPadding),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding),
                     state = lazyListState,
                     verticalArrangement = ListSpacing
                 ) {
@@ -193,7 +195,9 @@ fun LazyListScreen() {
                     }
                 }
                 1 -> LazyVerticalGrid(
-                    modifier = Modifier.fillMaxSize().padding(innerPadding),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(innerPadding),
                     state = lazyGridState,
                     columns = GridCells.Adaptive(GridMaxWidth),
                     verticalArrangement = ListSpacing,
@@ -210,7 +214,9 @@ fun LazyListScreen() {
                     }
                 }
             } else Box(
-                modifier = Modifier.fillMaxSize().padding(innerPadding),
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(innerPadding),
                 contentAlignment = Alignment.Center
             ) { Text(strings.listNoData) }
         }

samples/composeApp/src/commonMain/kotlin/com/highcapable/flexiui/demo/screen/MainScreen.kt

@@ -45,35 +45,48 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.highcapable.betterandroid.compose.extension.ui.layout.AdaptiveRow
+import com.highcapable.flexiui.FlexiTheme
 import com.highcapable.flexiui.availableColorSchemes
 import com.highcapable.flexiui.component.AreaBox
 import com.highcapable.flexiui.component.AreaColumn
+import com.highcapable.flexiui.component.AutoCompleteOptions
 import com.highcapable.flexiui.component.Button
+import com.highcapable.flexiui.component.CircularProgressIndicator
 import com.highcapable.flexiui.component.DropdownList
 import com.highcapable.flexiui.component.DropdownMenuItem
 import com.highcapable.flexiui.component.HorizontalItemBox
 import com.highcapable.flexiui.component.Icon
 import com.highcapable.flexiui.component.IconDefaults
+import com.highcapable.flexiui.component.LinearProgressIndicator
 import com.highcapable.flexiui.component.NavigationBarItem
 import com.highcapable.flexiui.component.NavigationBarRow
 import com.highcapable.flexiui.component.PrimaryAppBar
 import com.highcapable.flexiui.component.Scaffold
 import com.highcapable.flexiui.component.SecondarySpacer
 import com.highcapable.flexiui.component.SecondaryText
+import com.highcapable.flexiui.component.Slider
 import com.highcapable.flexiui.component.StickyHeaderBar
 import com.highcapable.flexiui.component.SwitchItem
 import com.highcapable.flexiui.component.TertiarySpacer
 import com.highcapable.flexiui.component.Text
+import com.highcapable.flexiui.component.TextField
 import com.highcapable.flexiui.component.window.FlexiDialog
+import com.highcapable.flexiui.demo.AutoList
 import com.highcapable.flexiui.demo.Component
+import com.highcapable.flexiui.demo.Dialog
 import com.highcapable.flexiui.demo.GitHub
 import com.highcapable.flexiui.demo.Home
 import com.highcapable.flexiui.demo.Locale
 import com.highcapable.flexiui.demo.PROJECT_URL
 import com.highcapable.flexiui.demo.Preferences
 import com.highcapable.flexiui.demo.Screen
+import com.highcapable.flexiui.demo.Signpost
 import com.highcapable.flexiui.demo.Style
+import com.highcapable.flexiui.demo.TextFields
 import com.highcapable.flexiui.demo.displayName
 import com.highcapable.flexiui.demo.locales
 import com.highcapable.flexiui.demo.rememberRouter
@@ -145,6 +158,7 @@ fun MainScreen() {
         HorizontalPager(
             modifier = Modifier.fillMaxSize(),
             state = pagerState,
+            beyondBoundsPageCount = pageCount
         ) { index ->
             val modifier = Modifier.padding(innerPadding)
             when (index) {
@@ -158,7 +172,11 @@ fun MainScreen() {
 @Composable
 fun MainHomePage(modifier: Modifier) {
     val scrollState = rememberScrollState()
-    Column(modifier = modifier.fillMaxSize().verticalScroll(scrollState)) {
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+            .verticalScroll(scrollState)
+    ) {
         AreaBox(modifier = Modifier.fillMaxWidth()) { Text(strings.appDescription) }
         SecondarySpacer()
         AreaColumn(modifier = Modifier.fillMaxWidth()) {
@@ -268,9 +286,385 @@ fun MainHomePage(modifier: Modifier) {
 
 @Composable
 fun MainComponentPage(modifier: Modifier) {
-    // TODO: To be implemented.
+    val scrollState = rememberScrollState()
-    Box(
+    Column(
-        modifier = modifier.fillMaxSize(),
+        modifier = modifier
-        contentAlignment = Alignment.Center
+            .fillMaxSize()
-    ) { SecondaryText("To be implemented.", primaryFontSize = true) }
+            .verticalScroll(scrollState)
+    ) {
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            StickyHeaderBar(
+                modifier = Modifier.fillMaxWidth(),
+                icon = { Icon(FlexiIcons.TextFields) },
+                title = { Text(strings.textAndInput) }
+            )
+            SecondarySpacer()
+            val defaultFontSize = FlexiTheme.typography.primary.fontSize.value
+            val maxFontSize = 30f
+            var inputText by remember { mutableStateOf("") }
+            var fontSize by remember { mutableStateOf(defaultFontSize) }
+            TextField(
+                modifier = Modifier.fillMaxWidth(),
+                value = inputText,
+                onValueChange = { inputText = it },
+                placeholder = { Text(strings.enterTextHere) }
+            )
+            SecondarySpacer()
+            Text(
+                modifier = Modifier.align(Alignment.CenterHorizontally).padding(10.dp),
+                text = inputText.ifEmpty { strings.enterTextHereDescription },
+                fontSize = fontSize.sp,
+                textAlign = TextAlign.Center
+            )
+            SecondarySpacer()
+            Slider(
+                modifier = Modifier.fillMaxWidth(),
+                value = fontSize,
+                onValueChange = { fontSize = it },
+                max = maxFontSize
+            )
+        }
+        SecondarySpacer()
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            var expanded by remember { mutableStateOf(false) }
+            var selectedText by remember { mutableStateOf("") }
+            var inputText by remember { mutableStateOf("") }
+            StickyHeaderBar(
+                modifier = Modifier.fillMaxWidth(),
+                icon = { Icon(FlexiIcons.AutoList) },
+                title = { Text(strings.dropdownAndAutoComplete) }
+            )
+            SecondarySpacer()
+            DropdownList(
+                modifier = Modifier.fillMaxWidth(),
+                expanded = expanded,
+                onExpandedChange = { expanded = it },
+                text = { Text(selectedText.ifEmpty { strings.dropdownSimpleDescription }) },
+            ) {
+                strings.simpleStringData.forEach {
+                    DropdownMenuItem(
+                        actived = selectedText == it,
+                        onClick = {
+                            expanded = false
+                            selectedText = it
+                        }
+                    ) { Text(it) }
+                }
+            }
+            SecondarySpacer()
+            TextField(
+                modifier = Modifier.fillMaxWidth(),
+                value = inputText,
+                onValueChange = { inputText = it },
+                placeholder = { Text(strings.enterTextHere) },
+                singleLine = true,
+                completionValues = strings.simpleStringData,
+                completionOptions = AutoCompleteOptions(
+                    checkCase = false,
+                    threshold = 1
+                )
+            )
+            SecondarySpacer()
+            SecondaryText(
+                modifier = Modifier.align(Alignment.CenterHorizontally),
+                text = strings.dropdownAndAutoCompleteDescription,
+                textAlign = TextAlign.Center
+            )
+        }
+        SecondarySpacer()
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            var useCircularIndicator by remember { mutableStateOf(true) }
+            var indeterminate by remember { mutableStateOf(false) }
+            var progress by remember { mutableStateOf(30f) }
+            StickyHeaderBar(
+                modifier = Modifier.fillMaxWidth(),
+                icon = { Icon(FlexiIcons.Signpost) },
+                title = { Text(strings.progressIndicator) }
+            )
+            SecondarySpacer()
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(vertical = 10.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                if (useCircularIndicator)
+                    CircularProgressIndicator(
+                        progress = progress,
+                        max = 100f,
+                        indeterminate = indeterminate
+                    )
+                else
+                    LinearProgressIndicator(
+                        modifier = Modifier.fillMaxWidth(),
+                        progress = progress,
+                        max = 100f,
+                        indeterminate = indeterminate
+                    )
+            }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { progress = 30f }
+                ) { Text(strings.progressTo30, singleLine = true) }
+                Button(
+                    onClick = { progress = 100f }
+                ) { Text(strings.progressTo100, singleLine = true) }
+            }
+            SecondarySpacer()
+            SwitchItem(
+                checked = useCircularIndicator,
+                onCheckedChange = { useCircularIndicator = it }
+            ) { Text(strings.useCircularIndicator) }
+            SecondarySpacer()
+            SwitchItem(
+                checked = indeterminate,
+                onCheckedChange = { indeterminate = it }
+            ) { Text(strings.switchToIndeterminateProgress) }
+        }
+        SecondarySpacer()
+        AreaColumn(modifier = Modifier.fillMaxWidth()) {
+            StickyHeaderBar(
+                modifier = Modifier.fillMaxWidth(),
+                icon = { Icon(FlexiIcons.Dialog) },
+                title = { Text(strings.dialog) }
+            )
+            SecondarySpacer()
+            var showNormalDialog by remember { mutableStateOf(false) }
+            var showMultiButtonDialog by remember { mutableStateOf(false) }
+            var showDialogWithIcon by remember { mutableStateOf(false) }
+            var showLoadingDialog by remember { mutableStateOf(false) }
+            var showProgressDialog by remember { mutableStateOf(false) }
+            var showSingleInputDialog by remember { mutableStateOf(false) }
+            var showMultiInputDialog by remember { mutableStateOf(false) }
+            var showDropdownListDialog by remember { mutableStateOf(false) }
+            var showPasswordInputDialog by remember { mutableStateOf(false) }
+            var showSingleChoiceDialog by remember { mutableStateOf(false) }
+            var showMutliChoiceDialog by remember { mutableStateOf(false) }
+            NormalDialog(
+                visible = showNormalDialog,
+                onDismissRequest = { showNormalDialog = false }
+            )
+            MultiButtonDialog(
+                visible = showMultiButtonDialog,
+                onDismissRequest = { showMultiButtonDialog = false }
+            )
+            DialogWithIconDialog(
+                visible = showDialogWithIcon,
+                onDismissRequest = { showDialogWithIcon = false }
+            )
+            LoadingDialog(
+                visible = showLoadingDialog,
+                onDismissRequest = { showLoadingDialog = false }
+            )
+            ProgressDialog(
+                visible = showProgressDialog,
+                onDismissRequest = { showProgressDialog = false }
+            )
+            SingleInputDialog(
+                visible = showSingleInputDialog,
+                onDismissRequest = { showSingleInputDialog = false }
+            )
+            MultiInputDialog(
+                visible = showMultiInputDialog,
+                onDismissRequest = { showMultiInputDialog = false }
+            )
+            DropdownListDialog(
+                visible = showDropdownListDialog,
+                onDismissRequest = { showDropdownListDialog = false }
+            )
+            PasswordInputDialog(
+                visible = showPasswordInputDialog,
+                onDismissRequest = { showPasswordInputDialog = false }
+            )
+            SingleChoiceDialog(
+                visible = showSingleChoiceDialog,
+                onDismissRequest = { showSingleChoiceDialog = false }
+            )
+            MutliChoiceDialog(
+                visible = showMutliChoiceDialog,
+                onDismissRequest = { showMutliChoiceDialog = false }
+            )
+            Button(
+                modifier = Modifier.fillMaxWidth(),
+                onClick = { showNormalDialog = true }
+            ) { Text(strings.normalDialog, singleLine = true) }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { showMultiButtonDialog = true }
+                ) { Text(strings.multiButtonDialog, singleLine = true) }
+                Button(
+                    onClick = { showDialogWithIcon = true }
+                ) { Text(strings.dialogWithIcon, singleLine = true) }
+            }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { showLoadingDialog = true }
+                ) { Text(strings.loadingDialog, singleLine = true) }
+                Button(
+                    onClick = { showProgressDialog = true }
+                ) { Text(strings.progressDialog, singleLine = true) }
+            }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { showSingleInputDialog = true }
+                ) { Text(strings.singleInputDialog, singleLine = true) }
+                Button(
+                    onClick = { showMultiInputDialog = true }
+                ) { Text(strings.multiInputDialog, singleLine = true) }
+            }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { showDropdownListDialog = true }
+                ) { Text(strings.dropdownListDialog, singleLine = true) }
+                Button(
+                    onClick = { showPasswordInputDialog = true }
+                ) { Text(strings.passwordInputDialog, singleLine = true) }
+            }
+            SecondarySpacer()
+            AdaptiveRow(
+                modifier = Modifier.fillMaxWidth(),
+                spacingBetween = 10.dp
+            ) {
+                Button(
+                    onClick = { showSingleChoiceDialog = true }
+                ) { Text(strings.singleChoiceDialog, singleLine = true) }
+                Button(
+                    onClick = { showMutliChoiceDialog = true }
+                ) { Text(strings.mutliChoiceDialog, singleLine = true) }
+            }
+        }
+    }
+}
+
+@Composable
+private fun NormalDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    FlexiDialog(
+        visible = visible,
+        onDismissRequest = onDismissRequest,
+        title = { Text(strings.normalDialog) },
+        content = { Text(strings.normalDialogDescription) },
+        confirmButton = {
+            Button(
+                onClick = onDismissRequest
+            ) { Text(strings.confirm) }
+        }
+    )
+}
+
+@Composable
+private fun MultiButtonDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    FlexiDialog(
+        visible = visible,
+        onDismissRequest = onDismissRequest,
+        title = { Text(strings.multiButtonDialog) },
+        content = { Text(strings.multiButtonDialogDescription) },
+        confirmButton = {
+            Button(
+                onClick = onDismissRequest
+            ) { Text(strings.confirm) }
+        },
+        cancelButton = {
+            Button(
+                onClick = onDismissRequest
+            ) { Text(strings.cancel) }
+        }
+    )
+}
+
+@Composable
+private fun DialogWithIconDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Dialog with icon
+}
+
+@Composable
+private fun LoadingDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Loading dialog
+}
+
+@Composable
+private fun ProgressDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Progress dialog
+}
+
+@Composable
+private fun SingleInputDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Single input dialog
+}
+
+@Composable
+private fun MultiInputDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Multi input dialog
+}
+
+@Composable
+private fun DropdownListDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Dropdown list dialog
+}
+
+@Composable
+private fun PasswordInputDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Password input dialog
+}
+
+@Composable
+private fun SingleChoiceDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Single choice dialog
+}
+
+@Composable
+private fun MutliChoiceDialog(
+    visible: Boolean,
+    onDismissRequest: () -> Unit
+) {
+    // TODO: Multi choice dialog
 }