Add a toggle button to switch enabled state for buttons in Catalog

pull/1425/head
Reza Moallemi 1 year ago
parent 7f2ce57c67
commit e5c0a817bd
No known key found for this signature in database
GPG Key ID: 8D26267C13FA6C2C

@ -19,6 +19,8 @@ package com.google.samples.apps.niacatalog.ui
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.add import androidx.compose.foundation.layout.add
import androidx.compose.foundation.layout.asPaddingValues import androidx.compose.foundation.layout.asPaddingValues
@ -34,8 +36,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaButton import com.google.samples.apps.nowinandroid.core.designsystem.component.NiaButton
@ -64,6 +68,9 @@ fun NiaCatalog() {
.systemBars .systemBars
.add(WindowInsets(left = 16.dp, top = 16.dp, right = 16.dp, bottom = 16.dp)) .add(WindowInsets(left = 16.dp, top = 16.dp, right = 16.dp, bottom = 16.dp))
.asPaddingValues() .asPaddingValues()
var buttonsEnabledState by remember { mutableStateOf(true) }
LazyColumn( LazyColumn(
modifier = Modifier.fillMaxSize(), modifier = Modifier.fillMaxSize(),
contentPadding = contentPadding, contentPadding = contentPadding,
@ -75,92 +82,76 @@ fun NiaCatalog() {
style = MaterialTheme.typography.headlineSmall, style = MaterialTheme.typography.headlineSmall,
) )
} }
item { Text("Buttons", Modifier.padding(top = 16.dp)) }
item { item {
FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) { Row(
NiaButton(onClick = {}) { verticalAlignment = Alignment.CenterVertically,
Text(text = "Enabled") ) {
} Text("Buttons")
NiaOutlinedButton(onClick = {}) { Spacer(modifier = Modifier.weight(1f))
Text(text = "Enabled") NiaTextButton(
} onClick = { buttonsEnabledState = !buttonsEnabledState },
NiaTextButton(onClick = {}) { ) {
Text(text = "Enabled") Text(text = "Toggle enabled")
} }
} }
} }
item { Text("Disabled buttons", Modifier.padding(top = 16.dp)) }
item { item {
FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) { FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
NiaButton( NiaButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false,
) { ) {
Text(text = "Disabled") Text(text = "Filled")
} }
NiaOutlinedButton( NiaOutlinedButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false,
) { ) {
Text(text = "Disabled") Text(text = "Outlined")
} }
NiaTextButton( NiaTextButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false,
) { ) {
Text(text = "Disabled") Text(text = "Text")
} }
} }
} }
item { Text("Buttons with leading icons", Modifier.padding(top = 16.dp)) }
item { item {
FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) { Row(
NiaButton( verticalAlignment = Alignment.CenterVertically,
onClick = {}, ) {
text = { Text(text = "Enabled") }, Text("Buttons with leading icons")
leadingIcon = { Spacer(modifier = Modifier.weight(1f))
Icon(imageVector = NiaIcons.Add, contentDescription = null)
},
)
NiaOutlinedButton(
onClick = {},
text = { Text(text = "Enabled") },
leadingIcon = {
Icon(imageVector = NiaIcons.Add, contentDescription = null)
},
)
NiaTextButton( NiaTextButton(
onClick = {}, onClick = { buttonsEnabledState = !buttonsEnabledState },
text = { Text(text = "Enabled") }, ) {
leadingIcon = { Text(text = "Toggle enabled")
Icon(imageVector = NiaIcons.Add, contentDescription = null) }
},
)
} }
} }
item { Text("Disabled buttons with leading icons", Modifier.padding(top = 16.dp)) }
item { item {
FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) { FlowRow(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
NiaButton( NiaButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false, text = { Text(text = "Filled") },
text = { Text(text = "Disabled") },
leadingIcon = { leadingIcon = {
Icon(imageVector = NiaIcons.Add, contentDescription = null) Icon(imageVector = NiaIcons.Add, contentDescription = null)
}, },
) )
NiaOutlinedButton( NiaOutlinedButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false, text = { Text(text = "Outlined") },
text = { Text(text = "Disabled") },
leadingIcon = { leadingIcon = {
Icon(imageVector = NiaIcons.Add, contentDescription = null) Icon(imageVector = NiaIcons.Add, contentDescription = null)
}, },
) )
NiaTextButton( NiaTextButton(
enabled = buttonsEnabledState,
onClick = {}, onClick = {},
enabled = false, text = { Text(text = "Text") },
text = { Text(text = "Disabled") },
leadingIcon = { leadingIcon = {
Icon(imageVector = NiaIcons.Add, contentDescription = null) Icon(imageVector = NiaIcons.Add, contentDescription = null)
}, },

Loading…
Cancel
Save