Text

Text component is a basic text component in Miuix, used to display text content. It supports customizing various text styles, alignment, and decoration effects.

Import

import top.yukonga.miuix.kmp.basic.Text

Basic Usage

The simplest text display:

Text("This is a basic text")

Text Styles

Miuix provides multiple predefined text styles:

Text(
    text = "Title Text",
    style = MiuixTheme.textStyles.headline1
)

Text(
    text = "Subtitle Text",
    style = MiuixTheme.textStyles.subtitle
)
Text(
    text = "Summary Text",
    style = MiuixTheme.textStyles.body2
)

Text(
    text = "Main Text",
    style = MiuixTheme.textStyles.main
)

Text Color

Text(
    text = "Default Color Text",
    color = MiuixTheme.colorScheme.onBackground
)

Text(
    text = "Primary Color Text",
    color = MiuixTheme.colorScheme.primary
)

Text(
    text = "Secondary Text",
    color = MiuixTheme.colorScheme.onSurfaceContainerVariant
)

Properties

Text (String) Properties

Property Name	Type	Description	Default Value	Required
text	String	The text content to display	-	Yes
modifier	Modifier	Modifiers applied to the text	Modifier	No
color	Color	Text color	Color.Unspecified	No
autoSize	TextAutoSize?	Auto-sizing behavior for text	null	No
fontSize	TextUnit	Text size	TextUnit.Unspecified	No
fontStyle	FontStyle?	Text font style (e.g., italic)	null	No
fontWeight	FontWeight?	Text font weight	null	No
fontFamily	FontFamily?	Text font family	null	No
letterSpacing	TextUnit	Letter spacing	TextUnit.Unspecified	No
textDecoration	TextDecoration?	Text decoration (e.g., underline)	null	No
textAlign	TextAlign?	Text alignment	null	No
lineHeight	TextUnit	Line height	TextUnit.Unspecified	No
overflow	TextOverflow	Text overflow handling	TextOverflow.Clip	No
softWrap	Boolean	Whether to wrap text automatically	true	No
maxLines	Int	Maximum number of lines	Int.MAX_VALUE	No
minLines	Int	Minimum number of lines	1	No
onTextLayout	((TextLayoutResult) -> Unit)?	Callback after layout	null	No
style	TextStyle	Text style	MiuixTheme.textStyles.main	No

Text (AnnotatedString) Properties

Property Name	Type	Description	Default Value	Required
text	AnnotatedString	Rich text with annotations	-	Yes
modifier	Modifier	Modifiers applied to the text	Modifier	No
color	Color	Text color	Color.Unspecified	No
autoSize	TextAutoSize?	Auto-sizing behavior for text	null	No
fontSize	TextUnit	Text size	TextUnit.Unspecified	No
fontStyle	FontStyle?	Text font style	null	No
fontWeight	FontWeight?	Text font weight	null	No
fontFamily	FontFamily?	Text font family	null	No
letterSpacing	TextUnit	Letter spacing	TextUnit.Unspecified	No
textDecoration	TextDecoration?	Text decoration	null	No
textAlign	TextAlign?	Text alignment	null	No
lineHeight	TextUnit	Line height	TextUnit.Unspecified	No
overflow	TextOverflow	Text overflow handling	TextOverflow.Clip	No
softWrap	Boolean	Whether to wrap text automatically	true	No
maxLines	Int	Maximum number of lines	Int.MAX_VALUE	No
minLines	Int	Minimum number of lines	1	No
inlineContent	Map<String, InlineTextContent>	Mapping for inserting inline composables	mapOf()	No
onTextLayout	(TextLayoutResult) -> Unit	Callback after text layout is completed	{}	No
style	TextStyle	Text style	MiuixTheme.textStyles.main	No

Advanced Usage

Multi-line Text Truncation

Text(
    text = "This is a very long text that will be truncated and show ellipsis when there is not enough space. This is useful for displaying long content summaries.",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

Text Decoration

Text(
    text = "Underlined Text",
    textDecoration = TextDecoration.Underline
)

Text(
    text = "Strikethrough Text",
    textDecoration = TextDecoration.LineThrough
)

Rich Text Mixing

Text(
    buildAnnotatedString {
        withStyle(style = SpanStyle(color = MiuixTheme.colorScheme.primary)) {
            append("Miuix ")
        }
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
            append("UI Library")
        }
        append(", this is a piece of rich text")
    }
)

Auto-sizing Text

Automatically fit text within available space using TextAutoSize:

Text(
    text = "Adaptive text",
    autoSize = TextAutoSize.StepBased(
        minFontSize = 12.sp,
        maxFontSize = 17.sp,
        stepSize = 0.3.sp
    )
)

Clickable Links

Use AnnotatedString with LinkAnnotation to create clickable links:

val annotated = buildAnnotatedString {
    append("Visit ")
    val start = length
    append("Miuix Docs")
    addLink(
        LinkAnnotation.Url(
            url = "https://compose-miuix-ui.github.io/miuix/",
            styles = TextLinkStyles(
                SpanStyle(color = MiuixTheme.colorScheme.primary, fontWeight = FontWeight.Bold)
            )
        ),
        start = start,
        end = length
    )
}

Text(text = annotated)

Changelog

Last edited 1 day ago

View full history

4007f40-docs: fix errors

1871e58-docs: Update theme docs

24a5db6-library: Refactor Text from androidx-main

752f3df-docs: Preview for components in documentation website (#80)

7b99e64-docs: Add English version through AI translation

ab6bb69-chore: Add documents (#63)