Fixed link issues
This commit is contained in:
@@ -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](/docs/guides/building-a-demo-app)) 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/0.1.1/guides/building-a-demo-app)) to exit the application.
|
||||||
|
|
||||||
## Next Steps
|
## Next Steps
|
||||||
|
|
||||||
* **[Concepts: Widget Model](/docs/concepts/widget-model)**: Understand the core building blocks of OSUI: Elements, Components, and Widgets.
|
* **[Concepts: Widget Model](/docs/0.1.1/concepts/widget-model)**: Understand the core building blocks of OSUI: Elements, Components, and Widgets.
|
||||||
* **[Guides: Layout and Styling](/docs/guides/layout-and-styling)**: Learn how to position and style your UI elements.
|
* **[Guides: Layout and Styling](/docs/0.1.1/guides/layout-and-styling)**: Learn how to position and style your UI elements.
|
||||||
* **[Guides: Common Elements](/docs/guides/common-elements)**: Explore the built-in UI elements provided by OSUI like Divs, Flex containers, and Input fields.
|
* **[Guides: Common Elements](/docs/0.1.1/guides/common-elements)**: Explore the built-in UI elements provided by OSUI like Divs, Flex containers, and Input fields.
|
||||||
* **[Guides: State and Reactivity](/docs/guides/state-and-reactivity)**: Discover how to make your UI dynamic and responsive to data changes.
|
* **[Guides: State and Reactivity](/docs/0.1.1/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](/docs/). For comprehensive API details, explore the [Reference section](/docs/reference/).
|
For more detailed information on installation and setting up your project, refer to the [Getting Started Guide](/docs/0.1.1/). For comprehensive API details, explore the [Reference section](/docs/0.1.1/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](/docs/concepts/widget-model), the `Element` trait is the contract for anything that can be rendered.
|
As discussed in [Concepts: Widget Model](/docs/0.1.1/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](/docs/) 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/0.1.1/) 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](/docs/reference/elements) that define structure and appearance.
|
* `Paginator`, `FlexRow`, `FlexCol`, `Div`, `Heading`, `Input` are built-in [elements](/docs/0.1.1/reference/elements) that define structure and appearance.
|
||||||
* `@Transform` and `@Style` are [components](/docs/reference/style) that attach layout and visual properties to elements.
|
* `@Transform` and `@Style` are [components](/docs/0.1.1/reference/style) that attach layout and visual properties to elements.
|
||||||
* `@Handler` is a [component](/docs/reference/extensions) that allows a widget to listen for specific events (here, `crossterm::event::Event`).
|
* `@Handler` is a [component](/docs/0.1.1/reference/extensions) that allows a widget to listen for specific events (here, `crossterm::event::Event`).
|
||||||
* `@Focused` and `@AlwaysFocused` are [components](/docs/reference/extensions/focus) from `RelativeFocusExtension` that manage input focus.
|
* `@Focused` and `@AlwaysFocused` are [components](/docs/0.1.1/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](/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.
|
As detailed in [Creating Custom Widgets](/docs/0.1.1/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](/docs/concepts/state-management).
|
`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/0.1.1/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](/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.
|
As detailed in [Creating Custom Widgets](/docs/0.1.1/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`](/docs/reference/elements/div)**: A generic, transparent container element used for grouping children and applying layout and style.
|
* **[`Div`](/docs/0.1.1/reference/elements/div)**: A generic, transparent container element used for grouping children and applying layout and style.
|
||||||
* **[`FlexRow`](/docs/reference/elements/flex)**: A layout container that arranges its children horizontally in a row.
|
* **[`FlexRow`](/docs/0.1.1/reference/elements/flex)**: A layout container that arranges its children horizontally in a row.
|
||||||
* **[`FlexCol`](/docs/reference/elements/flex)**: A layout container that arranges its children vertically in a column.
|
* **[`FlexCol`](/docs/0.1.1/reference/elements/flex)**: A layout container that arranges its children vertically in a column.
|
||||||
* **[`Heading`](/docs/reference/elements/heading)**: Renders large, stylized ASCII art text using `figlet-rs`.
|
* **[`Heading`](/docs/0.1.1/reference/elements/heading)**: Renders large, stylized ASCII art text using `figlet-rs`.
|
||||||
* **[`Input`](/docs/reference/elements/input)**: An interactive element for user text input.
|
* **[`Input`](/docs/0.1.1/reference/elements/input)**: An interactive element for user text input.
|
||||||
* **[`Paginator`](/docs/reference/elements/paginator)**: A container that manages multiple "pages" (children) and allows navigation between them.
|
* **[`Paginator`](/docs/0.1.1/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](/docs/reference/screen): The main application context for managing widgets and extensions.
|
* [Screen](/docs/0.1.1/reference/screen): The main application context for managing widgets and extensions.
|
||||||
* [Widget Model](/docs/reference/widget): `Element`, `Component`, `Widget` (Static/Dynamic), and `WidgetLoad`.
|
* [Widget Model](/docs/0.1.1/reference/widget): `Element`, `Component`, `Widget` (Static/Dynamic), and `WidgetLoad`.
|
||||||
* [Rendering & Scope](/docs/reference/render-scope): `RenderScope`, `RenderMethod`, and `ElementRenderer`.
|
* [Rendering & Scope](/docs/0.1.1/reference/render-scope): `RenderScope`, `RenderMethod`, and `ElementRenderer`.
|
||||||
* [State Management](/docs/reference/state): `State<T>` and `DependencyHandler` for reactivity.
|
* [State Management](/docs/0.1.1/reference/state): `State<T>` and `DependencyHandler` for reactivity.
|
||||||
* [Frontend & Macros](/docs/reference/frontend): `RsxElement`, `Rsx`, and the `event!`, `component!`, `transform!`, `rsx!` macros.
|
* [Frontend & Macros](/docs/0.1.1/reference/frontend): `RsxElement`, `Rsx`, and the `event!`, `component!`, `transform!`, `rsx!` macros.
|
||||||
* [Utilities](/docs/reference/utils): Helper functions for terminal control and string manipulation.
|
* [Utilities](/docs/0.1.1/reference/utils): Helper functions for terminal control and string manipulation.
|
||||||
|
|
||||||
## Built-in Components & Extensions
|
## Built-in Components & Extensions
|
||||||
|
|
||||||
* [Style & Layout](/docs/reference/style): `Transform`, `Position`, `Dimension`, `Style`, `Background`.
|
* [Style & Layout](/docs/0.1.1/reference/style): `Transform`, `Position`, `Dimension`, `Style`, `Background`.
|
||||||
* [Extensions Overview](/docs/reference/extensions): The `Extension` trait, `Event` trait, and `Context` for global behaviors.
|
* [Extensions Overview](/docs/0.1.1/reference/extensions): The `Extension` trait, `Event` trait, and `Context` for global behaviors.
|
||||||
* [Focus Extension](/docs/reference/extensions/focus): `AlwaysFocused`, `Focused`, `RelativeFocusExtension` for keyboard navigation.
|
* [Focus Extension](/docs/0.1.1/reference/extensions/focus): `AlwaysFocused`, `Focused`, `RelativeFocusExtension` for keyboard navigation.
|
||||||
* [ID Extension](/docs/reference/extensions/id): `IdExtension`, `Id` for unique widget identification.
|
* [ID Extension](/docs/0.1.1/reference/extensions/id): `IdExtension`, `Id` for unique widget identification.
|
||||||
* [Input Handling Extension](/docs/reference/extensions/input_handling): `InputExtension` for keyboard and mouse input.
|
* [Input Handling Extension](/docs/0.1.1/reference/extensions/input_handling): `InputExtension` for keyboard and mouse input.
|
||||||
* [Tick Extension](/docs/reference/extensions/tick): `TickExtension`, `TickEvent` for timed events.
|
* [Tick Extension](/docs/0.1.1/reference/extensions/tick): `TickExtension`, `TickEvent` for timed events.
|
||||||
* [Velocity Extension](/docs/reference/extensions/velocity): `VelocityExtension`, `Velocity` for simple animations.
|
* [Velocity Extension](/docs/0.1.1/reference/extensions/velocity): `VelocityExtension`, `Velocity` for simple animations.
|
||||||
|
|
||||||
## Built-in UI Elements
|
## Built-in UI Elements
|
||||||
|
|
||||||
* [Elements Overview](/docs/reference/elements): General Element trait and String as an Element.
|
* [Elements Overview](/docs/0.1.1/reference/elements): General Element trait and String as an Element.
|
||||||
* [Div](/docs/reference/elements/div): A generic container element.
|
* [Div](/docs/0.1.1/reference/elements/div): A generic container element.
|
||||||
* [Flex Containers](/docs/reference/elements/flex): `FlexRow` and `FlexCol` for automatic horizontal/vertical layout.
|
* [Flex Containers](/docs/0.1.1/reference/elements/flex): `FlexRow` and `FlexCol` for automatic horizontal/vertical layout.
|
||||||
* [Heading](/docs/reference/elements/heading): Renders large ASCII art text.
|
* [Heading](/docs/0.1.1/reference/elements/heading): Renders large ASCII art text.
|
||||||
* [Input](/docs/reference/elements/input): An interactive text input field.
|
* [Input](/docs/0.1.1/reference/elements/input): An interactive text input field.
|
||||||
* [Paginator](/docs/reference/elements/paginator): Manages and navigates between multiple pages/children.
|
* [Paginator](/docs/0.1.1/reference/elements/paginator): Manages and navigates between multiple pages/children.
|
||||||
|
|||||||
@@ -108,5 +108,3 @@ This pattern allows you to build highly flexible and composable components, wher
|
|||||||
## Next Steps
|
## Next Steps
|
||||||
|
|
||||||
You've seen how to define components and pass basic children. The next step is to explore the full power of OSUI's RSX syntax, including how to pass other types of props, use conditional rendering, and loop through data.
|
You've seen how to define components and pass basic children. The next step is to explore the full power of OSUI's RSX syntax, including how to pass other types of props, use conditional rendering, and loop through data.
|
||||||
|
|
||||||
**Next:** Dive into the details of the [RSX Syntax Guide](../guides/01-rsx-syntax.md).
|
|
||||||
|
|||||||
@@ -73,7 +73,7 @@ pub fn App(cx: &Arc<Context>) -> View {
|
|||||||
|
|
||||||
* **Parameter Names**: The names of your function parameters (e.g., `name`, `age`) become the names of the props you use when instantiating the component in `rsx!`.
|
* **Parameter Names**: The names of your function parameters (e.g., `name`, `age`) become the names of the props you use when instantiating the component in `rsx!`.
|
||||||
* **Reference Types**: Props are typically passed as references (e.g., `&str`, `&u8`). The `#[component]` macro automatically "strips" the reference when generating the internal component struct, storing the owned type. This means you don't need to manually clone values unless you intend to move them into a closure or `State`.
|
* **Reference Types**: Props are typically passed as references (e.g., `&str`, `&u8`). The `#[component]` macro automatically "strips" the reference when generating the internal component struct, storing the owned type. This means you don't need to manually clone values unless you intend to move them into a closure or `State`.
|
||||||
* **`children` Prop**: As seen in the [previous guide](/docs/intro/03-example-basic-component.md), any content nested inside a component's `rsx!` invocation is implicitly passed as a `children: &Rsx` prop. This allows for flexible content composition.
|
* **`children` Prop**: As seen in the [previous guide](/docs/intro/example-basic-component), any content nested inside a component's `rsx!` invocation is implicitly passed as a `children: &Rsx` prop. This allows for flexible content composition.
|
||||||
|
|
||||||
### Example: Component with `children` and custom props
|
### Example: Component with `children` and custom props
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user