A simple and customizable "See More" Text for Jetpack Compose.
Effortlessly create expandable and collapsible material3 Text composables that handle overflow.
It supports all KMP targets that are supported by Compose Multiplatform.
repositories {
mavenCentral()
}
dependencies {
implementation("com.eygraber:seymour-text:0.0.20")
}
Snapshots can be found here.
Here are some examples of how to use SeymourText.
Simple expandable text with default styling.
var isExpanded by remember { mutableStateOf(false) }
SeymourText(
onSeeMoreChange = { isExpanded = it },
isSeeMoreExpanded = isExpanded,
text = "...",
seeMoreText = "…see more",
seeLessText = " See less",
seeMoreMaxLines = 3,
seeLessMaxLines = Int.MAX_VALUE,
)Text with custom see more/less link styling.
var isExpanded by remember { mutableStateOf(false) }
SeymourText(
onSeeMoreChange = { isExpanded = it },
isSeeMoreExpanded = isExpanded,
text = "...",
seeMoreText = "…see more",
seeLessText = " See less",
seeMoreMaxLines = 3,
seeLessMaxLines = Int.MAX_VALUE,
seeMoreStyle = SpanStyle(
color = MaterialTheme.colorScheme.primary,
fontWeight = FontWeight.Bold,
fontSize = 14.sp,
),
seeLessStyle = SpanStyle(
color = MaterialTheme.colorScheme.secondary,
fontWeight = FontWeight.Bold,
fontSize = 14.sp,
)
)Text with larger font size and different styling that can't be collapsed.
var isExpanded by remember { mutableStateOf(false) }
SeymourText(
onSeeMoreChange = { if(it) isExpanded = it },
isSeeMoreExpanded = isExpanded,
text = "...",
seeMoreText = "…see more",
seeMoreMaxLines = 3,
seeLessMaxLines = Int.MAX_VALUE,
style = MaterialTheme.typography.bodyLarge.copy(
fontSize = 16.sp,
lineHeight = 24.sp,
),
seeMoreStyle = SpanStyle(
color = Color.Blue,
fontWeight = FontWeight.Medium,
)
)Text with see more/less links outside of the text.
var isExpanded by remember { mutableStateOf(false) }
SeymourText(
isSeeMoreExpanded = isExpanded,
text = "...",
seeMoreMaxLines = 3,
seeLessMaxLines = Int.MAX_VALUE,
seeMoreContent = {
TextButton(
onClick = { isExpanded = !isExpanded },
) {
Text(
text = if(isExpanded) "See less" else "…see more",
style = MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colorScheme.primary,
),
)
}
},
)Text with a see more link outside of the text that can't be collapsed.
var isExpanded by remember { mutableStateOf(false) }
SeymourText(
isSeeMoreExpanded = isExpanded,
text = "...",
seeMoreMaxLines = 3,
seeLessMaxLines = Int.MAX_VALUE,
seeMoreContent = {
if(!isExpanded) {
TextButton(
onClick = { isExpanded = !isExpanded },
) {
Text(
text = "…see more",
style = MaterialTheme.typography.bodyMedium.copy(
color = MaterialTheme.colorScheme.primary,
),
)
}
}
},
)