Skip to content

chore: replace layout images #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 24, 2021
Merged

chore: replace layout images #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions ui-and-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ The following example creates a simple grid. For more information about creating
</AbsoluteLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_grid.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/absolute_layout_grid.svg" />

#### Example: Overlapping elements

Expand All @@ -156,7 +156,7 @@ The following example creates a group of overlapping items.
</AbsoluteLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/absolute_layout_overlap.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/absolute_layout_overlap.svg" />

#### Props

Expand Down Expand Up @@ -199,7 +199,7 @@ The following example creates a frame-like layout consisting of 4 elements, posi
</DockLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_no_stretch.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/dock_layout_no_stretch.svg" />

#### Example: Dock to every side and stretch the last child

Expand All @@ -214,7 +214,7 @@ The following example shows how `stretchLastChild` affects the positioning of ch
</DockLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_stretch.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/dock_layout_stretch.svg" />

#### Example: Dock to every side and the center

Expand All @@ -230,7 +230,7 @@ The following example creates a `<DockLayout>` of 5 elements. The first four wra
</DockLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_all_sides_and_stretch.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/dock_layout_all_sides_and_stretch.svg" />

#### Example: Dock multiple children to the same side

Expand All @@ -245,7 +245,7 @@ The following example creates a single line of 4 elements that stretch across th
</DockLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/dock_layout_multiple_on_same_side.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/dock_layout_multiple_on_same_side.svg" />

#### Props

Expand Down Expand Up @@ -293,7 +293,7 @@ The following example creates a simple 2-by-2 grid with fixed column widths and
</GridLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout.svg" />

#### Example: Grid layout with star sizing

Expand All @@ -308,7 +308,7 @@ The following example creates a grid with responsive design, where space is allo
</GridLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_star_sizing.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_star_sizing.svg" />

#### Example: Grid layout with fixed and auto sizing

Expand All @@ -323,7 +323,7 @@ The following example create a grid with one auto-sized column and one column wi
</GridLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_fixed_auto.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_fixed_auto.svg" />

#### Example: Grid layout with mixed sizing and merged cells

Expand All @@ -341,7 +341,7 @@ The following example creates a complex grid with responsive design, mixed width
</GridLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/grid_layout_complex.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/grid_layout_complex.svg" />

#### Props

Expand Down Expand Up @@ -386,7 +386,7 @@ The following example creates a vertical stack of 3 equally-sized elements. Item
</StackLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/stack_layout_vertical.svg" />

#### Example: Horizontal stacking

Expand All @@ -400,7 +400,7 @@ The following example creates a horizontal stack of 3 equally-sized elements. It
</StackLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/stack_layout_horizontal.svg" />

#### Example: Stack layout with horizontally aligned children

Expand Down Expand Up @@ -438,7 +438,7 @@ The following example creates a diagonal stack of items with responsive sizes. I
</StackLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_vertical_align_children.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/stack_layout_vertical_align_children.svg" />

#### Example: Horizontal stack layout with vertically aligned children

Expand Down Expand Up @@ -476,7 +476,7 @@ The following example creates a diagonal stack of items with responsive sizes. I
</StackLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/stack_layout_horizontal_align_children.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/stack_layout_horizontal_align_children.svg" />

#### Props

Expand Down Expand Up @@ -624,7 +624,7 @@ The following example creates a row of equally-sized items. When the row runs ou
</WrapLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_horizontal.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/wrap_layout_horizontal.svg" />

#### Example: Vertical wrap layout

Expand All @@ -639,7 +639,7 @@ The following example creates a column of equally-sized items. When the row runs
</WrapLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/wrap_layout_vertical.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/wrap_layout_vertical.svg" />

#### Props

Expand Down Expand Up @@ -672,7 +672,7 @@ The following example creates a row of three equally-sized elements that span ac
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_stretch.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_row_stretch.svg" />

#### Example: Column flex layout

Expand All @@ -686,7 +686,7 @@ The following example creates a column of three equally-sized elements that span
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_stretch.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_column_stretch.svg" />

#### Example: Row flex layout with items aligned to `flex-start`

Expand All @@ -700,7 +700,7 @@ The following example creates a row of three items placed at the top of the scre
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_flex-start.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_row_flex-start.svg" />

#### Example: Row flex layout with custom order

Expand All @@ -714,7 +714,7 @@ The following example creates a row of three items placed at the top of the scre
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_row_custom_order.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_row_custom_order.svg" />

#### Example: Row flex layout with wrapping

Expand All @@ -729,7 +729,7 @@ The following example creates four items with enabled line wrapping. When the ro
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_wrap.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_wrap.svg" />

#### Example: Column flex layout with reverse order and items with a different `alignSelf`

Expand Down Expand Up @@ -764,7 +764,7 @@ The following example shows how to use:
</FlexboxLayout>
```

<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript-vue.org/layouts/flexbox_layout_column_reverse_space_around_align_self.svg" />
<img class="md:w-1/2 lg:w-1/3" src="https://art.nativescript.org/layouts/flexbox_layout_column_reverse_space_around_align_self.svg" />

#### Props

Expand Down