Code Monkey home page Code Monkey logo

floem-ui-kit's Introduction

Floem UI Kit

crates.io docs.rs

Want a pretty Rust GUI with minimal time investment? Use a kit of premade UI components! Floem UI Kit provides themed widgets you can use in conjunction with the Floem GUI library.

  • ✅ Supports all major desktop operating systems
  • ✅ All widgets implement hover, focus and disabled state
  • ✅ Supports multiple accent colors

⚠️ Floem UI Kit, like Floem, is experimental software. Breaking API changes may regularly happen. ⚠️

Showcase

First time using Floem?

Its README and documentation provide a quick start example, an introduction and some background on Floem's architecture. You might notice that it incorporates familiar concepts from other UI frameworks, including:

  • Interface composition using nestable horizontal and vertical widget containers
  • A styling system that brings many CSS-like features to Rust, without the overhead of a browser runtime
  • Reactivity using signals, as seen in frameworks like SolidJS
  • Implementation of UIs using functions, similar to Jetpack Compose

Installation

You'll need to install a compatible Floem version along with Floem UI Kit. To see which Floem version we're currently based on, go to Cargo.toml.

Getting started with Floem UI Kit

The Floem UI Kit workflow involves:

  1. Creating an instance of floem_ui_kit::theme::Theme. Theme::default() creates an instance with default settings.
  2. Using the widget creation methods in Theme to build your UI. If Floem UI Kit doesn't have exactly what you want, you can mix and match with self-written UI components. You can keep using Floem's v_stack and h_stack methods to lay out your components.
  3. Wrapping your window contents in Floem UI Kit's padded container to ensure your widgets don't stick to the side of the window.
  4. Wrapping the padded container in Floem UI Kit's root view to apply the theme to the entire window.

Over here you'll find Floem's quickstart example ported to Floem UI Kit. Here is a reference render:

A counter in Floem UI Kit

These components are still sticking to one another. You'll probably want to add a small gap between them. v_stack and h_stack can automatically add those gaps, provided that you request it:

v_stack(/* .. */)
	.style(|s| s.gap(0.0, 10.0))

The above will add no horizontal gap and a vertical 10-pixel gap.

Supported widgets

For more information on how to use these, see the code docs.

Widget Preview
Button (multiple variants) Button
Checkbox Checkbox
Integer input (spinbox) Integer input
Label (multiple variants) Label
Radio group (multiple variants) Radio group
Simple header Simple header
Text input Text input

For an example incorporating all available widgets, see here. It's the source code for the screenshot at the top of the README.

Not quite what you're looking for?

You can browse the floem-themes topic on GitHub to look for other Floem UI libraries and themes.

As far as Rust UI libraries go, Iced is a well-known one. Device manufacturer System76 is using it to implement its own desktop environment. You might be able to build onto their work by checking out libcosmic. Be advised that its learning curve may be a bit steeper than Floem's, and that the library is primarily intended for use by applications that are native to the Cosmic desktop environment.

If you're willing to consider Electron-like solutions that are not completely native and may have a larger resource footprint, I'd definitely check out Tauri. Since it's built on HTML/JS/CSS, you can use it with any web-based UI framework.

And finally, Are we GUI yet? is a big collection of GUI-related tools.

floem-ui-kit's People

Contributors

pieterdd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.