Fixed broken links
This commit is contained in:
@@ -7,7 +7,7 @@ OSUI Extensions are a practical way to extend the possibilities with OSUI, Exten
|
|||||||
|
|
||||||
### `screen.extension(&mut self, ext: Extension)`
|
### `screen.extension(&mut self, ext: Extension)`
|
||||||
|
|
||||||
You likely noticed that we used this function in the [Hello World App With Velocity](/docs/next/#hello-world-app-with-velocity) example, this function simply allows for structures implementing [Extension](/docs/next/extensions#trait-extension) to be included in the program.
|
You likely noticed that we used this function in the [Hello World App With Velocity](/docs/0.0.9/#hello-world-app-with-velocity) example, this function simply allows for structures implementing [Extension](/docs/0.0.9/extensions#trait-extension) to be included in the program.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -128,7 +128,7 @@ rsx! {
|
|||||||
|
|
||||||
Beyond `crossterm` events, you can define and dispatch your own custom event types using the `event!` macro. This is useful for communication between different parts of your application or custom extensions.
|
Beyond `crossterm` events, you can define and dispatch your own custom event types using the `event!` macro. This is useful for communication between different parts of your application or custom extensions.
|
||||||
|
|
||||||
See the [Advanced: Custom Events](/docs/advanced/custom_events) guide for details.
|
See the [Advanced: Custom Events](/docs/0.1.0/advanced/custom_events) guide for details.
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
|
|||||||
@@ -105,10 +105,10 @@ Once registered, the `Screen` will call the appropriate lifecycle methods of you
|
|||||||
|
|
||||||
OSUI comes with several useful built-in extensions:
|
OSUI comes with several useful built-in extensions:
|
||||||
|
|
||||||
* [`InputExtension`](/docs/reference/extensions_api#inputextension): Handles keyboard input and dispatches `crossterm::event::Event`s. **Crucial for interactive applications.**
|
* [`InputExtension`](/docs/0.1.0/reference/extensions_api#inputextension): Handles keyboard input and dispatches `crossterm::event::Event`s. **Crucial for interactive applications.**
|
||||||
* [`TickExtension`](/docs/reference/extensions_api#tickextension): Dispatches `TickEvent`s at a specified rate, useful for animations or periodic updates.
|
* [`TickExtension`](/docs/0.1.0/reference/extensions_api#tickextension): Dispatches `TickEvent`s at a specified rate, useful for animations or periodic updates.
|
||||||
* [`VelocityExtension`](/docs/reference/extensions_api#velocityextension): Automatically updates the `Transform` of widgets that have a `Velocity` component, causing them to move.
|
* [`VelocityExtension`](/docs/0.1.0/reference/extensions_api#velocityextension): Automatically updates the `Transform` of widgets that have a `Velocity` component, causing them to move.
|
||||||
* [`IdExtension`](/docs/reference/extensions_api#idextension): Provides a way to retrieve specific widgets by a unique `Id` component. (Note: The current `IdExtension` implementation only *stores* a screen reference but doesn't actively do anything unless you manually call its `get_element` method.)
|
* [`IdExtension`](/docs/0.1.0/reference/extensions_api#idextension): Provides a way to retrieve specific widgets by a unique `Id` component. (Note: The current `IdExtension` implementation only *stores* a screen reference but doesn't actively do anything unless you manually call its `get_element` method.)
|
||||||
|
|
||||||
You use these built-in extensions by simply calling `screen.extension(...)` with an instance of them, just like `MyLoggerExtension`.
|
You use these built-in extensions by simply calling `screen.extension(...)` with an instance of them, just like `MyLoggerExtension`.
|
||||||
|
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ The central component for defining layout rules. It encapsulates all the propert
|
|||||||
* `px: u16`, `py: u16`: **Padding** - internal space between the element's border and its content/children. This increases the overall size of the element.
|
* `px: u16`, `py: u16`: **Padding** - internal space between the element's border and its content/children. This increases the overall size of the element.
|
||||||
* `mx: i32`, `my: i32`: **Margin** - an offset applied *after* the element's position is calculated. This creates space *around* the element relative to its parent's edges. Can be negative for overlap.
|
* `mx: i32`, `my: i32`: **Margin** - an offset applied *after* the element's position is calculated. This creates space *around* the element relative to its parent's edges. Can be negative for overlap.
|
||||||
|
|
||||||
(See [Reference: Style API - Transform](/docs/reference/style_api#transform-component) for full details)
|
(See [Reference: Style API - Transform](/docs/0.1.0/reference/style_api#transform-component) for full details)
|
||||||
|
|
||||||
### `Position` Enum
|
### `Position` Enum
|
||||||
|
|
||||||
@@ -32,7 +32,7 @@ Determines the `x` or `y` coordinate.
|
|||||||
* `Center`: Centers the element within the parent's available space on that axis.
|
* `Center`: Centers the element within the parent's available space on that axis.
|
||||||
* `End`: Aligns the element to the right or bottom edge of the parent.
|
* `End`: Aligns the element to the right or bottom edge of the parent.
|
||||||
|
|
||||||
(See [Reference: Style API - Position](/docs/reference/style_api#position-enum) for full details)
|
(See [Reference: Style API - Position](/docs/0.1.0/reference/style_api#position-enum) for full details)
|
||||||
|
|
||||||
### `Dimension` Enum
|
### `Dimension` Enum
|
||||||
|
|
||||||
@@ -42,13 +42,13 @@ Determines the `width` or `height`.
|
|||||||
* `Content`: Sizes itself to fit its content (text) or children. This is dynamic.
|
* `Content`: Sizes itself to fit its content (text) or children. This is dynamic.
|
||||||
* `Const(u16)`: Fixed size in terminal cells.
|
* `Const(u16)`: Fixed size in terminal cells.
|
||||||
|
|
||||||
(See [Reference: Style API - Dimension](/docs/reference/style_api#dimension-enum) for full details)
|
(See [Reference: Style API - Dimension](/docs/0.1.0/reference/style_api#dimension-enum) for full details)
|
||||||
|
|
||||||
### `RawTransform` Struct
|
### `RawTransform` Struct
|
||||||
|
|
||||||
This is the internal, resolved representation of a `Transform`. After all calculations, a `Transform`'s declarative rules are converted into a `RawTransform` with concrete `u16` values for `x`, `y`, `width`, `height`, `px`, `py`. This `RawTransform` is then used by the `RenderScope` for actual drawing.
|
This is the internal, resolved representation of a `Transform`. After all calculations, a `Transform`'s declarative rules are converted into a `RawTransform` with concrete `u16` values for `x`, `y`, `width`, `height`, `px`, `py`. This `RawTransform` is then used by the `RenderScope` for actual drawing.
|
||||||
|
|
||||||
(See [Reference: Style API - RawTransform](/docs/reference/style_api#rawtransform-struct) for full details)
|
(See [Reference: Style API - RawTransform](/docs/0.1.0/reference/style_api#rawtransform-struct) for full details)
|
||||||
|
|
||||||
## Layout Calculation Flow (Simplified)
|
## Layout Calculation Flow (Simplified)
|
||||||
|
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ OSUI automates this process. When a `State<T>` value is modified, any `DynWidget
|
|||||||
* `**my_state.get() = new_value` (or `my_state.get().deref_mut().field = new_value`): Mutates the value directly through a `MutexGuard`. The `DerefMut` implementation automatically marks the state as changed by setting `inner.changed = inner.dependencies`.
|
* `**my_state.get() = new_value` (or `my_state.get().deref_mut().field = new_value`): Mutates the value directly through a `MutexGuard`. The `DerefMut` implementation automatically marks the state as changed by setting `inner.changed = inner.dependencies`.
|
||||||
* **Dependency Tracking**: Implements the `DependencyHandler` trait, allowing `DynWidget`s to register themselves.
|
* **Dependency Tracking**: Implements the `DependencyHandler` trait, allowing `DynWidget`s to register themselves.
|
||||||
|
|
||||||
(See [Reference: State API](/docs/reference/state_api) for more details)
|
(See [Reference: State API](/docs/0.1.0/reference/state_api) for more details)
|
||||||
|
|
||||||
### 2. `DependencyHandler` Trait
|
### 2. `DependencyHandler` Trait
|
||||||
|
|
||||||
@@ -40,7 +40,7 @@ A trait that `State<T>` (and potentially other future reactive types) implements
|
|||||||
* `add()`: Called when a `DynWidget` first registers itself as a listener to this dependency. It increments an internal counter of listeners.
|
* `add()`: Called when a `DynWidget` first registers itself as a listener to this dependency. It increments an internal counter of listeners.
|
||||||
* `check()`: Called by `DynWidget` during its `auto_refresh` cycle. It decrements the `changed` counter and returns `true` if there are still pending changes to be processed by a listener. This ensures each listener processes a change only once per update cycle.
|
* `check()`: Called by `DynWidget` during its `auto_refresh` cycle. It decrements the `changed` counter and returns `true` if there are still pending changes to be processed by a listener. This ensures each listener processes a change only once per update cycle.
|
||||||
|
|
||||||
(See [Reference: State API - DependencyHandler Trait](/docs/reference/state_api#dependencyhandler-trait) for more details)
|
(See [Reference: State API - DependencyHandler Trait](/docs/0.1.0/reference/state_api#dependencyhandler-trait) for more details)
|
||||||
|
|
||||||
### 3. `DynWidget`: The Reactive Widget Wrapper
|
### 3. `DynWidget`: The Reactive Widget Wrapper
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ A trait that `State<T>` (and potentially other future reactive types) implements
|
|||||||
* `refresh()`: Forces the widget to rebuild immediately by re-executing its creation closure.
|
* `refresh()`: Forces the widget to rebuild immediately by re-executing its creation closure.
|
||||||
* `auto_refresh()`: The core of reactivity. It iterates through all registered `DependencyHandler`s. If `handler.check()` returns `true` for any of them, it calls `refresh()` to rebuild the widget.
|
* `auto_refresh()`: The core of reactivity. It iterates through all registered `DependencyHandler`s. If `handler.check()` returns `true` for any of them, it calls `refresh()` to rebuild the widget.
|
||||||
|
|
||||||
(See [Reference: Widget API - DynWidget Struct](/docs/reference/widget_api#dynwidget-struct) for more details)
|
(See [Reference: Widget API - DynWidget Struct](/docs/0.1.0/reference/widget_api#dynwidget-struct) for more details)
|
||||||
|
|
||||||
## How Reactive Updates Work in Practice
|
## How Reactive Updates Work in Practice
|
||||||
|
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ The orchestrator. It holds the list of top-level `Widget`s, manages extensions,
|
|||||||
* Iterates through top-level widgets, initiating their rendering.
|
* Iterates through top-level widgets, initiating their rendering.
|
||||||
* Calls `Extension::on_close` and restores terminal state on shutdown.
|
* Calls `Extension::on_close` and restores terminal state on shutdown.
|
||||||
|
|
||||||
(See [Reference: Screen API](/docs/reference/screen_api) for more details)
|
(See [Reference: Screen API](/docs/0.1.0/reference/screen_api) for more details)
|
||||||
|
|
||||||
### 2. `Widget` (`Arc<Widget>`)
|
### 2. `Widget` (`Arc<Widget>`)
|
||||||
|
|
||||||
@@ -39,7 +39,7 @@ The container for an `Element` and its `Component`s. It's the unit passed around
|
|||||||
* `DynWidget`: Its `Element` can be re-instantiated (rebuilt) if its dependencies change. This rebuild happens *before* its `render` method is called in a subsequent frame.
|
* `DynWidget`: Its `Element` can be re-instantiated (rebuilt) if its dependencies change. This rebuild happens *before* its `render` method is called in a subsequent frame.
|
||||||
* Provides access to its `Element` (`get_elem()`) and `Component`s (`get()`, `set_component()`).
|
* Provides access to its `Element` (`get_elem()`) and `Component`s (`get()`, `set_component()`).
|
||||||
|
|
||||||
(See [Reference: Widget API](/docs/reference/widget_api) for more details)
|
(See [Reference: Widget API](/docs/0.1.0/reference/widget_api) for more details)
|
||||||
|
|
||||||
### 3. `Element` (`Box<dyn Element>`)
|
### 3. `Element` (`Box<dyn Element>`)
|
||||||
|
|
||||||
@@ -49,7 +49,7 @@ The actual drawable logic. Each `Element` implementation defines how it appears.
|
|||||||
* `after_render(&mut self, scope: &mut RenderScope)`: For containers, this is where children are processed and recursively rendered. It's also where the element might determine its final `Dimension::Content` size based on children.
|
* `after_render(&mut self, scope: &mut RenderScope)`: For containers, this is where children are processed and recursively rendered. It's also where the element might determine its final `Dimension::Content` size based on children.
|
||||||
* `draw_child(&mut self, element: &Arc<Widget>)`: Called by `rsx!` to establish parent-child relationships. Children processed by a parent are marked `NoRenderRoot` to prevent the `Screen` from rendering them independently.
|
* `draw_child(&mut self, element: &Arc<Widget>)`: Called by `rsx!` to establish parent-child relationships. Children processed by a parent are marked `NoRenderRoot` to prevent the `Screen` from rendering them independently.
|
||||||
|
|
||||||
(See [Reference: Widget API - Element Trait](/docs/reference/widget_api#element-trait) and [Guides: Custom Elements](/docs/guides/custom_elements) for more details)
|
(See [Reference: Widget API - Element Trait](/docs/0.1.0/reference/widget_api#element-trait) and [Guides: Custom Elements](/docs/0.1.0/guides/custom_elements) for more details)
|
||||||
|
|
||||||
### 4. `RenderScope`
|
### 4. `RenderScope`
|
||||||
|
|
||||||
@@ -67,7 +67,7 @@ The drawing context for a single element. It's a mutable structure that holds:
|
|||||||
* `clear()`: Resets the scope for the next element.
|
* `clear()`: Resets the scope for the next element.
|
||||||
* `set_parent_size()`: Crucial for container elements to establish the bounding box for their children.
|
* `set_parent_size()`: Crucial for container elements to establish the bounding box for their children.
|
||||||
|
|
||||||
(See [Reference: RenderScope API](/docs/reference/render_scope_api) for more details)
|
(See [Reference: RenderScope API](/docs/0.1.0/reference/render_scope_api) for more details)
|
||||||
|
|
||||||
### 5. `Transform` and `Style` Components
|
### 5. `Transform` and `Style` Components
|
||||||
|
|
||||||
@@ -76,7 +76,7 @@ These components, attached to a `Widget`, provide the declarative rules for layo
|
|||||||
* `Transform`: Contains `Position` and `Dimension` rules, plus `margin` and `padding`. These are resolved into `RawTransform` by `RenderScope`.
|
* `Transform`: Contains `Position` and `Dimension` rules, plus `margin` and `padding`. These are resolved into `RawTransform` by `RenderScope`.
|
||||||
* `Style`: Contains `Background` and `foreground` color. Applied to `RenderScope`.
|
* `Style`: Contains `Background` and `foreground` color. Applied to `RenderScope`.
|
||||||
|
|
||||||
(See [Reference: Style API](/docs/reference/style_api) for more details)
|
(See [Reference: Style API](/docs/0.1.0/reference/style_api) for more details)
|
||||||
|
|
||||||
### 6. `Extension`s
|
### 6. `Extension`s
|
||||||
|
|
||||||
@@ -84,7 +84,7 @@ Extensions are hooks into the pipeline.
|
|||||||
|
|
||||||
* `Extension::render_widget(scope, widget)`: Called for each top-level widget *before* its `Element::render`. Allows extensions to inspect or modify the `RenderScope` or widget before rendering.
|
* `Extension::render_widget(scope, widget)`: Called for each top-level widget *before* its `Element::render`. Allows extensions to inspect or modify the `RenderScope` or widget before rendering.
|
||||||
|
|
||||||
(See [Reference: Extensions API](/docs/reference/extensions_api) for more details)
|
(See [Reference: Extensions API](/docs/0.1.0/reference/extensions_api) for more details)
|
||||||
|
|
||||||
## Flow Diagram (Conceptual)
|
## Flow Diagram (Conceptual)
|
||||||
|
|
||||||
|
|||||||
@@ -141,7 +141,7 @@ OSUI uses a few internal components to control rendering behavior:
|
|||||||
|
|
||||||
* `NoRender`: If a widget has this component, the `Screen`'s main rendering loop will skip rendering it directly. This is typically used for widgets that are managed and rendered by their parent `Element::after_render` method.
|
* `NoRender`: If a widget has this component, the `Screen`'s main rendering loop will skip rendering it directly. This is typically used for widgets that are managed and rendered by their parent `Element::after_render` method.
|
||||||
* `NoRenderRoot`: Similar to `NoRender`, but specifically signals that the widget is a child being managed by a parent element, preventing the `Screen` from considering it a top-level root widget for direct rendering.
|
* `NoRenderRoot`: Similar to `NoRender`, but specifically signals that the widget is a child being managed by a parent element, preventing the `Screen` from considering it a top-level root widget for direct rendering.
|
||||||
* `Handler<E>`: (Described in [Handling Input](/docs/guides/handling_input) and [Extensions API](/docs/reference/extensions_api)) Enables widgets to subscribe to specific event types.
|
* `Handler<E>`: (Described in [Handling Input](/docs/0.1.0/guides/handling_input) and [Extensions API](/docs/0.1.0/reference/extensions_api)) Enables widgets to subscribe to specific event types.
|
||||||
|
|
||||||
## Usage Patterns
|
## Usage Patterns
|
||||||
|
|
||||||
|
|||||||
@@ -75,11 +75,11 @@ Save the file and run your application from the terminal:
|
|||||||
cargo run
|
cargo run
|
||||||
```
|
```
|
||||||
|
|
||||||
You should see "Hello, OSUI!" displayed in your terminal. You can press `Ctrl+C` or `Esc` (if you add an event handler for `Esc` like in the [Demo Application Guide](../guides/building-a-demo-app.md)) to exit the application.
|
You should see "Hello, OSUI!" displayed in your terminal. You can press `Ctrl+C` or `Esc` (if you add an event handler for `Esc` like in the [Demo Application Guide](/docs/guides/building-a-demo-app)) to exit the application.
|
||||||
|
|
||||||
## Next Steps
|
## Next Steps
|
||||||
|
|
||||||
* **[Concepts: Widget Model](../concepts/widget-model.md)**: Understand the core building blocks of OSUI: Elements, Components, and Widgets.
|
* **[Concepts: Widget Model](/docs/concepts/widget-model)**: Understand the core building blocks of OSUI: Elements, Components, and Widgets.
|
||||||
* **[Guides: Layout and Styling](../guides/layout-and-styling.md)**: Learn how to position and style your UI elements.
|
* **[Guides: Layout and Styling](/docs/guides/layout-and-styling)**: Learn how to position and style your UI elements.
|
||||||
* **[Guides: Common Elements](../guides/common-elements.md)**: Explore the built-in UI elements provided by OSUI like Divs, Flex containers, and Input fields.
|
* **[Guides: Common Elements](/docs/guides/common-elements)**: Explore the built-in UI elements provided by OSUI like Divs, Flex containers, and Input fields.
|
||||||
* **[Guides: State and Reactivity](../guides/state-and-reactivity.md)**: Discover how to make your UI dynamic and responsive to data changes.
|
* **[Guides: State and Reactivity](/docs/guides/state-and-reactivity)**: Discover how to make your UI dynamic and responsive to data changes.
|
||||||
|
|||||||
@@ -39,4 +39,4 @@ fn main() -> std::io::Result<()> {
|
|||||||
|
|
||||||
This example initializes a `Screen`, uses the `rsx!` macro to define a basic text element, draws it to the screen, and then starts the rendering loop.
|
This example initializes a `Screen`, uses the `rsx!` macro to define a basic text element, draws it to the screen, and then starts the rendering loop.
|
||||||
|
|
||||||
For more detailed information on installation and setting up your project, refer to the [Getting Started Guide](../intro/getting-started.md). For comprehensive API details, explore the [Reference section](../reference/index.md).
|
For more detailed information on installation and setting up your project, refer to the [Getting Started Guide](/docs/). For comprehensive API details, explore the [Reference section](/docs/reference/).
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ While OSUI provides a rich set of built-in elements, you'll often need to create
|
|||||||
|
|
||||||
## The `Element` Trait Revisited
|
## The `Element` Trait Revisited
|
||||||
|
|
||||||
As discussed in [Concepts: Widget Model](../concepts/widget-model.md), the `Element` trait is the contract for anything that can be rendered.
|
As discussed in [Concepts: Widget Model](/docs/concepts/widget-model), the `Element` trait is the contract for anything that can be rendered.
|
||||||
|
|
||||||
```rust
|
```rust
|
||||||
pub trait Element: Send + Sync {
|
pub trait Element: Send + Sync {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ This guide expands on the basic "Hello, OSUI!" example to demonstrate a slightly
|
|||||||
|
|
||||||
## 1. Project Setup (Review)
|
## 1. Project Setup (Review)
|
||||||
|
|
||||||
Ensure you have a new Rust project set up and `osui` added to your `Cargo.toml`. Refer to the [Getting Started](../intro/getting-started.md) guide if you haven't done this already.
|
Ensure you have a new Rust project set up and `osui` added to your `Cargo.toml`. Refer to the [Getting Started](/docs/) guide if you haven't done this already.
|
||||||
|
|
||||||
## 2. The `main.rs` File
|
## 2. The `main.rs` File
|
||||||
|
|
||||||
@@ -145,10 +145,10 @@ pub fn app(screen: Arc<Screen>) -> Rsx {
|
|||||||
* Whenever `count` is marked as changed, the `DynWidget` associated with that `Div` automatically rebuilds its content and triggers a re-render in the next frame. This is why the number updates in the UI.
|
* Whenever `count` is marked as changed, the `DynWidget` associated with that `Div` automatically rebuilds its content and triggers a re-render in the next frame. This is why the number updates in the UI.
|
||||||
4. **`rsx!` Macro**:
|
4. **`rsx!` Macro**:
|
||||||
* The `rsx!` macro provides a declarative way to define your UI tree. It creates a hierarchy of `Widget`s, each potentially containing an `Element` and various `Component`s.
|
* The `rsx!` macro provides a declarative way to define your UI tree. It creates a hierarchy of `Widget`s, each potentially containing an `Element` and various `Component`s.
|
||||||
* `Paginator`, `FlexRow`, `FlexCol`, `Div`, `Heading`, `Input` are built-in [elements](../reference/elements/index.md) that define structure and appearance.
|
* `Paginator`, `FlexRow`, `FlexCol`, `Div`, `Heading`, `Input` are built-in [elements](/docs/reference/elements) that define structure and appearance.
|
||||||
* `@Transform` and `@Style` are [components](../reference/style.md) that attach layout and visual properties to elements.
|
* `@Transform` and `@Style` are [components](/docs/reference/style) that attach layout and visual properties to elements.
|
||||||
* `@Handler` is a [component](../reference/extensions.md) that allows a widget to listen for specific events (here, `crossterm::event::Event`).
|
* `@Handler` is a [component](/docs/reference/extensions) that allows a widget to listen for specific events (here, `crossterm::event::Event`).
|
||||||
* `@Focused` and `@AlwaysFocused` are [components](../reference/extensions/focus.md) from `RelativeFocusExtension` that manage input focus.
|
* `@Focused` and `@AlwaysFocused` are [components](/docs/reference/extensions/focus) from `RelativeFocusExtension` that manage input focus.
|
||||||
5. **`screen.run()`**: This method starts the main application loop. It continuously:
|
5. **`screen.run()`**: This method starts the main application loop. It continuously:
|
||||||
* Renders all widgets.
|
* Renders all widgets.
|
||||||
* Processes events from extensions.
|
* Processes events from extensions.
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ OSUI is designed to be efficient for terminal UIs, but there are always consider
|
|||||||
|
|
||||||
### 1. Custom Elements
|
### 1. Custom Elements
|
||||||
|
|
||||||
As detailed in [Creating Custom Widgets](../guides/creating-custom-widgets.md), the primary way to customize OSUI is by implementing the `Element` trait. This allows you to define completely new visual components or logical containers tailored to your application.
|
As detailed in [Creating Custom Widgets](/docs/guides/creating-custom-widgets), the primary way to customize OSUI is by implementing the `Element` trait. This allows you to define completely new visual components or logical containers tailored to your application.
|
||||||
|
|
||||||
### 2. Custom Components
|
### 2. Custom Components
|
||||||
|
|
||||||
|
|||||||
@@ -97,4 +97,4 @@ The distinction allows OSUI to efficiently render static parts of the UI while p
|
|||||||
|
|
||||||
### Dependency Tracking
|
### Dependency Tracking
|
||||||
|
|
||||||
`DynWidget`s are at the core of OSUI's reactivity. They listen for changes in their registered dependencies. When a dependency changes, the widget's internal `load` closure is re-executed, effectively rebuilding its `Element` and `Component`s, leading to a re-render. This mechanism is explained in detail in [State Management](../concepts/state-management.md).
|
`DynWidget`s are at the core of OSUI's reactivity. They listen for changes in their registered dependencies. When a dependency changes, the widget's internal `load` closure is re-executed, effectively rebuilding its `Element` and `Component`s, leading to a re-render. This mechanism is explained in detail in [State Management](/docs/concepts/state-management).
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ OSUI is designed to be efficient for terminal UIs, but there are always consider
|
|||||||
|
|
||||||
### 1. Custom Elements
|
### 1. Custom Elements
|
||||||
|
|
||||||
As detailed in [Creating Custom Widgets](../guides/creating-custom-widgets.md), the primary way to customize OSUI is by implementing the `Element` trait. This allows you to define completely new visual components or logical containers tailored to your application.
|
As detailed in [Creating Custom Widgets](/docs/guides/creating-custom-widgets), the primary way to customize OSUI is by implementing the `Element` trait. This allows you to define completely new visual components or logical containers tailored to your application.
|
||||||
|
|
||||||
### 2. Custom Components
|
### 2. Custom Components
|
||||||
|
|
||||||
|
|||||||
@@ -46,11 +46,11 @@ rsx! {
|
|||||||
|
|
||||||
The `elements` module exports several other essential UI elements, each with its own dedicated documentation:
|
The `elements` module exports several other essential UI elements, each with its own dedicated documentation:
|
||||||
|
|
||||||
* **[`Div`](../reference/elements/div.md)**: A generic, transparent container element used for grouping children and applying layout and style.
|
* **[`Div`](/docs/reference/elements/div)**: A generic, transparent container element used for grouping children and applying layout and style.
|
||||||
* **[`FlexRow`](../reference/elements/flex.md)**: A layout container that arranges its children horizontally in a row.
|
* **[`FlexRow`](/docs/reference/elements/flex)**: A layout container that arranges its children horizontally in a row.
|
||||||
* **[`FlexCol`](../reference/elements/flex.md)**: A layout container that arranges its children vertically in a column.
|
* **[`FlexCol`](/docs/reference/elements/flex)**: A layout container that arranges its children vertically in a column.
|
||||||
* **[`Heading`](../reference/elements/heading.md)**: Renders large, stylized ASCII art text using `figlet-rs`.
|
* **[`Heading`](/docs/reference/elements/heading)**: Renders large, stylized ASCII art text using `figlet-rs`.
|
||||||
* **[`Input`](../reference/elements/input.md)**: An interactive element for user text input.
|
* **[`Input`](/docs/reference/elements/input)**: An interactive element for user text input.
|
||||||
* **[`Paginator`](../reference/elements/paginator.md)**: A container that manages multiple "pages" (children) and allows navigation between them.
|
* **[`Paginator`](/docs/reference/elements/paginator)**: A container that manages multiple "pages" (children) and allows navigation between them.
|
||||||
|
|
||||||
These elements, combined with the `Transform` and `Style` components, provide a powerful foundation for building diverse and complex terminal user interfaces in OSUI.
|
These elements, combined with the `Transform` and `Style` components, provide a powerful foundation for building diverse and complex terminal user interfaces in OSUI.
|
||||||
|
|||||||
@@ -4,28 +4,28 @@ This section provides detailed documentation for all public modules, structs, en
|
|||||||
|
|
||||||
## Core Concepts & Structure
|
## Core Concepts & Structure
|
||||||
|
|
||||||
* [Screen](../reference/screen.md): The main application context for managing widgets and extensions.
|
* [Screen](/docs/reference/screen): The main application context for managing widgets and extensions.
|
||||||
* [Widget Model](../reference/widget.md): `Element`, `Component`, `Widget` (Static/Dynamic), and `WidgetLoad`.
|
* [Widget Model](/docs/reference/widget): `Element`, `Component`, `Widget` (Static/Dynamic), and `WidgetLoad`.
|
||||||
* [Rendering & Scope](../reference/render-scope.md): `RenderScope`, `RenderMethod`, and `ElementRenderer`.
|
* [Rendering & Scope](/docs/reference/render-scope): `RenderScope`, `RenderMethod`, and `ElementRenderer`.
|
||||||
* [State Management](../reference/state.md): `State<T>` and `DependencyHandler` for reactivity.
|
* [State Management](/docs/reference/state): `State<T>` and `DependencyHandler` for reactivity.
|
||||||
* [Frontend & Macros](../reference/frontend.md): `RsxElement`, `Rsx`, and the `event!`, `component!`, `transform!`, `rsx!` macros.
|
* [Frontend & Macros](/docs/reference/frontend): `RsxElement`, `Rsx`, and the `event!`, `component!`, `transform!`, `rsx!` macros.
|
||||||
* [Utilities](../reference/utils.md): Helper functions for terminal control and string manipulation.
|
* [Utilities](/docs/reference/utils): Helper functions for terminal control and string manipulation.
|
||||||
|
|
||||||
## Built-in Components & Extensions
|
## Built-in Components & Extensions
|
||||||
|
|
||||||
* [Style & Layout](../reference/style.md): `Transform`, `Position`, `Dimension`, `Style`, `Background`.
|
* [Style & Layout](/docs/reference/style): `Transform`, `Position`, `Dimension`, `Style`, `Background`.
|
||||||
* [Extensions Overview](../reference/extensions.md): The `Extension` trait, `Event` trait, and `Context` for global behaviors.
|
* [Extensions Overview](/docs/reference/extensions): The `Extension` trait, `Event` trait, and `Context` for global behaviors.
|
||||||
* [Focus Extension](../reference/extensions/focus.md): `AlwaysFocused`, `Focused`, `RelativeFocusExtension` for keyboard navigation.
|
* [Focus Extension](/docs/reference/extensions/focus): `AlwaysFocused`, `Focused`, `RelativeFocusExtension` for keyboard navigation.
|
||||||
* [ID Extension](../reference/extensions/id.md): `IdExtension`, `Id` for unique widget identification.
|
* [ID Extension](/docs/reference/extensions/id): `IdExtension`, `Id` for unique widget identification.
|
||||||
* [Input Handling Extension](../reference/extensions/input_handling.md): `InputExtension` for keyboard and mouse input.
|
* [Input Handling Extension](/docs/reference/extensions/input_handling): `InputExtension` for keyboard and mouse input.
|
||||||
* [Tick Extension](../reference/extensions/tick.md): `TickExtension`, `TickEvent` for timed events.
|
* [Tick Extension](/docs/reference/extensions/tick): `TickExtension`, `TickEvent` for timed events.
|
||||||
* [Velocity Extension](../reference/extensions/velocity.md): `VelocityExtension`, `Velocity` for simple animations.
|
* [Velocity Extension](/docs/reference/extensions/velocity): `VelocityExtension`, `Velocity` for simple animations.
|
||||||
|
|
||||||
## Built-in UI Elements
|
## Built-in UI Elements
|
||||||
|
|
||||||
* [Elements Overview](../reference/elements.md): General Element trait and String as an Element.
|
* [Elements Overview](/docs/reference/elements): General Element trait and String as an Element.
|
||||||
* [Div](../reference/elements/div.md): A generic container element.
|
* [Div](/docs/reference/elements/div): A generic container element.
|
||||||
* [Flex Containers](../reference/elements/flex.md): `FlexRow` and `FlexCol` for automatic horizontal/vertical layout.
|
* [Flex Containers](/docs/reference/elements/flex): `FlexRow` and `FlexCol` for automatic horizontal/vertical layout.
|
||||||
* [Heading](../reference/elements/heading.md): Renders large ASCII art text.
|
* [Heading](/docs/reference/elements/heading): Renders large ASCII art text.
|
||||||
* [Input](../reference/elements/input.md): An interactive text input field.
|
* [Input](/docs/reference/elements/input): An interactive text input field.
|
||||||
* [Paginator](../reference/elements/paginator.md): Manages and navigates between multiple pages/children.
|
* [Paginator](/docs/reference/elements/paginator): Manages and navigates between multiple pages/children.
|
||||||
|
|||||||
Reference in New Issue
Block a user