Skip to content
Snippets Groups Projects
Unverified Commit fbaa2518 authored by John's avatar John Committed by GitHub
Browse files

Merge pull request #79 from StarArawn/small-fixes

Updated readme and fixed some small bugs.
parents 86d86c93 14812a26
No related branches found
No related tags found
No related merge requests found
...@@ -20,7 +20,7 @@ Kayak UI is in the very early stages of development. Important features are miss ...@@ -20,7 +20,7 @@ Kayak UI is in the very early stages of development. Important features are miss
- Basic widget and global state management - Basic widget and global state management
- Input events (Mouse, Keyboard, Char) - Input events (Mouse, Keyboard, Char)
- Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm - Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm
- A few default widgets check out [kayak_widgets](./kayak_widgets)! - A few default widgets (check out Kayak's [built-in widgets](./src/widgets)!)
- Style system built to kind of mimic CSS styles. - Style system built to kind of mimic CSS styles.
- Image and Nine patch rendering. - Image and Nine patch rendering.
- Vec widgets see vec_widget example! - Vec widgets see vec_widget example!
...@@ -43,18 +43,13 @@ Kayak UI is in the very early stages of development. Important features are miss ...@@ -43,18 +43,13 @@ Kayak UI is in the very early stages of development. Important features are miss
<img src="images/screen1.png" alt="Kayak UI" width="600" /> <img src="images/screen1.png" alt="Kayak UI" width="600" />
## Usage ## Usage
Because bevy's new renderer is not released yet there is no crate on crates.io yet. For now please use the following: Use bevy 0.6!
```rust ```rust
kayak_ui = { git="https://github.com/StarArawn/kayak_ui", rev="{INSERT_COMMIT_SHA_HERE}" } kayak_ui = { git="https://github.com/StarArawn/kayak_ui", rev="{INSERT_COMMIT_SHA_HERE}", features = ["bevy_renderer"] }
kayak_widgets = { git="https://github.com/StarArawn/kayak_ui", rev="{INSERT_COMMIT_SHA_HERE}" } bevy = "0.6.0"
bevy = { git="https://github.com/bevyengine/bevy", rev="{INSERT_COMMIT_SHA_HERE}" }
``` ```
It's also worth mentioning that you will need to use the same bevy revision that this library uses which is currently: `1d0d8a3397bd6fc2c14d42ffd0668d2443748912`.
This is temporary and will change when bevy 0.6 is released.
## Declarative ## Declarative
Kayak UI makes it painless to build out complex UI's using custom or pre-built widgets. Custom widgets are layed out in a XML like syntax that allows you to more easily visualize the widget tree. Here's an example of that syntax: Kayak UI makes it painless to build out complex UI's using custom or pre-built widgets. Custom widgets are layed out in a XML like syntax that allows you to more easily visualize the widget tree. Here's an example of that syntax:
```rust ```rust
...@@ -73,7 +68,8 @@ rsx! { ...@@ -73,7 +68,8 @@ rsx! {
You can easily declare your own custom widgets: You can easily declare your own custom widgets:
```rust ```rust
#[widget] #[widget]
pub fn MyCustomWidget(children: Children) { pub fn MyCustomWidget(props: MyCustomWidgetProps) {
let children = props.get_children();
rsx! { rsx! {
<> <>
{children} {children}
...@@ -87,7 +83,7 @@ pub fn MyCustomWidget(children: Children) { ...@@ -87,7 +83,7 @@ pub fn MyCustomWidget(children: Children) {
Widget's can create their own state and will re-render when that state changes. Widget's can create their own state and will re-render when that state changes.
```rust ```rust
#[widget] #[widget]
fn Counter(context: &mut KayakContext) { fn Counter() {
let (count, set_count, ..) = use_state!(0i32); let (count, set_count, ..) = use_state!(0i32);
let on_event = OnEvent::new(move |_, event| match event.event_type { let on_event = OnEvent::new(move |_, event| match event.event_type {
EventType::Click(..) => set_count(count + 1), EventType::Click(..) => set_count(count + 1),
...@@ -111,7 +107,7 @@ fn Counter(context: &mut KayakContext) { ...@@ -111,7 +107,7 @@ fn Counter(context: &mut KayakContext) {
Widget's can also access global state and when the global state is bound to the widget it will auto re-render: Widget's can also access global state and when the global state is bound to the widget it will auto re-render:
```rust ```rust
#[widget] #[widget]
fn Counter(context: &mut KayakContext) { fn Counter() {
let global_count = { let global_count = {
if let Ok(world) = context.get_global_state::<World>() { if let Ok(world) = context.get_global_state::<World>() {
if let Some(global_count) = world.get_resource::<Binding<GlobalCount>>() { if let Some(global_count) = world.get_resource::<Binding<GlobalCount>>() {
......
...@@ -15,7 +15,7 @@ use kayak_ui::{ ...@@ -15,7 +15,7 @@ use kayak_ui::{
}; };
#[widget] #[widget]
fn FolderTree(props: FolderTreeProps) { fn FolderTree() {
let button_text_styles = Style { let button_text_styles = Style {
width: StyleProp::Value(Units::Stretch(1.0)), width: StyleProp::Value(Units::Stretch(1.0)),
height: StyleProp::Value(Units::Pixels(22.0)), height: StyleProp::Value(Units::Pixels(22.0)),
......
...@@ -22,7 +22,7 @@ use kayak_ui::{ ...@@ -22,7 +22,7 @@ use kayak_ui::{
/// A simple widget that tracks how many times a button is clicked using simple state data /// A simple widget that tracks how many times a button is clicked using simple state data
#[widget] #[widget]
fn StateCounter(props: StateCounterProps) { fn StateCounter() {
// On its own, a widget can't track anything, since every value will just be reset when the widget is re-rendered. // On its own, a widget can't track anything, since every value will just be reset when the widget is re-rendered.
// To get around this, and keep track of a value, we have to use states. States are values that are kept across renders. // To get around this, and keep track of a value, we have to use states. States are values that are kept across renders.
// Additionally, anytime a state is updated with a new value, it causes the containing widget to re-render, making it // Additionally, anytime a state is updated with a new value, it causes the containing widget to re-render, making it
......
...@@ -112,7 +112,7 @@ impl Widget { ...@@ -112,7 +112,7 @@ impl Widget {
}; };
let constructor = quote! { let constructor = quote! {
<#name as kayak_core::Widget>::constructor(#prop_ident) <#name as #kayak_core::Widget>::constructor(#prop_ident)
}; };
(props, constructor) (props, constructor)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment