1
0

borderless.rs 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. use dioxus::{events::onmousedown, prelude::*};
  2. use dioxus_desktop::desktop_context::DesktopContext;
  3. fn main() {
  4. dioxus::desktop::launch_cfg(app, |cfg| {
  5. cfg.with_window(|w| w.with_title("BorderLess Demo").with_decorations(false))
  6. });
  7. }
  8. fn app(cx: Scope) -> Element {
  9. let desktop = cx.consume_context::<DesktopContext>().unwrap();
  10. let drag = desktop.clone();
  11. let close = desktop.clone();
  12. let min = desktop.clone();
  13. cx.render(rsx!(
  14. link { href:"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel:"stylesheet" }
  15. header {
  16. class: "text-gray-400 bg-gray-900 body-font",
  17. onmousedown: move |_| drag.drag_window(),
  18. div {
  19. class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center",
  20. a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0",
  21. span { class: "ml-3 text-xl", "Dioxus"}
  22. }
  23. nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center",
  24. // a { class: "mr-5 hover:text-white", "First Link"}
  25. // a { class: "mr-5 hover:text-white", "Second Link"}
  26. // a { class: "mr-5 hover:text-white", "Third Link"}
  27. // a { class: "mr-5 hover:text-white", "Fourth Link"}
  28. }
  29. button {
  30. 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",
  31. onmousedown: |evt| evt.cancel_bubble(),
  32. onclick: move |_| min.minimize(true),
  33. "Minimize"
  34. }
  35. button {
  36. 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",
  37. onmousedown: |evt| evt.cancel_bubble(),
  38. onclick: move |_| close.close(),
  39. "Close"
  40. }
  41. }
  42. }
  43. ))
  44. }