Home Explore Blog CI



zed

1st chunk of `crates/storybook/docs/thoughts.md`
1322b52565cc7e3e4ac9dcad2a8b91c73a6df4b4a90f3049000000010000045a
Much of element styling is now handled by an external engine.

How do I make an element hover.

There's a hover style.

Hoverable needs to wrap another element. That element can be styled.

```rs
struct Hoverable<E: Element> {

}

impl<V> Element<V> for Hoverable {

}
```

```rs
#[derive(Styled, Interactive)]
pub struct Div {
    declared_style: StyleRefinement,
    interactions: Interactions
}

pub trait Styled {
    fn declared_style(&mut self) -> &mut StyleRefinement;
    fn compute_style(&mut self) -> Style {
        Style::default().refine(self.declared_style())
    }

    // All the tailwind classes, modifying self.declared_style()
}

impl Style {
    pub fn paint_background<V>(layout: Layout, cx: &mut PaintContext<V>);
    pub fn paint_foreground<V>(layout: Layout, cx: &mut PaintContext<V>);
}

pub trait Interactive<V> {
    fn interactions(&mut self) -> &mut Interactions<V>;

    fn on_click(self, )
}

struct Interactions<V> {
    click: SmallVec<[<Rc<dyn Fn(&mut V, &dyn Any, )>; 1]>,
}
```

```rs
trait Stylable {
    type Style;

    fn with_style(self, style: Self::Style) -> Self;
}
```

Title: Implementing Hover Functionality and Styling in a UI Framework
Summary
This section discusses the implementation of hover effects and styling within a UI framework. It introduces a `Hoverable` struct that wraps an element to enable hover styling. It also shows the `Styled` and `Interactive` traits, along with the `Div` struct, for managing styles and interactions. Finally, it introduces `Stylable` trait to define how to apply style.