Strong
Marks text to signify strong importance.
use radix_yew_themes::{Strong, Text};
use yew::prelude::*;
#[function_component]
pub fn StrongExample() -> Html {
html! {
<Text>
{"The most important thing to remember is, "}<Strong>{"stay positive"}</Strong>{"."}
</Text>
}
}
API Reference
This component is based on the strong element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
as_child | Option<Callback<StrongChildProps>> | - |
truncate | Option<bool> | - |
wrap | Option<Responsive<TextWrap>> | - |
Examples
Truncate
Use the truncate prop to truncate text with an ellipsis when it overflows its container.
use radix_yew_themes::{Flex, Strong};
use yew::prelude::*;
#[function_component]
pub fn StrongTruncateExample() -> Html {
html! {
<Flex max_width="300px">
<Strong truncate=true>
{"The goal of typography is to relate font size, line height, and line width
in a proportional way that maximizes beauty and makes reading easier and
more pleasant."}
</Strong>
</Flex>
}
}