Skip to content

Rio 0.11

Latest
Latest
Compare
Choose a tag to compare
@Sn3llius Sn3llius released this 07 Mar 13:19
· 37 commits to main since this release
0.11
7b56ef9

We've released version 0.11, bringing significant improvements, enhanced customization, and better documentation! This update refines Rio’s core functionality, making it more powerful and user-friendly.

Improved rio.Popup 🎨

The rio.Popup component has been revamped to give you more control and flexibility. Now, you can build fully custom popups, including multi-select variations and different styles. Additionally, rio.Popup now supports:

  • user_closable and modal properties, just like dialogs.
  • A new mode: "dropdown", allowing popups to behave like rio.Dropdowns.
  • The ability to construct custom dropdowns using pure Python and rio.Components. Tutorial

This enhancement enables more intuitive and dynamic user interactions in your apps.

Added Dynamic Routes 🌐

Rio now supports FastAPI-style dynamic routes, allowing you to define pages with segments in curly braces. These segments match any value and are passed to your component as keyword arguments. For example, visiting /foo will display "You're currently on foo".

@rio.page(
    # Notice the `{segment}` in the URL. The matched segment will be
    # passed to the component as the `segment` parameter.
    url_segment="{segment}",
)
class MyPage(rio.Component):
    # This parameter will be taken from the URL
    segment: str

    def build(self) -> rio.Component:
        return rio.Text(
            f"You're currently on {self.segment}",
            justify="center",
        )

You can also match multiple segments using {pattern:path}. Query parameters are supported and can be accessed in your components. Rio can parse various parameter types, including int, float, bool, and typing.Literal.

For more control, you can access the active URL from self.session.active_page_url and run custom logic.

Have a look at our guide for Dynamic Routes

Component Zoo 🧩

To make Rio even better, we’re working on a Component Zoo - a place where we can share and showcase custom-built components. This initiative will make it easier to reuse and integrate powerful UI elements across projects.

Core Improvements ⚙️

We've made several under-the-hood upgrades to improve usability and performance:

  • Component.force_refresh is now synchronous, eliminating the need for async calls.
  • rio.ImageFill now supports tile fill mode.
  • Colors now use Oklab instead of RGB for more perceptually accurate color representation.
  • Breaking Change: rio.Color.hex now returns a 6-digit hex code instead of an 8-digit one. Use rio.Color.hexa for the previous behavior.
  • Breaking Change: rio.Color.GREY is now rio.Color.GRAY.
  • rio.Drawer now sizes itself to fit both the anchor and the drawer content.
  • Dialogs now apply a default style.

More Styling Options & Enhancements 🎨

We’ve made styling even more powerful:

  • More cell styling options in rio.Table.
  • New input box styles: "rounded" and "pill".
  • Gradient stops can now be specified as colors, with Rio automatically inferring their position (breaking change: stops must be ordered now).
  • Themes now support a header_font parameter.

Better Platform Awareness 📊

We've exposed additional platform information to improve UI adaptability:

  • rio.Session.screen_width
  • rio.Session.screen_height
  • rio.Session.pixels_per_font_height
  • rio.Session.scroll_bar_size
  • rio.Session.primary_pointer_type

These enhancements make it easier to build responsive and adaptive interfaces.

Improved Mobile Experience 📱

  • Dragging is now much smoother, improving touch interactions.
  • rio.run now also works when using as_fastapi, making it more seamless to integrate with FastAPI.

Revamped Templates 📁

We’ve updated and improved several templates, including:

  • Crypto Dashboard
  • Multipage App
  • To-Do App

These templates now offer a cleaner UI, better structure, and improved performance.

Brand Icons 🎭

We've added icons for common brands, making it easier to integrate recognizable branding into your Rio applications.

Up Next 🚀

We're continuously improving Rio! Some upcoming features include:

  • More enhancements to rio.Table, including styling individual cells and inserting custom Rio components into them.
  • Further documentation improvements, ensuring clearer navigation, more how-tos, and practical examples.
  • Custom HTML components—we're laying the groundwork for a powerful API that enables deeper customization.

Install 🛠️

Get the latest version from PyPI:

pip install --upgrade rio-ui

We can’t wait to see what you build with these new features! 🚀

Assets 2
Loading