Em
Marks text to stress emphasis.
use radix_yew_themes::{Em, Text};
use yew::prelude::*;
#[function_component]
pub fn EmExample() -> Html {
html! {
<Text>
{"We "}<Em>{"had"}</Em>{" to do something about it."}
</Text>
}
}
API Reference
This component is based on the em element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
as_child | Option<Callback<EmChildProps>> | - |
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::{Em, Flex};
use yew::prelude::*;
#[function_component]
pub fn EmTruncateExample() -> Html {
html! {
<Flex max_width="300px">
<Em 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."}
</Em>
</Flex>
}
}