202 lines
7.4 KiB
HTML
202 lines
7.4 KiB
HTML
@use hyaenidae_toolkit::{Button, Card, Link, TextInput, templates::{button, button_group, card, card_body, card_title, code, link, text_input, statics::toolkit_css}};
|
|
@use super::{demo, section, statics::layout_css};
|
|
|
|
@()
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Toolkit Demo</title>
|
|
<style>
|
|
@Html(String::from_utf8_lossy(toolkit_css.content))
|
|
@Html(String::from_utf8_lossy(layout_css.content))
|
|
</style>
|
|
</head>
|
|
<body>
|
|
@:section("Links", "Link styles", {
|
|
@:demo("Link", "A link", &[
|
|
"@:link(&Link::current_tab(\"https://example.com\"), {",
|
|
" A Link",
|
|
"})",
|
|
], {
|
|
@:link(&Link::current_tab("https://example.com"), {
|
|
A Link
|
|
})
|
|
})
|
|
@:demo("Link", "A link that opens in a new tab", &[
|
|
"@:link(&Link::new_tab(\"https://example.com\"), {",
|
|
" A Link",
|
|
"})",
|
|
], {
|
|
@:link(&Link::new_tab("https://example.com"), {
|
|
A Link
|
|
})
|
|
})
|
|
})
|
|
@:section("Inputs", "Different input styles", {
|
|
@:demo("Text Input", "Default text input style", &[
|
|
"@:text_input(&TextInput::new(\"name\"))",
|
|
], {
|
|
@:text_input(&TextInput::new("name"))
|
|
})
|
|
@:demo("Text Input", "Text input with Placeholder", &[
|
|
"@:text_input(TextInput::new(\"name\")",
|
|
" .placeholder(\"Placeholder\")",
|
|
")",
|
|
], {
|
|
@:text_input(TextInput::new("name").placeholder("Placeholder"))
|
|
})
|
|
@:demo("Text Input", "Text input with Value", &[
|
|
"@:text_input(TextInput::new(\"name\")",
|
|
" .value(\"Value\")",
|
|
")",
|
|
], {
|
|
@:text_input(TextInput::new("name").value("Value"))
|
|
})
|
|
@:demo("Text Input", "Text input with Title", &[
|
|
"@:text_input(TextInput::new(\"name\")",
|
|
" .title(\"Title\")",
|
|
")",
|
|
], {
|
|
@:text_input(TextInput::new("name").title("Title"))
|
|
})
|
|
@:demo("Text Input", "Text area", &[
|
|
"@:text_input(TextInput::new(\"name\")",
|
|
" .textarea()",
|
|
" .placeholder(\"Placeholder\")",
|
|
" .title(\"Title\")",
|
|
")",
|
|
], {
|
|
@:text_input(TextInput::new("name").textarea().placeholder("Placeholder").title("Title"))
|
|
})
|
|
})
|
|
@:section("Buttons", "Different button styles", {
|
|
@:demo("Button", "Pimary button style", &[
|
|
r#"@:button(&Button::primary("Primary"))"#
|
|
], {
|
|
@:button(&Button::primary("Primary"))
|
|
})
|
|
@:demo("Button", "Pimary Outline button style", &[
|
|
"@:button(&Button::primary_outline(\"Primary Outline\"))",
|
|
], {
|
|
@:button(&Button::primary_outline("Primary Outline"))
|
|
})
|
|
@:demo("Button", "Outline button style", &[
|
|
"@:button(&Button::outline(\"Outline\"))",
|
|
], {
|
|
@:button(&Button::outline("Outline"))
|
|
})
|
|
@:demo("Button", "Secondary button style", &[
|
|
"@:button(&Button::secondary(\"Secondary\"))",
|
|
], {
|
|
@:button(&Button::secondary("Secondary"))
|
|
})
|
|
@:demo("Link Button", "This button is a link", &[
|
|
"@:button(Button::primary(\"Link\")",
|
|
" .href(\"https://example.com\")",
|
|
")",
|
|
], {
|
|
@:button(Button::primary("Link").href("https://example.com"))
|
|
})
|
|
@:demo("Link Button", "This button is a link that opens in a new tab", &[
|
|
"@:button(Button::primary(\"Link\")",
|
|
" .href(\"https://example.com\")",
|
|
" .new_tab()",
|
|
")",
|
|
], {
|
|
@:button(Button::primary("Link").href("https://example.com").new_tab())
|
|
})
|
|
@:demo("Form Button", "This button is a form that POSTs to an endpoint", &[
|
|
"@:button(Button::primary(\"Form\")",
|
|
" .form(\"/\")",
|
|
")",
|
|
], {
|
|
@:button(Button::primary("Form").form("/"))
|
|
})
|
|
})
|
|
@:section("Button Group", "Buttons styled together", {
|
|
@:demo("Group", "Button Group", &[
|
|
"@:button_group(&[",
|
|
" &Button::primary(\"Primary\"),",
|
|
" &Button::primary_outline(\"Primary Outline\"),",
|
|
" &Button::outline(\"Outline\"),",
|
|
" &Button::secondary(\"Secondary\"),",
|
|
"])",
|
|
], {
|
|
@:button_group(&[
|
|
&Button::primary("Primary"),
|
|
&Button::primary_outline("Primary Outline"),
|
|
&Button::outline("Outline"),
|
|
&Button::secondary("Secondary"),
|
|
])
|
|
})
|
|
})
|
|
@:section("Code", "Code snippets", {
|
|
@:demo("Code", "Insert code snippets", &[
|
|
"@:code({Hello, World})",
|
|
], {
|
|
@:code({Hello, World})
|
|
})
|
|
})
|
|
@:section("Card", "Card template", {
|
|
@:demo("Card", "Create a card with a Title and Body", &[
|
|
"@:card(&Card::new(), {",
|
|
" @:card_title({",
|
|
" <div>",
|
|
" <h3>Title</h3>",
|
|
" </div>",
|
|
" })",
|
|
" @:card_body({",
|
|
" <div>",
|
|
" <p>Body</p>",
|
|
" </div>",
|
|
" })",
|
|
"})",
|
|
], {
|
|
@:card(&Card::new(), {
|
|
@:card_title({
|
|
<div>
|
|
<h3>Title</h3>
|
|
</div>
|
|
})
|
|
@:card_body({
|
|
<div>
|
|
<p>Body<p>
|
|
</div>
|
|
})
|
|
})
|
|
})
|
|
@:demo("Card", "Create a full-width card with a Title and Body. This card loses its border radius and left & right borders when the viewport width is under 700px", &[
|
|
"@:card(&Card::full_width(), {",
|
|
" @:card_title({",
|
|
" <div>",
|
|
" <h3>Title</h3>",
|
|
" </div>",
|
|
" })",
|
|
" @:card_body({",
|
|
" <div>",
|
|
" <p>Body</p>",
|
|
" </div>",
|
|
" })",
|
|
"})",
|
|
], {
|
|
@:card(&Card::full_width(), {
|
|
@:card_title({
|
|
<div>
|
|
<h3>Title</h3>
|
|
</div>
|
|
})
|
|
@:card_body({
|
|
<div>
|
|
<p>Body<p>
|
|
</div>
|
|
})
|
|
})
|
|
})
|
|
})
|
|
</body>
|
|
</html>
|