SmallTitle
SmallTitle is a basic title component in COUI used to create small-sized title text. It follows the COUI category title style (12sp, medium weight) with preset padding and a 16dp minimum text height.
Import
kotlin
import io.github.suqi8.coui.kmp.basic.SmallTitleBasic Usage
SmallTitle component can be used to display small title text:
kotlin
SmallTitle(
text = "Small Title"
)Customization
Custom Color
kotlin
SmallTitle(
text = "Small Title with Custom Color",
textColor = Color.Red
)Custom Padding
kotlin
SmallTitle(
text = "Small Title with Custom Padding",
insideMargin = PaddingValues(16.dp, 4.dp)
)Properties
SmallTitle Properties
| Property Name | Type | Description | Default Value | Required |
|---|---|---|---|---|
| text | String | Text content to display | - | Yes |
| modifier | Modifier | Modifier applied to component | Modifier | No |
| textColor | Color | Title text color | COUITheme.colorScheme.onBackgroundVariant | No |
| insideMargin | PaddingValues | Component internal padding | SmallTitleDefaults.InsideMargin | No |
SmallTitleDefaults Object
The SmallTitleDefaults object provides default values for SmallTitle components.
Constants
| Constant Name | Type | Description | Default Value |
|---|---|---|---|
| InsideMargin | PaddingValues | Component internal padding | PaddingValues(32.dp, 8.dp) |
| MinHeight | Dp | Minimum text height | 16.dp |
Advanced Usage
Using with Other Components
kotlin
var checked by remember { mutableStateOf(false) }
Column {
SmallTitle(text = "Settings")
Card(
modifier = Modifier.padding(horizontal = 12.dp).padding(bottom = 12.dp)
) {
SwitchPreference(
title = "Bluetooth",
checked = checked,
onCheckedChange = { checked = it }
)
}
HorizontalDivider(
modifier = Modifier.padding(horizontal = 12.dp)
)
SmallTitle(text = "Advanced Settings")
// Other settings items
}Custom Styling
kotlin
SmallTitle(
text = "Fully Customized Style",
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray),
textColor = Color.Blue,
insideMargin = PaddingValues(32.dp, 12.dp)
)
