adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
thaw/demo_markdown/docs/message_bar/mod.md
luoxiao 348cc76c80 feat: adds MessageBar component
2024-06-27 22:28:10 +08:00

2.1 KiB
Raw Blame History

MessageBar

view! {
    <MessageBar>
        <MessageBarBody>
            <MessageBarTitle>Descriptive title</MessageBarTitle>
            "Message providing information to the user with actionable insights."
        </MessageBarBody>
        <MessageBarActions>
            <Button size=ButtonSize::Small>"Action"</Button>
            <Button size=ButtonSize::Small>"Action"</Button>
            <MessageBarContainerAction slot>
                <Button size=ButtonSize::Small appearance=ButtonAppearance::Transparent>
                    "X"
                </Button>
            </MessageBarContainerAction>
        </MessageBarActions>
    </MessageBar>
}

Intent

view! {
    <Space vertical=true>
        <MessageBar>
            <MessageBarBody>
                <MessageBarTitle>"Intent info"</MessageBarTitle>
                "Message providing information to the user with actionable insights."
            </MessageBarBody>
        </MessageBar>
        <MessageBar intent=MessageBarIntent::Warning>
            <MessageBarBody>
                <MessageBarTitle>"Intent warning"</MessageBarTitle>
                "Message providing information to the user with actionable insights."
            </MessageBarBody>
        </MessageBar>
        <MessageBar intent=MessageBarIntent::Error>
            <MessageBarBody>
                <MessageBarTitle>"Intent error"</MessageBarTitle>
                "Message providing information to the user with actionable insights."
            </MessageBarBody>
        </MessageBar>
        <MessageBar intent=MessageBarIntent::Success>
            <MessageBarBody>
                <MessageBarTitle>"Intent success"</MessageBarTitle>
                "Message providing information to the user with actionable insights."
            </MessageBarBody>
        </MessageBar>
    </Space>
}

Manual Layout

view! {
    <MessageBar layout=MessageBarLayout::Multiline>
        <MessageBarBody>
          <h3 style="margin: 0">"Descriptive title"</h3>
          <p>"Message providing information to the user with actionable insights."</p>
        </MessageBarBody>
    </MessageBar>
}