Code

Marks text to signify a short fragment of computer code.

use radix_yew_themes::Code;
use yew::prelude::*;

#[function_component]
pub fn CodeExample() -> Html {
    html! {
        <Code>{"console.log()"}</Code>
    }
}

API Reference

This component is based on the code element and supports common margin props.

Prop	Type	Default
`as_child`	`Option<Callback<CodeChildProps>>`	-
`size`	`Option<Responsive<1..9>>`	-
`variant`	`CodeVariant`	`CodeVariant::Soft`
`weight`	`Option<Responsive<Weight>>`	-
`color`	`Option<AccentColor>`	-
`high_contrast`	`Option<bool>`	-
`truncate`	`Option<bool>`	-
`wrap`	`Option<Responsive<TextWrap>>`	-

Examples

Size

Use the size prop to control text size. This prop also provides correct line height and corrective letter spacing - as text size increases, the relative line height and letter spacing decrease.

use radix_yew_themes::{Code, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeSizeExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=3 align={FlexAlign::Start}>
            <Code size=1>{"console.log()"}</Code>
            <Code size=2>{"console.log()"}</Code>
            <Code size=3>{"console.log()"}</Code>
            <Code size=4>{"console.log()"}</Code>
            <Code size=5>{"console.log()"}</Code>
            <Code size=6>{"console.log()"}</Code>
            <Code size=7>{"console.log()"}</Code>
            <Code size=8>{"console.log()"}</Code>
            <Code size=9>{"console.log()"}</Code>
        </Flex>
    }
}

Variant

Use the variant prop to control the visual style.

use radix_yew_themes::{Code, CodeVariant, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeVariantExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
            <Code variant={CodeVariant::Solid}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Soft}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Outline}>{"console.log()"}</Code>
            <Code variant={CodeVariant::Ghost}>{"console.log()"}</Code>
        </Flex>
    }
}

Color

Use the color prop to assign a specific color.

use radix_yew_themes::{AccentColor, Code, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeColorExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
            <Code color={AccentColor::Indigo}>{"console.log()"}</Code>
            <Code color={AccentColor::Crimson}>{"console.log()"}</Code>
            <Code color={AccentColor::Cyan}>{"console.log()"}</Code>
            <Code color={AccentColor::Orange}>{"console.log()"}</Code>
        </Flex>
    }
}

High-Contrast

Use the high_contrast prop to increase color contrast with the background.

use radix_yew_themes::{AccentColor, Code, CodeVariant, Flex, FlexAlign, FlexDirection};
use yew::prelude::*;

#[function_component]
pub fn CodeHighContrastExample() -> Html {
    html! {
        <Flex gap=3>
            <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
                <Code color={AccentColor::Gray} variant={CodeVariant::Solid}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Soft}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Outline}>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Ghost}>
                    {"console.log()"}
                </Code>
            </Flex>

            <Flex direction={FlexDirection::Column} align={FlexAlign::Start} gap=2>
                <Code color={AccentColor::Gray} variant={CodeVariant::Solid} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Soft} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Outline} high_contrast=true>
                    {"console.log()"}
                </Code>
                <Code color={AccentColor::Gray} variant={CodeVariant::Ghost} high_contrast=true>
                    {"console.log()"}
                </Code>
            </Flex>
        </Flex>
    }
}

Weight

Use the weight prop to set the text weight.

use radix_yew_themes::{Code, Flex, FlexAlign, FlexDirection, Weight};
use yew::prelude::*;

#[function_component]
pub fn CodeWeightExample() -> Html {
    html! {
        <Flex direction={FlexDirection::Column} gap=2 align={FlexAlign::Start}>
            <Code weight={Weight::Light}>{"console.log()"}</Code>
            <Code weight={Weight::Regular}>{"console.log()"}</Code>
            <Code weight={Weight::Medium}>{"console.log()"}</Code>
            <Code weight={Weight::Bold}>{"console.log()"}</Code>
        </Flex>
    }
}

Truncate

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

use radix_yew_themes::{Code, Flex};
use yew::prelude::*;

#[function_component]
pub fn CodeTruncateExample() -> Html {
    html! {
        <Flex max_width="200px">
            <Code truncate=true>{"linear-gradient(red, orange, yellow, green, blue);"}</Code>
        </Flex>
    }
}

Rust Radix