rename gap to row/col to match web (#479)

examples/context/src/main.rs

@@ -22,7 +22,7 @@ fn context_container<V: IntoView + 'static>(
         s.padding(10)
             .border(1)
             .border_color(color)
-            .gap_height(5)
+            .column_gap(5)
             .items_center()
     })
 }
@@ -43,7 +43,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap_height(5)
+            .column_gap(5)
     });
 
     let id = view.id();

examples/dyn-container/src/main.rs

@@ -21,7 +21,7 @@ fn view_two(view: RwSignal<ViewSwitcher>) -> impl IntoView {
             view.set(ViewSwitcher::One);
         }),
     ))
-    .style(|s| s.gap_height(10.0))
+    .style(|s| s.column_gap(10.0))
 }
 
 fn app_view() -> impl IntoView {
@@ -54,7 +54,7 @@ fn app_view() -> impl IntoView {
             .height_full()
             .items_center()
             .justify_center()
-            .gap_width(10)
+            .row_gap(10)
     })
 }
 

examples/files/src/main.rs

@@ -79,7 +79,7 @@ fn app_view() -> impl IntoView {
         }),
     ))
     .style(|s| {
-        s.gap_width(5)
+        s.row_gap(5)
             .width_full()
             .height_full()
             .items_center()

examples/flight_booker/src/main.rs

@@ -102,7 +102,7 @@ pub fn app_view() -> impl IntoView {
         book_button,
         success_message,
     ))
-    .style(|s| s.gap_height(5))
+    .style(|s| s.column_gap(5))
     .style(|s| {
         s.size(100.pct(), 100.pct())
             .flex_col()

examples/layout/src/main.rs

@@ -94,7 +94,7 @@ fn app_view() -> impl IntoView {
             .width_full()
             .height_full()
             .padding(10.0)
-            .gap_height(10.0)
+            .column_gap(10.0)
     });
 
     let id = view.id();

examples/layout/src/tab_navigation.rs

@@ -78,7 +78,7 @@ pub fn tab_navigation_view() -> impl IntoView {
         s.flex_row()
             .width_full()
             .height(TABBAR_HEIGHT)
-            .gap_width(5)
+            .row_gap(5)
             .padding(CONTENT_PADDING)
             .border_bottom(1)
             .border_color(Color::rgb8(205, 205, 205))

examples/stacks/src/dyn_stack.rs

@@ -25,5 +25,5 @@ pub fn dyn_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap_height(5).margin_top(10))
+        .style(|s| s.flex_col().column_gap(5).margin_top(10))
 }

examples/stacks/src/main.rs

@@ -18,33 +18,33 @@ fn app_view() -> impl IntoView {
             "Renders off-screen: true",
             stack::stack_view(),
         )
-            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
+            .style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
         (
             "stack_from_iter".style(|s| s.font_size(16.0)),
             "From signal: false",
             "From iter: true",
             "Renders off-screen: true",
             stack_from_iter::stack_from_iter_view(),
         )
-            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
+            .style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
         (
             "dyn_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
             "From iter: true",
             "Renders off-screen: true",
             dyn_stack::dyn_stack_view(),
         )
-            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
+            .style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
         (
             "virtual_stack".style(|s| s.font_size(16.0)),
             "From signal: true",
             "From iter: true",
             "Renders off-screen: false",
             virtual_stack::virtual_stack_view(),
         )
-            .style(|s| s.flex_col().gap_height(5).width_pct(25.0)),
+            .style(|s| s.flex_col().column_gap(5).width_pct(25.0)),
     )
-        .style(|s| s.flex().margin(20).width_full().height_full().gap_width(10))
+        .style(|s| s.flex().margin(20).width_full().height_full().row_gap(10))
         .into_view();
 
     let id = view.id();

examples/stacks/src/stack.rs

@@ -16,13 +16,13 @@ pub fn stack_view() -> impl IntoView {
         stack((
             "Item 3",
             "Item 4",
-        )).style(|s| s.flex_col().gap_height(5)),
+        )).style(|s| s.flex_col().column_gap(5)),
 
         // The vertical stack view which has flex_col() built in
         v_stack((
             "Item 5",
             "Item 6",
-        )).style(|s| s.gap_height(5)),
+        )).style(|s| s.column_gap(5)),
 
     )
     .style(|s| s.flex_col().gap( 5).margin_top(10))

examples/stacks/src/stack_from_iter.rs

@@ -10,5 +10,5 @@ pub fn stack_from_iter_view() -> impl IntoView {
     let collection: Vec<usize> = (0..10).collect();
 
     stack_from_iter(collection.iter().map(|val| format!("Item {}", val)))
-        .style(|s| s.flex_col().gap_height(5).margin_top(10))
+        .style(|s| s.flex_col().column_gap(5).margin_top(10))
 }

examples/stacks/src/virtual_stack.rs

@@ -27,5 +27,5 @@ pub fn virtual_stack_view() -> impl IntoView {
         )
         .style(|s| s.width(100).height(200).border(1)),
     )
-        .style(|s| s.flex_col().gap_height(5).margin_top(10))
+        .style(|s| s.flex_col().column_gap(5).margin_top(10))
 }

examples/widget-gallery/src/main.rs

@@ -144,7 +144,7 @@ fn app_view() -> impl IntoView {
         })
         .style(|s| s);
 
-    let left = v_stack((list, inspector)).style(|s| s.height_full().gap_height(5.0));
+    let left = v_stack((list, inspector)).style(|s| s.height_full().column_gap(5.0));
 
     let tab = tab(
         move || active_tab.get(),
@@ -171,7 +171,7 @@ fn app_view() -> impl IntoView {
     let tab = scroll(tab).style(|s| s.flex_basis(0).min_width(0).flex_grow(1.0));
 
     let view = h_stack((left, tab))
-        .style(|s| s.padding(5.0).width_full().height_full().gap_width(5.0))
+        .style(|s| s.padding(5.0).width_full().height_full().row_gap(5.0))
         .window_title(|| "Widget Gallery".to_owned());
 
     let id = view.id();

examples/widget-gallery/src/radio_buttons.rs

@@ -47,7 +47,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         },
                     ),
                 ))
-                .style(|s| s.gap_height(10.0).margin_left(5.0))
+                .style(|s| s.column_gap(10.0).margin_left(5.0))
             }),
             form_item("Disabled Radio Buttons:".to_string(), width, move || {
                 v_stack((
@@ -67,7 +67,7 @@ pub fn radio_buttons_view() -> impl IntoView {
                         })
                         .disabled(|| true),
                 ))
-                .style(|s| s.gap_height(10.0).margin_left(5.0))
+                .style(|s| s.column_gap(10.0).margin_left(5.0))
             }),
             form_item("Labelled Radio Buttons:".to_string(), width, move || {
                 v_stack((

examples/window-icon/src/main.rs

@@ -24,7 +24,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap_height(10.0)
+            .column_gap(10.0)
     })
 }
 
@@ -51,7 +51,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap_height(10.0)
+            .column_gap(10.0)
     });
 
     let id = view.id();

examples/window-size/src/main.rs

@@ -20,7 +20,7 @@ fn sub_window_view(id: WindowId) -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap_height(10.0)
+            .column_gap(10.0)
     })
 }
 
@@ -44,7 +44,7 @@ fn app_view() -> impl IntoView {
             .justify_center()
             .width_full()
             .height_full()
-            .gap_height(10.0)
+            .column_gap(10.0)
     });
 
     let id = view.id();

src/style.rs

@@ -1352,7 +1352,7 @@ impl Style {
         self.height(height.pct())
     }
 
-    pub fn gap_width(self, width: impl Into<PxPct>) -> Self {
+    pub fn row_gap(self, width: impl Into<PxPct>) -> Self {
         let gap_height = self.get(Gap).height;
         self.set(
             Gap,
@@ -1363,7 +1363,7 @@ impl Style {
         )
     }
 
-    pub fn gap_height(self, height: impl Into<PxPct>) -> Self {
+    pub fn column_gap(self, height: impl Into<PxPct>) -> Self {
         let gap_width = self.get(Gap).width;
         self.set(
             Gap,
@@ -1374,7 +1374,7 @@ impl Style {
         )
     }
 
-    pub fn gap_width_height(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
+    pub fn row_col_gap(self, width: impl Into<PxPct>, height: impl Into<PxPct>) -> Self {
         self.set(
             Gap,
             Size {

src/theme.rs

@@ -91,7 +91,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_checkbox_style = Style::new()
-        .gap_width(padding)
+        .row_gap(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))
@@ -140,7 +140,7 @@ pub(crate) fn default_theme() -> Theme {
         });
 
     let labeled_radio_button_style = Style::new()
-        .gap_width(padding)
+        .row_gap(padding)
         .hover(|s| s.background(hover_bg_color))
         .padding(padding)
         .transition(Background, Transition::linear(0.04))

src/views/dyn_container.rs

@@ -56,7 +56,7 @@ pub struct DynamicContainer<T: 'static> {
 ///             .height_full()
 ///             .items_center()
 ///             .justify_center()
-///             .gap_width(10)
+///             .row_gap(10)
 ///     })
 /// }
 ///