Skip to content

Instantly share code, notes, and snippets.

@snicmakino
Created February 2, 2022 20:19
Show Gist options
  • Save snicmakino/297d34e429c078624fde6771064ed6d2 to your computer and use it in GitHub Desktop.
Save snicmakino/297d34e429c078624fde6771064ed6d2 to your computer and use it in GitHub Desktop.
Dropdown by Compose Multiplatform
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.DropdownMenu
import androidx.compose.material.DropdownMenuItem
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun Dropdown() {
val options = listOf("Option 1", "Option 2", "Option 3", "Option 4", "Option 5")
val expanded = remember { mutableStateOf(false) }
val selectedOptionText = remember { mutableStateOf(options[0]) }
Box(
contentAlignment = Alignment.CenterStart,
modifier = Modifier
.size(250.dp, 32.dp)
.clip(RoundedCornerShape(4.dp))
.border(BorderStroke(1.dp, Color.LightGray), RoundedCornerShape(4.dp))
.clickable { expanded.value = !expanded.value },
) {
Text(
text = selectedOptionText.value,
fontSize = 14.sp,
modifier = Modifier.padding(start = 10.dp)
)
Icon(
Icons.Filled.ArrowDropDown, "contentDescription",
Modifier.align(Alignment.CenterEnd)
)
DropdownMenu(
expanded = expanded.value,
onDismissRequest = { expanded.value = false }
) {
options.forEach { selectionOption ->
DropdownMenuItem(
onClick = {
selectedOptionText.value = selectionOption
expanded.value = false
}
) {
Text(text = selectionOption)
}
}
}
}
}
@snicmakino
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment