mirror of
https://github.com/DioxusLabs/dioxus
synced 2024-09-20 14:21:58 +00:00
540e785d8b
* chore: dont use prebuilt builder pattern for configuring desktop * chore: use regular config pattern for web * Chore: update docs too * chore: clean up some warnings
113 lines
4.6 KiB
Rust
113 lines
4.6 KiB
Rust
#![allow(non_snake_case)]
|
|
|
|
//! Example: Basic Tailwind usage
|
|
//!
|
|
//! This example shows how an app might be styled with TailwindCSS.
|
|
//!
|
|
//! To minify your tailwind bundle, currently you need to use npm. Follow these instructions:
|
|
//!
|
|
//! https://dev.to/arctic_hen7/how-to-set-up-tailwind-css-with-yew-and-trunk-il9
|
|
|
|
use dioxus::prelude::*;
|
|
use dioxus_desktop::Config;
|
|
|
|
fn main() {
|
|
dioxus_desktop::launch_cfg(
|
|
app,
|
|
Config::new()
|
|
.with_custom_head("<script src=\"https://cdn.tailwindcss.com\"></script>".to_string()),
|
|
);
|
|
}
|
|
|
|
pub fn app(cx: Scope) -> Element {
|
|
cx.render(rsx!(
|
|
div {
|
|
header { class: "text-gray-400 bg-gray-900 body-font",
|
|
div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center",
|
|
a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0",
|
|
StacksIcon {}
|
|
span { class: "ml-3 text-xl", "Hello Dioxus!"}
|
|
}
|
|
nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center",
|
|
a { class: "mr-5 hover:text-white", "First Link"}
|
|
a { class: "mr-5 hover:text-white", "Second Link"}
|
|
a { class: "mr-5 hover:text-white", "Third Link"}
|
|
a { class: "mr-5 hover:text-white", "Fourth Link"}
|
|
}
|
|
button {
|
|
class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
|
|
"Button"
|
|
RightArrowIcon {}
|
|
}
|
|
}
|
|
}
|
|
|
|
section { class: "text-gray-400 bg-gray-900 body-font",
|
|
div { class: "container mx-auto flex px-5 py-24 md:flex-row flex-col items-center",
|
|
div { class: "lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center",
|
|
h1 { class: "title-font sm:text-4xl text-3xl mb-4 font-medium text-white",
|
|
br { class: "hidden lg:inline-block" }
|
|
"Dioxus Sneak Peek"
|
|
}
|
|
p {
|
|
class: "mb-8 leading-relaxed",
|
|
|
|
"Dioxus is a new UI framework that makes it easy and simple to write cross-platform apps using web
|
|
technologies! It is functional, fast, and portable. Dioxus can run on the web, on the desktop, and
|
|
on mobile and embedded platforms."
|
|
|
|
}
|
|
div { class: "flex justify-center",
|
|
button {
|
|
class: "inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg",
|
|
"Learn more"
|
|
}
|
|
button {
|
|
class: "ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg",
|
|
"Build an app"
|
|
}
|
|
}
|
|
}
|
|
div { class: "lg:max-w-lg lg:w-full md:w-1/2 w-5/6",
|
|
img {
|
|
class: "object-cover object-center rounded",
|
|
src: "https://i.imgur.com/oK6BLtw.png",
|
|
referrerpolicy:"no-referrer",
|
|
alt: "hero",
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
))
|
|
}
|
|
|
|
pub fn StacksIcon(cx: Scope) -> Element {
|
|
cx.render(rsx!(
|
|
svg {
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
stroke_linecap: "round",
|
|
stroke_linejoin: "round",
|
|
stroke_width: "2",
|
|
class: "w-10 h-10 text-white p-2 bg-indigo-500 rounded-full",
|
|
view_box: "0 0 24 24",
|
|
path { d: "M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"}
|
|
}
|
|
))
|
|
}
|
|
|
|
pub fn RightArrowIcon(cx: Scope) -> Element {
|
|
cx.render(rsx!(
|
|
svg {
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
stroke_linecap: "round",
|
|
stroke_linejoin: "round",
|
|
stroke_width: "2",
|
|
class: "w-4 h-4 ml-1",
|
|
view_box: "0 0 24 24",
|
|
path { d: "M5 12h14M12 5l7 7-7 7"}
|
|
}
|
|
))
|
|
}
|