Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions resources/views/docs/mobile/4/edge-components/icon.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ to work on both platforms, see the [Icon name reference](#icon-name-reference) b

@verbatim
```blade
<native:row :gap="16" :align-items="1">
<native:row :gap="16" align-items="center">
<native:icon class="text-theme-primary" name="home" :size="24" />
<native:icon class="text-theme-primary" name="search" :size="24" />
<native:icon class="text-theme-primary" name="settings" :size="24" />
Expand All @@ -57,7 +57,7 @@ to work on both platforms, see the [Icon name reference](#icon-name-reference) b

@verbatim
```blade
<native:row :gap="8" :align-items="1">
<native:row :gap="8" align-items="center">
<native:icon name="check" :size="20" color="#22C55E" />
<native:text class="text-base" color="#22C55E">Verified</native:text>
</native:row>
Expand Down
49 changes: 35 additions & 14 deletions resources/views/docs/mobile/4/edge-components/layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,15 +119,9 @@ for "fill the remaining space along the parent's main axis."

## Alignment

Alignment values are integers that map to standard flex alignment:

| Value | Meaning |
|-------|---------|
| `0` | start |
| `1` | center |
| `2` | end |
| `3` | stretch |
| `4` | baseline |
Alignment attributes accept a **readable label**, a backing **enum**, or the raw **integer** — all three resolve to
the same value the native layout reads. Labels read best in Blade; enums give you autocomplete and type-safety when
building elements fluently in PHP.

@verbatim
```blade static
Expand All @@ -137,23 +131,50 @@ Alignment values are integers that map to standard flex alignment:
</native:column>

{{-- Cross-axis alignment (horizontal in a column) --}}
<native:column :align-items="1">
<native:column align-items="center">
<native:text>Centered text</native:text>
</native:column>

{{-- Main-axis distribution --}}
<native:row :justify-content="3">
<native:row justify-content="space-between">
<native:text>Left</native:text>
<native:text>Right</native:text>
</native:row>
```
@endverbatim

- `align-items` - Cross-axis alignment for children (int, 0-4)
- `justify-content` - Main-axis distribution (int, 0=start, 1=center, 2=end, 3=space-between, 4=space-around, 5=space-evenly)
- `align-self` - Override parent's `align-items` for this element (int, 0-4)
- `align-items` - Cross-axis alignment for children — `start`, `center`, `end`, `stretch`
- `justify-content` - Main-axis distribution — `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly`
- `align-self` - Override the parent's `align-items` for this element — `start`, `center`, `end`, `stretch`
- `center` - Shorthand: sets both `align-items` and `justify-content` to center (boolean)

### Underlying values

Labels map to these integers, which still work if you prefer them (`align-items="1"`):

| Integer | `align-items` / `align-self` | `justify-content` |
|---------|------------------------------|-------------------|
| `0` | start | start |
| `1` | center | center |
| `2` | end | end |
| `3` | stretch | space-between |
| `4` | — | space-around |
| `5` | — | space-evenly |

### In PHP

When you build elements fluently, pass a label, an enum case, or an integer. The enums live in
`Native\Mobile\Edge\Enums` — `AlignItems`, `AlignSelf`, `JustifyContent`, and `TextAlign`:

```php
use Native\Mobile\Edge\Elements\Column;
use Native\Mobile\Edge\Enums\AlignItems;

Column::make()
->alignItems(AlignItems::Center) // enum — autocompletes, type-checked
->justifyContent('space-between'); // label string — also fine
```

<aside>

A child with `w-full` (or `h-full`) overrides its parent's `items-center` along that axis — same semantics as CSS
Expand Down
3 changes: 2 additions & 1 deletion resources/views/docs/mobile/4/edge-components/row.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,12 @@ Everything else from the shared list applies the same as on any element (`w-*`,
```php
use Native\Mobile\Edge\Elements\Row;
use Native\Mobile\Edge\Elements\Text;
use Native\Mobile\Edge\Enums\AlignItems;

Row::make(
Text::make('Left'),
Text::make('Right'),
)->gap(8)->alignItems(1);
)->gap(8)->alignItems(AlignItems::Center);
```

- `make(Element ...$children)` - Create a row with children. Layout / style fluent methods are inherited from the
Expand Down
7 changes: 4 additions & 3 deletions resources/views/docs/mobile/4/edge-components/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ All [shared layout and style attributes](layout) are supported, plus:

Values outside 1-7 are clamped to the nearest supported weight.
- `color` - Text color as hex string (optional, default: `#000000`)
- `text-align` - Alignment: `0`=start, `1`=center, `2`=end (optional, int, default: `0`)
- `text-align` - Alignment: `left`, `center`, or `right` — a label, a `TextAlign` case, or the integer `0`/`1`/`2` (optional, default: `left`)
- `max-lines` - Maximum lines before truncating with ellipsis (optional, int)
- `font-style` - `0`=normal, `1`=italic (optional, int)
- `font-family` - Typeface: `0`=sans, `1`=serif, `2`=mono (optional, int)
Expand Down Expand Up @@ -306,12 +306,13 @@ to the native renderer.

```php
use Native\Mobile\Edge\Elements\Text;
use Native\Mobile\Edge\Enums\TextAlign;

Text::make('Hello')
->fontSize(18)
->fontWeight(6)
->color('#1E293B')
->textAlign(1)
->textAlign(TextAlign::Center)
->maxLines(2);
```

Expand All @@ -323,6 +324,6 @@ Text::make('Hello')
- `fontStyle(int $style)` - `0`=normal, `1`=italic
- `italic()` - Shortcut for `fontStyle(1)`
- `color(string $hex)` - Text color
- `textAlign(int $align)` - `0`=start, `1`=center, `2`=end
- `textAlign(int|string|TextAlign $align)` - `left`/`center`/`right`, a `TextAlign` case, or `0`/`1`/`2`
- `maxLines(int $lines)` - Truncate after N lines
- `selectable(bool $on = true)` - Make the subtree selectable (mirrors `select-text` / `select-none`)
Loading