diff --git a/config/docs.php b/config/docs.php index 671d731a4..022b2365c 100644 --- a/config/docs.php +++ b/config/docs.php @@ -59,7 +59,7 @@ 1 => ['1.0', '1.1'], 2 => ['2.0'], 3 => ['3.0', '3.1', '3.2', '3.3'], - 4 => ['4.0', '4.1', '4.2', '4.5'], + 4 => ['4.0', '4.1', '4.2', '4.3', '4.4', '4.5'], ], ], diff --git a/resources/views/docs/mobile/4/edge-components/layout.md b/resources/views/docs/mobile/4/edge-components/layout.md index 7da8cb55c..227c598d0 100644 --- a/resources/views/docs/mobile/4/edge-components/layout.md +++ b/resources/views/docs/mobile/4/edge-components/layout.md @@ -261,17 +261,34 @@ chrome already handles safe-area insets for you. ## Visibility -Hide elements without removing them from the tree. +Hide elements without removing them from the tree. A hidden element takes up no space in its parent's layout. @verbatim ```blade static + +{{-- Bind it to component state --}} + + ... + ``` @endverbatim -- `hidden` - Hide this element (boolean) +- `hidden` - Hide this element (boolean). Takes precedence over any display class + +The `hidden` class does the same job, and `flex` (or `block`) shows the element again. Pair them with a +[breakpoint](#responsive-breakpoints) to show something only on wider windows: + +@verbatim +```blade static +{{-- A sidebar that only appears from tablet width up --}} + +``` +@endverbatim ## Dark Mode @@ -290,6 +307,77 @@ Override styles for dark mode using the `dark:` prefix with Tailwind classes, or Dark mode overrides currently support `bg`, `color`, `border-color`, `opacity`, and `font-size`. +## Responsive Breakpoints + + + +Prefix a class with a breakpoint to apply it only when the window is at least that wide. Breakpoints are +mobile-first, exactly as in Tailwind: an unprefixed class applies at every width, and `md:flex-row` takes over from +768 up. + +@verbatim +```blade static +{{-- Stacked on a phone, side by side on a tablet --}} + + + Your jobs + + + ... + + +``` +@endverbatim + +| Prefix | Applies from | +|--------|--------------| +| `sm:` | 640 | +| `medium:` | 600 | +| `md:` | 768 | +| `expanded:` | 840 | +| `lg:` | 1024 | +| `xl:` | 1280 | +| `2xl:` | 1536 | + +Widths are points on iOS and dp on Android. `sm:` to `2xl:` are Tailwind's breakpoints; `medium:` and `expanded:` +follow the medium and expanded window size classes in Material Design, if you'd rather design to those. + +Breakpoints are measured against the app's **window**, not the device's screen, and resolved on the device. The same +screen re-flows as soon as the window changes width, whether the device rotates or the app is resized in Split View, +without a round trip to PHP. An iPad in portrait and in landscape can land on different breakpoints. + +Each breakpoint builds on everything narrower. Only the classes you prefix change, so `p-4 md:px-8` keeps its +vertical padding at `md`, and `rounded-xl md:rounded-t-3xl` keeps its rounded bottom corners. + +Any class from the [supported classes](#supported-tailwind-classes) can take a breakpoint prefix, except +`whitespace-*`, which is applied to text content before it reaches the device. Breakpoints combine with the other +variants in either order, so `md:dark:bg-zinc-900`, `dark:md:bg-zinc-900` and `ios:md:p-6` all work. + +### Customizing breakpoints + +The thresholds live in `config/nativephp.php`. Change a width, remove the breakpoints you don't use, or add your +own names: + +```php +'breakpoints' => [ + 'sm' => 640, + 'md' => 768, + 'tablet' => 700, // enables `tablet:` classes + 'lg' => 1024, +], +``` + +The table replaces the defaults entirely, so keep every name you still use in your views. If the key is missing or +empty, the defaults above apply. + + + ## Tailwind Classes EDGE includes a built-in Tailwind CSS parser that converts familiar utility classes into native layout attributes. Use @@ -321,6 +409,8 @@ The parser recognizes the classes listed below. | Gap | `gap-N`, `gap-[N]` (uniform — no `gap-x-*` or `gap-y-*`) | | Position | `absolute`, `relative`, `top-N`, `right-N`, `bottom-N`, `left-N`, arbitrary `top-[N]` etc. | | Flex | `flex-1`, `flex-grow`, `flex-grow-0`, `flex-shrink`, `flex-shrink-0`, `flex-wrap`, `flex-nowrap`, `flex-wrap-reverse` | +| Display | `hidden`; `flex`, `inline-flex`, `block`, `inline-block` and `grid` show the element again (for `hidden md:flex`) | +| Grid columns | `grid-cols-N` — sets the column count of a [lazy grid](lazy-grid) | | Items (cross-axis) | `items-start`, `items-center`, `items-end`, `items-stretch` | | Justify (main-axis) | `justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly` | | Self | `self-start`, `self-center`, `self-end`, `self-stretch` | @@ -333,7 +423,7 @@ The parser recognizes the classes listed below. | Rounded (per corner) | `rounded-tl-*`, `rounded-tr-*`, `rounded-br-*`, `rounded-bl-*`, including arbitrary values (`rounded-br-[4]`) | | Shadow | `shadow`, `shadow-sm`, `shadow-md`, `shadow-lg`, `shadow-xl`, `shadow-2xl`, `shadow-inner`, `shadow-none` | | Opacity | `opacity-{0..100}`, arbitrary `opacity-[0.5]` | -| Text size | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, arbitrary `text-[N]` | +| Text size | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, `text-3xl`, `text-4xl`, `text-5xl`, `text-6xl`, `text-7xl`, `text-8xl`, `text-9xl`, arbitrary `text-[N]` | | Font weight | `font-thin`, `font-extralight`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold`, `font-black` | | Font family | `font-sans`, `font-serif`, `font-mono` | | Font style | `italic`, `not-italic` | @@ -353,8 +443,10 @@ The parser recognizes the classes listed below. | `dark:` | Applies in dark mode (e.g. `dark:bg-zinc-900`) | | `ios:` | Applies on iOS only — drops silently on Android | | `android:` | Applies on Android only — drops silently on iOS | +| `sm:` `md:` `lg:` `xl:` `2xl:` | Applies from that window width up — see [Responsive Breakpoints](#responsive-breakpoints) | -Variants compose freely: `ios:dark:bg-zinc-800`, `dark:ios:bg-zinc-800` — both work. +Variants compose freely, in either order: `ios:dark:bg-zinc-800`, `dark:ios:bg-zinc-800` and `md:dark:bg-zinc-800` +all work. **Alpha suffix** — append `/N` to any color class for opacity (Tailwind v3+ syntax): diff --git a/resources/views/docs/mobile/4/edge-components/lazy-grid.md b/resources/views/docs/mobile/4/edge-components/lazy-grid.md index 9d923af42..d2991899e 100644 --- a/resources/views/docs/mobile/4/edge-components/lazy-grid.md +++ b/resources/views/docs/mobile/4/edge-components/lazy-grid.md @@ -30,7 +30,8 @@ In a real app you would typically loop a collection property on your component ( ## Props - `columns` - Number of equal-width tracks the cells flow across. When `horizontal` is set, this becomes the number - of fixed rows instead (optional, int, default: `2`, minimum `1`) + of fixed rows instead (optional, int, default: `2`, minimum `1`). The `grid-cols-N` class sets the same value; if + both are given, the attribute wins - `gap` - Spacing in dp applied to **both** axes — between rows and between columns. Match the surrounding column's `gap-N` if you want flush alignment with neighbouring content (optional, float, default: `0`) - `horizontal` - Flip the scroll orientation. Rows become the cross axis, `columns` is the number of fixed-height @@ -69,6 +70,28 @@ it be the screen's scroll container) to keep lazy composition. Swap `range(1, 9)` for your own `$photos` collection and bind `src` from each item (e.g. `$photo->url`). +### Responsive columns + + + +Set the column count with `grid-cols-N` and add a [breakpoint](layout#responsive-breakpoints) prefix to change it +as the window widens. The grid re-tracks live when an iPad rotates or the app is resized in Split View. + +@verbatim +```blade static + + @foreach($projects as $project) + + {{ $project->name }} + + @endforeach + +``` +@endverbatim + +Leave out the `columns` attribute when you use the classes. An explicit `:columns` overrides `grid-cols-*` at every +width. + ### Horizontal category shelves @verbatim diff --git a/resources/views/docs/mobile/4/getting-started/configuration.md b/resources/views/docs/mobile/4/getting-started/configuration.md index 9b9a8d452..4f0253187 100644 --- a/resources/views/docs/mobile/4/getting-started/configuration.md +++ b/resources/views/docs/mobile/4/getting-started/configuration.md @@ -165,6 +165,10 @@ With NativePHP, your app can work on iPad too! If you wish to support iPad, simp Using standard CSS responsive design principles, you can make your app work beautifully across all screen sizes. +For EDGE screens, use breakpoint prefixes like `md:` and `lg:` on your classes. They follow the app's window width, +including rotation and Split View, and their thresholds live in the `breakpoints` config option. See +[Responsive Breakpoints](../edge-components/layout#responsive-breakpoints). +