From ad015a8674c6e0ae2465a2cbb9bfcccee9b245af Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Thu, 9 Apr 2026 14:31:34 -0400 Subject: [PATCH 1/3] Add EDGE native component documentation for all element types Document all core EDGE components: layout (Column, Row, ScrollView, Stack, Spacer, Pressable), content (Text, Button, Image, Icon, Divider, ActivityIndicator), forms (TextInput, Toggle), shapes (Canvas, Rect, Circle, Line), and overlays (BottomSheet). Add shared layout system reference covering sizing, spacing, flex, alignment, styling, and events. Update introduction to list all available components grouped by category. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../3/edge-components/activity-indicator.md | 68 +++++ .../mobile/3/edge-components/bottom-sheet.md | 112 +++++++ .../docs/mobile/3/edge-components/button.md | 83 ++++++ .../docs/mobile/3/edge-components/column.md | 91 ++++++ .../docs/mobile/3/edge-components/divider.md | 69 +++++ .../docs/mobile/3/edge-components/icon.md | 78 +++++ .../docs/mobile/3/edge-components/image.md | 84 ++++++ .../mobile/3/edge-components/introduction.md | 40 ++- .../docs/mobile/3/edge-components/layout.md | 282 ++++++++++++++++++ .../mobile/3/edge-components/pressable.md | 89 ++++++ .../docs/mobile/3/edge-components/row.md | 72 +++++ .../mobile/3/edge-components/scroll-view.md | 98 ++++++ .../docs/mobile/3/edge-components/shapes.md | 115 +++++++ .../docs/mobile/3/edge-components/spacer.md | 66 ++++ .../docs/mobile/3/edge-components/stack.md | 67 +++++ .../mobile/3/edge-components/text-input.md | 171 +++++++++++ .../docs/mobile/3/edge-components/text.md | 110 +++++++ .../docs/mobile/3/edge-components/toggle.md | 81 +++++ 18 files changed, 1770 insertions(+), 6 deletions(-) create mode 100644 resources/views/docs/mobile/3/edge-components/activity-indicator.md create mode 100644 resources/views/docs/mobile/3/edge-components/bottom-sheet.md create mode 100644 resources/views/docs/mobile/3/edge-components/button.md create mode 100644 resources/views/docs/mobile/3/edge-components/column.md create mode 100644 resources/views/docs/mobile/3/edge-components/divider.md create mode 100644 resources/views/docs/mobile/3/edge-components/icon.md create mode 100644 resources/views/docs/mobile/3/edge-components/image.md create mode 100644 resources/views/docs/mobile/3/edge-components/layout.md create mode 100644 resources/views/docs/mobile/3/edge-components/pressable.md create mode 100644 resources/views/docs/mobile/3/edge-components/row.md create mode 100644 resources/views/docs/mobile/3/edge-components/scroll-view.md create mode 100644 resources/views/docs/mobile/3/edge-components/shapes.md create mode 100644 resources/views/docs/mobile/3/edge-components/spacer.md create mode 100644 resources/views/docs/mobile/3/edge-components/stack.md create mode 100644 resources/views/docs/mobile/3/edge-components/text-input.md create mode 100644 resources/views/docs/mobile/3/edge-components/text.md create mode 100644 resources/views/docs/mobile/3/edge-components/toggle.md diff --git a/resources/views/docs/mobile/3/edge-components/activity-indicator.md b/resources/views/docs/mobile/3/edge-components/activity-indicator.md new file mode 100644 index 00000000..c5283090 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/activity-indicator.md @@ -0,0 +1,68 @@ +--- +title: Activity Indicator +order: 350 +--- + +## Overview + +A native loading spinner. Use this to indicate background activity or loading states. Renders as a platform-native +progress indicator (spinning wheel on iOS, circular indicator on Android). + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `size` - Indicator size (optional, float): `0`=default, `1`=large, `2`=small +- `color` - Spinner color as hex string (optional, default: platform default) + + + +## Examples + +### Centered loading screen + +@verbatim +```blade + + + Loading... + +``` +@endverbatim + +### Inline loading + +@verbatim +```blade + + + Refreshing + +``` +@endverbatim + +### Conditional loading + +@verbatim +```blade +@if($loading) + + + +@else + + {{-- Content --}} + +@endif +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/bottom-sheet.md b/resources/views/docs/mobile/3/edge-components/bottom-sheet.md new file mode 100644 index 00000000..63ef2ca3 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/bottom-sheet.md @@ -0,0 +1,112 @@ +--- +title: Bottom Sheet +order: 700 +--- + +## Overview + +A modal bottom sheet that slides up from the bottom of the screen. Use it for contextual actions, forms, and detail +views that overlay the main content. Renders as a native bottom sheet on both iOS and Android. + +@verbatim +```blade + + + Sheet Title + Sheet content goes here. + + + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `visible` - Whether the sheet is shown (required, boolean) + +## Events + +- `@dismiss` - Livewire method called when the sheet is dismissed (e.g. by swiping down or tapping the scrim) + +## Children + +Accepts any EDGE elements as children. The children are rendered inside the sheet's content area. + +## Examples + +### Action sheet + +@verbatim +```blade + + + + + + Edit + + + + + + + Share + + + + + + + Delete + + + + +``` +@endverbatim + +### Form in a sheet + +@verbatim +```blade + + + Add Item + + + + + + + + +``` +@endverbatim + +### Toggling a sheet + +The sheet is controlled by a Livewire property. Set `visible` to `true` to show it, and handle the `@dismiss` event to +hide it when the user swipes it away. + +@verbatim +```blade +{{-- Trigger --}} + + +{{-- Sheet --}} + + + Sheet content + + +``` +@endverbatim + + diff --git a/resources/views/docs/mobile/3/edge-components/button.md b/resources/views/docs/mobile/3/edge-components/button.md new file mode 100644 index 00000000..90a0b8be --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/button.md @@ -0,0 +1,83 @@ +--- +title: Button +order: 310 +--- + +## Overview + +A tappable button element. The label can be set via the `label` attribute or as slot content between the tags. Buttons +support custom colors, font sizing, and disabled state. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `label` - Button text (optional if using slot content) +- `color` - Background color as hex string (optional) +- `label-color` - Text color as hex string (optional) +- `font-size` - Label text size (optional, float) +- `disabled` - Disable the button (optional, boolean, default: `false`) + +## Events + +- `@press` - Livewire method to call when tapped +- `@longPress` - Livewire method to call on long press + +## Examples + +### Label as attribute + +@verbatim +```blade + +``` +@endverbatim + +### Label as slot content + +@verbatim +```blade + + Save Changes + +``` +@endverbatim + + + +### Button row + +@verbatim +```blade + + + + +``` +@endverbatim + +### Disabled button + +@verbatim +```blade + +``` +@endverbatim + +### Long press + +@verbatim +```blade + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/column.md b/resources/views/docs/mobile/3/edge-components/column.md new file mode 100644 index 00000000..969655e7 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/column.md @@ -0,0 +1,91 @@ +--- +title: Column +order: 200 +--- + +## Overview + +A vertical flex container that stacks its children from top to bottom. This is the most commonly used layout element +and serves as the foundation for most screen layouts. + +@verbatim +```blade + + First item + Second item + Third item + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. The most commonly used with columns: + +- `gap` - Vertical space between children in dp (optional, float) +- `align-items` - Horizontal alignment of children: `0`=start, `1`=center, `2`=end, `3`=stretch (optional, default: `0`) +- `justify-content` - Vertical distribution: `0`=start, `1`=center, `2`=end, `3`=space-between, `4`=space-around, `5`=space-evenly (optional, default: `0`) +- `safe-area` - Respect device safe area insets (optional, boolean) +- `padding` - Inner spacing, single value or array (optional) +- `bg` - Background color as hex (optional) + +## Children + +Accepts any EDGE elements as children. Children are arranged vertically from top to bottom. + +## Examples + +### Full-screen layout with safe area + +@verbatim +```blade + + My App + + + +``` +@endverbatim + +### Centered content + +@verbatim +```blade + + + Loading... + +``` +@endverbatim + +### Card-style layout + +@verbatim +```blade + + Card Title + Card description goes here. + + + + + +``` +@endverbatim + +### Space-between distribution + +@verbatim +```blade + + Top + Middle + Bottom + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/divider.md b/resources/views/docs/mobile/3/edge-components/divider.md new file mode 100644 index 00000000..a3c78abf --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/divider.md @@ -0,0 +1,69 @@ +--- +title: Divider +order: 340 +--- + +## Overview + +A horizontal line separator used to visually divide sections of content. Renders as a thin native divider line. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. The most useful for dividers: + +- `bg` - Line color as hex string (optional, default: platform default separator color) +- `opacity` - Line opacity from 0.0 to 1.0 (optional) +- `margin` - Spacing around the divider (optional) + + + +## Examples + +### Basic separator + +@verbatim +```blade + + Section One + Some content here. + + Section Two + More content here. + +``` +@endverbatim + +### Colored divider with margin + +@verbatim +```blade + +``` +@endverbatim + +### In a list + +@verbatim +```blade + + @foreach($items as $item) + + {{ $item->name }} + + @unless($loop->last) + + @endunless + @endforeach + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/icon.md b/resources/views/docs/mobile/3/edge-components/icon.md new file mode 100644 index 00000000..69198640 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/icon.md @@ -0,0 +1,78 @@ +--- +title: Icon +order: 330 +--- + +## Overview + +Displays a platform-native icon. On iOS, icons render as SF Symbols. On Android, icons render as Material Icons. +A smart mapping system translates common icon names across platforms automatically. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `name` - Icon name (required, string). See the [Icons](icons) reference for available names +- `size` - Icon size in dp (optional, float, default: `24`) +- `color` - Icon color as hex string (optional, default: platform default) + + + +## Examples + +### Basic icons + +@verbatim +```blade + + + + + + +``` +@endverbatim + +### Colored icon with label + +@verbatim +```blade + + + Verified + +``` +@endverbatim + +### Large icon + +@verbatim +```blade + + + No messages + +``` +@endverbatim + +### Platform-specific icon + +@verbatim +```blade + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/image.md b/resources/views/docs/mobile/3/edge-components/image.md new file mode 100644 index 00000000..70c950fe --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/image.md @@ -0,0 +1,84 @@ +--- +title: Image +order: 320 +--- + +## Overview + +Displays an image from a URL. Supports multiple content fit modes and optional tinting. Images are loaded +asynchronously by the native platform. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `src` - Image URL (required, string) +- `fit` - Content fit mode (optional, int, default: `1`): + - `0` - None (original size) + - `1` - Fit (scale to fit within bounds, preserving aspect ratio) + - `2` - Crop (scale to fill bounds, cropping excess) + - `3` - Fill (stretch to fill bounds, may distort) +- `tint-color` - Apply a color tint as hex string (optional) + + + +## Examples + +### Basic image + +@verbatim +```blade + +``` +@endverbatim + +### Rounded avatar + +@verbatim +```blade + +``` +@endverbatim + +### Tinted icon image + +@verbatim +```blade + +``` +@endverbatim + +### Image in a card + +@verbatim +```blade + + + + Article Title + A brief description of the article. + + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/introduction.md b/resources/views/docs/mobile/3/edge-components/introduction.md index a48d98ca..0770f9fc 100644 --- a/resources/views/docs/mobile/3/edge-components/introduction.md +++ b/resources/views/docs/mobile/3/edge-components/introduction.md @@ -18,19 +18,47 @@ step that happens at runtime. You end up with pure, fast and flexible native com ## Available Components -Our first set of components are focused on navigation, framing your application with beautiful, platform-dependent UI -components. These familiar navigational elements will help your users feel immediately at home in your app and elevate -your app to feeling built for their chosen platform, just like a true native app. +EDGE provides a full suite of native UI components for building your app, from layout containers and typography to +interactive forms and navigation chrome. -And all that without compromising your ability to build using tools and techniques you're already the most comfortable -with. +### Layout -For now, we have 3 main native components that you can configure: +- **[Layout & Styling](layout)** - Shared sizing, spacing, flex, style, and event attributes available on all elements +- **[Column](column)** - Vertical flex container +- **[Row](row)** - Horizontal flex container +- **[Scroll View](scroll-view)** - Scrollable container with virtualization +- **[Stack](stack)** - Overlay container (ZStack) for layering elements +- **[Spacer](spacer)** - Flexible space element +- **[Pressable](pressable)** - Touch-sensitive container wrapper + +### Content + +- **[Text](text)** - Text display with font sizing, weight, color, and alignment +- **[Button](button)** - Tappable button with label, colors, and disabled state +- **[Image](image)** - Image display with fit modes and tinting +- **[Icon](icon)** - Platform-native icons (SF Symbols on iOS, Material Icons on Android) +- **[Divider](divider)** - Horizontal line separator +- **[Activity Indicator](activity-indicator)** - Loading spinner + +### Forms + +- **[Text Input](text-input)** - Text input field with labels, validation, and keyboard types +- **[Toggle](toggle)** - On/off switch control + +### Navigation - **[Bottom Navigation](bottom-nav)** - The always-accessible bottom navigation bar - **[Top Bar](top-bar)** - A title bar with action buttons - **[Side Navigation](side-nav)** - A slide-out navigation drawer +### Shapes + +- **[Shapes](shapes)** - Rect, circle, and line elements for drawing + +### Overlays + +- **[Bottom Sheet](bottom-sheet)** - Modal bottom sheet for contextual actions and forms + ## How It Works @verbatim diff --git a/resources/views/docs/mobile/3/edge-components/layout.md b/resources/views/docs/mobile/3/edge-components/layout.md new file mode 100644 index 00000000..523bd334 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/layout.md @@ -0,0 +1,282 @@ +--- +title: Layout & Styling +order: 150 +--- + +## Overview + +Every EDGE element shares a common set of layout, styling, and event attributes. These are inherited from the base +`Element` class and can be applied to any native component -- containers, text, buttons, images, and more. + +This page documents the shared attribute system that powers the layout engine across all EDGE elements. + +## Sizing + +Control element dimensions with width, height, and fill attributes. + +@verbatim +```blade +{{-- Fixed dimensions (in dp) --}} + + ... + + +{{-- Fill available space --}} + + ... + + +{{-- Fill both axes --}} + + ... + + +{{-- Percentage width --}} + + ... + +``` +@endverbatim + +- `width` - Width in dp (float) or percentage string (e.g. `"50%"`) +- `height` - Height in dp (float) or percentage string +- `fill` - Fill both width and height of parent (boolean) +- `fill-width` - Fill parent width (boolean) +- `fill-height` - Fill parent height (boolean) +- `min-width` - Minimum width in dp (float) +- `max-width` - Maximum width in dp (float) +- `min-height` - Minimum height in dp (float) +- `max-height` - Maximum height in dp (float) +- `aspect-ratio` - Width-to-height ratio (float, e.g. `1.0` for square) + +## Spacing + +Padding and margin follow CSS shorthand conventions. Pass a single value for uniform spacing, or an array for +per-side control. + +@verbatim +```blade +{{-- Uniform padding --}} + + ... + + +{{-- Vertical | Horizontal --}} + + ... + + +{{-- Top | Right | Bottom | Left --}} + + ... + + +{{-- Uniform margin --}} + + ... + + +{{-- Gap between children --}} + + ... + +``` +@endverbatim + +- `padding` - Inner spacing. Single value (float) or array of 2-4 values +- `margin` - Outer spacing. Single value (float) or array of 2-4 values +- `gap` - Space between children in dp (float) + +## Flex Layout + +The layout engine uses a Flexbox-based system. Containers (column, row) arrange children along a main axis, and flex +properties control how children grow, shrink, and align. + +@verbatim +```blade +{{-- Grow to fill remaining space --}} + + ... + + +{{-- Prevent shrinking --}} + + ... + +``` +@endverbatim + +- `flex-grow` - How much this element grows relative to siblings (float, default: `0`) +- `flex-shrink` - How much this element shrinks when space is limited (float) +- `flex-basis` - Initial size before flex distribution (float or string) + +## Alignment + +Alignment values are integers that map to standard flex alignment: + +| Value | Meaning | +|-------|---------| +| `0` | start | +| `1` | center | +| `2` | end | +| `3` | stretch | +| `4` | baseline | + +@verbatim +```blade +{{-- Center children on both axes --}} + + ... + + +{{-- Cross-axis alignment (horizontal in a column) --}} + + Centered text + + +{{-- Main-axis distribution --}} + + Left + Right + +``` +@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) +- `center` - Shorthand: sets both `align-items` and `justify-content` to center (boolean) + +## Style + +Visual styling attributes that apply to any element. + +@verbatim +```blade + + ... + +``` +@endverbatim + +- `bg` - Background color as hex string (e.g. `"#FF0000"`, `"#80FF000080"` for alpha) +- `border-radius` - Corner rounding in dp (float) +- `border-width` - Border width in dp (float). Must be used together with `border-color` +- `border-color` - Border color as hex string. Must be used together with `border-width` +- `opacity` - Element opacity from 0.0 to 1.0 (float) +- `elevation` - Shadow depth (float). Maps to platform shadow/elevation + +## Events + +Any element can respond to press and long-press gestures. Use `@press` and `@longPress` directives to bind Livewire +methods. + +@verbatim +```blade + + Tap or long press me + +``` +@endverbatim + +- `@press` - Livewire method to call on tap +- `@longPress` - Livewire method to call on long press + +## Safe Area + +Respect the device's safe area insets (notch, home indicator, status bar) by adding the `safe-area` attribute. This is +typically applied to your outermost column. + +@verbatim +```blade + + {{-- Content will not overlap the notch or home indicator --}} + +``` +@endverbatim + +- `safe-area` - Inset content to avoid system UI (boolean) + +## Visibility + +Hide elements without removing them from the tree. + +@verbatim +```blade + +``` +@endverbatim + +- `hidden` - Hide this element (boolean) + +## Dark Mode + +Override styles for dark mode using the `dark:` prefix with Tailwind classes, or pass a `dark` attribute array. + +@verbatim +```blade +{{-- Tailwind dark mode --}} + + + Adapts to dark mode + + +``` +@endverbatim + +Dark mode overrides currently support `bg`, `color`, `border-color`, `opacity`, and `font-size`. + +## Tailwind Classes + +EDGE includes a built-in Tailwind CSS parser that converts familiar utility classes into native layout attributes. Use +the `class` attribute on any element. + +@verbatim +```blade + + + Styled with Tailwind + + +``` +@endverbatim + +### Supported Tailwind classes + +| Category | Classes | +|----------|---------| +| Width | `w-full`, `w-{n}`, `w-1/2`, `w-1/3`, `w-[100]` | +| Height | `h-full`, `h-{n}`, `h-[100]` | +| Padding | `p-{n}`, `px-{n}`, `py-{n}`, `pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}` | +| Margin | `m-{n}`, `mx-{n}`, `my-{n}`, `mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}` | +| Gap | `gap-{n}` | +| Background | `bg-{color}-{shade}`, `bg-white`, `bg-black`, `bg-[#hex]` | +| Text color | `text-{color}-{shade}`, `text-white`, `text-black`, `text-[#hex]` | +| Text size | `text-xs`, `text-sm`, `text-base`, `text-lg`, `text-xl` ... `text-6xl` | +| Font weight | `font-thin`, `font-light`, `font-normal`, `font-medium`, `font-semibold`, `font-bold`, `font-extrabold` | +| Border | `border`, `border-{n}`, `border-{color}-{shade}`, `border-[#hex]` | +| Rounded | `rounded`, `rounded-sm` ... `rounded-full`, `rounded-[16]` | +| Shadow | `shadow`, `shadow-sm` ... `shadow-2xl`, `shadow-none` | +| Opacity | `opacity-{0-100}` | +| Alignment | `items-start`, `items-center`, `items-end`, `items-stretch` | +| Justify | `justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly` | +| Self | `self-start`, `self-center`, `self-end`, `self-stretch` | +| Flex | `flex-1`, `flex-grow`, `flex-grow-0`, `flex-shrink`, `flex-shrink-0` | +| Safe area | `safe-area` | +| Text align | `text-left`, `text-center`, `text-right` | + + diff --git a/resources/views/docs/mobile/3/edge-components/pressable.md b/resources/views/docs/mobile/3/edge-components/pressable.md new file mode 100644 index 00000000..ed320e47 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/pressable.md @@ -0,0 +1,89 @@ +--- +title: Pressable +order: 250 +--- + +## Overview + +A touch-sensitive container that wraps its children in a tappable area. Pressable is structurally identical to a column +but is specifically designed for handling tap and long-press gestures on a group of elements. + +While any element can handle `@press` and `@longPress` events, `` makes the intent explicit and +provides a clear tap target that wraps multiple children. + +@verbatim +```blade + + {{ $item->name }} + {{ $item->description }} + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. There are no pressable-specific props beyond the +standard event handlers. + +## Events + +- `@press` - Livewire method to call on tap +- `@longPress` - Livewire method to call on long press + +## Children + +Accepts any EDGE elements as children. Children are arranged vertically (like a column). + +## Examples + +### Tappable list item + +@verbatim +```blade +@foreach($items as $item) + + + + + {{ $item->name }} + {{ $item->subtitle }} + + + + + @unless($loop->last) + + @endunless +@endforeach +``` +@endverbatim + +### Card with tap and long press + +@verbatim +```blade + + {{ $post->title }} + {{ $post->excerpt }} + +``` +@endverbatim + +### Navigation with @navigate + +@verbatim +```blade + + {{ $item->name }} + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/row.md b/resources/views/docs/mobile/3/edge-components/row.md new file mode 100644 index 00000000..62e4bf9b --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/row.md @@ -0,0 +1,72 @@ +--- +title: Row +order: 210 +--- + +## Overview + +A horizontal flex container that arranges its children from left to right. Use rows for side-by-side layouts, toolbars, +and inline groupings. + +@verbatim +```blade + + + 4.8 Rating + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. The most commonly used with rows: + +- `gap` - Horizontal space between children in dp (optional, float) +- `align-items` - Vertical alignment of children: `0`=start, `1`=center, `2`=end, `3`=stretch (optional, default: `0`) +- `justify-content` - Horizontal distribution: `0`=start, `1`=center, `2`=end, `3`=space-between, `4`=space-around, `5`=space-evenly (optional, default: `0`) +- `padding` - Inner spacing, single value or array (optional) +- `bg` - Background color as hex (optional) + +## Children + +Accepts any EDGE elements as children. Children are arranged horizontally from left to right. + +## Examples + +### Toolbar with spacer + +@verbatim +```blade + + Title + + + +``` +@endverbatim + +### Evenly spaced items + +@verbatim +```blade + + One + Two + Three + +``` +@endverbatim + +### Inline label and value + +@verbatim +```blade + + Status + + + Active + + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/scroll-view.md b/resources/views/docs/mobile/3/edge-components/scroll-view.md new file mode 100644 index 00000000..28827f39 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/scroll-view.md @@ -0,0 +1,98 @@ +--- +title: Scroll View +order: 220 +--- + +## Overview + +A scrollable container for content that exceeds the available screen space. By default it scrolls vertically, but can +be configured for horizontal scrolling. On the native side, this uses `LazyColumn`/`LazyRow` on Android and +`ScrollView` on iOS for efficient rendering. + +@verbatim +```blade + + + @foreach($items as $item) + {{ $item->name }} + @endforeach + + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `horizontal` - Scroll horizontally instead of vertically (optional, boolean, default: `false`) +- `shows-indicators` - Show scroll indicators (optional, boolean, default: `true`) + +## Children + +Accepts any EDGE elements as children. Typically wraps a single `` or `` that contains the +scrollable content. + +## Examples + +### Vertical list + +@verbatim +```blade + + + @foreach($posts as $post) + + {{ $post->title }} + {{ $post->excerpt }} + + @endforeach + + +``` +@endverbatim + +### Horizontal carousel + +@verbatim +```blade + + + @foreach($categories as $category) + + {{ $category->name }} + + @endforeach + + +``` +@endverbatim + +### Full-page scrollable layout + +@verbatim +```blade + + + Welcome + + Scroll down to see more content. + + {{-- Long content here --}} + + +``` +@endverbatim + + diff --git a/resources/views/docs/mobile/3/edge-components/shapes.md b/resources/views/docs/mobile/3/edge-components/shapes.md new file mode 100644 index 00000000..a63296ba --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/shapes.md @@ -0,0 +1,115 @@ +--- +title: Shapes +order: 600 +--- + +## Overview + +Shape elements are used for drawing basic geometric forms. They are typically placed inside a `` or +used standalone for simple visual elements like colored backgrounds and decorative accents. + +## Canvas + +A container for shape elements. Provides a drawing surface for rects, circles, and lines. + +@verbatim +```blade + + + + +``` +@endverbatim + +## Rect + +A rectangle shape. Styled via the shared layout and style attributes. + +@verbatim +```blade + +``` +@endverbatim + +### Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `left` - X position offset in dp (optional, float) +- `top` - Y position offset in dp (optional, float) + +## Circle + +A circle shape. Automatically applies a large `border-radius` to create a circular form. + +@verbatim +```blade + +``` +@endverbatim + +### Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `left` - X position offset in dp (optional, float) +- `top` - Y position offset in dp (optional, float) + + + +## Line + +A line drawn between two points. Defined by `from` and `to` coordinates. + +@verbatim +```blade + +``` +@endverbatim + +### Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `from` - Start point as `"x, y"` string (optional) +- `to` - End point as `"x, y"` string (optional) + +## Examples + +### Status dot + +@verbatim +```blade + +``` +@endverbatim + +### Colored badge background + +@verbatim +```blade + + New + +``` +@endverbatim + +### Decorative separator + +@verbatim +```blade + +``` +@endverbatim + + diff --git a/resources/views/docs/mobile/3/edge-components/spacer.md b/resources/views/docs/mobile/3/edge-components/spacer.md new file mode 100644 index 00000000..6b58c166 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/spacer.md @@ -0,0 +1,66 @@ +--- +title: Spacer +order: 240 +--- + +## Overview + +A flexible space element that expands to fill remaining space within a column or row. Spacers are the simplest way to +push elements apart without calculating explicit sizes. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. Most commonly used: + +- `flex-grow` - How much space to consume relative to other spacers (optional, float, default: `1` implicitly) + + + +## Examples + +### Push content to bottom + +@verbatim +```blade + + Welcome + Get started with your app. + + + +``` +@endverbatim + +### Space between header and content + +@verbatim +```blade + + Title + + + +``` +@endverbatim + +### Fixed-height spacer + +@verbatim +```blade + + Section One + + Section Two + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/stack.md b/resources/views/docs/mobile/3/edge-components/stack.md new file mode 100644 index 00000000..46b404e4 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/stack.md @@ -0,0 +1,67 @@ +--- +title: Stack +order: 230 +--- + +## Overview + +An overlay container that layers its children on top of each other (similar to `ZStack` in SwiftUI or `Box` in +Jetpack Compose). The first child is rendered at the bottom, and each subsequent child is placed on top. + +This is useful for badges, image overlays, floating labels, and layered UI effects. + +@verbatim +```blade + + + + Overlay Text + + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. There are no stack-specific props. + +## Children + +Accepts any EDGE elements as children. Children are rendered in order, with later children appearing on top of +earlier ones. + +## Examples + +### Badge on an icon + +@verbatim +```blade + + + + 3 + + +``` +@endverbatim + +### Image with gradient overlay + +@verbatim +```blade + + + + Featured Article + Read more about this topic + + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/text-input.md b/resources/views/docs/mobile/3/edge-components/text-input.md new file mode 100644 index 00000000..b0f2f1d7 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/text-input.md @@ -0,0 +1,171 @@ +--- +title: Text Input +order: 500 +--- + +## Overview + +A native text input field for user input. Supports placeholders, labels, secure entry for passwords, multiline mode, +keyboard type selection, and validation states. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `value` - Current text value (optional, string) +- `placeholder` - Placeholder text shown when empty (optional, string) +- `label` - Floating label text (optional, string) +- `secure` - Mask input for passwords (optional, boolean, default: `false`) +- `multiline` - Allow multiple lines of text (optional, boolean, default: `false`) +- `disabled` - Disable the input (optional, boolean, default: `false`) +- `read-only` - Make the input read-only (optional, boolean, default: `false`) +- `is-error` - Show error styling (optional, boolean, default: `false`) +- `keyboard` - Keyboard type (optional, int): `0`=default, `1`=number, `2`=email, `3`=phone, `4`=URL +- `max-length` - Maximum character count (optional, int) +- `max-lines` - Maximum visible lines (optional, int) +- `min-lines` - Minimum visible lines (optional, int) +- `variant` - Input style (optional, int): `0`=outlined, `1`=filled +- `font-size` - Text size (optional, float) +- `font-weight` - Text weight 1-7 (optional, int) +- `color` - Accent/cursor color as hex (optional) +- `text-color` - Input text color as hex (optional) +- `container-color` - Background color as hex (optional) +- `label-color` - Label text color as hex (optional) + +### Decorations + +- `prefix` - Text displayed before the input (optional, string) +- `suffix` - Text displayed after the input (optional, string) +- `supporting` - Helper text displayed below the input (optional, string) +- `supporting-color` - Helper text color as hex (optional) +- `leading-icon` - Icon name displayed at the start (optional, string) +- `trailing-icon` - Icon name displayed at the end (optional, string) + +## Events + +- `@change` - Livewire method called when the text value changes. Receives the new text value as a parameter +- `@submit` - Livewire method called when the user submits (e.g. presses return). Receives the text value as a parameter + + + +## Two-way Binding + +Use the `@model` directive for automatic two-way binding with a Livewire property. This is shorthand for setting +`:value` and `@change` together. + +@verbatim +```blade + +``` +@endverbatim + +This is equivalent to: + +@verbatim +```blade + +``` +@endverbatim + +## Examples + +### Login form + +@verbatim +```blade + + + + + +``` +@endverbatim + +### With validation error + +@verbatim +```blade + +``` +@endverbatim + +### Multiline textarea + +@verbatim +```blade + +``` +@endverbatim + +### Search field + +@verbatim +```blade + +``` +@endverbatim + +### With prefix and suffix + +@verbatim +```blade + +``` +@endverbatim diff --git a/resources/views/docs/mobile/3/edge-components/text.md b/resources/views/docs/mobile/3/edge-components/text.md new file mode 100644 index 00000000..4dd94e77 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/text.md @@ -0,0 +1,110 @@ +--- +title: Text +order: 300 +--- + +## Overview + +Displays text content using platform-native typography. Text supports font sizing, weight, color, alignment, and line +clamping. The text content is placed between the opening and closing tags. + +@verbatim +```blade + + Hello, world! + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `font-size` - Text size in sp/pt (optional, float, default: `16`) +- `font-weight` - Weight from 1-7: 1=thin, 2=light, 3=normal, 4=medium, 5=semibold, 6=bold, 7=extrabold (optional, int, default: `3`) +- `color` - Text color as hex string (optional, default: platform default) +- `text-align` - Alignment: `0`=start, `1`=center, `2`=end (optional, int, default: `0`) +- `max-lines` - Maximum number of lines before truncating with ellipsis (optional, int) + + + +## Dark Mode + +Use the `dark:` prefix with Tailwind classes or pass a dark-mode color override. + +@verbatim +```blade + + Adapts to dark mode + +``` +@endverbatim + +## Examples + +### Font weight scale + +@verbatim +```blade +Thin (1) +Light (2) +Normal (3) +Medium (4) +SemiBold (5) +Bold (6) +ExtraBold (7) +``` +@endverbatim + +### Truncated text + +@verbatim +```blade + + This text will be truncated with an ellipsis after two lines if it overflows + the available space in its container. + +``` +@endverbatim + +### Centered heading + +@verbatim +```blade + + Welcome Back + +``` +@endverbatim + +### Tappable text + +@verbatim +```blade + + Learn more + +``` +@endverbatim + +### Dynamic content + +@verbatim +```blade + + Score: {{ $score }} + +``` +@endverbatim + + diff --git a/resources/views/docs/mobile/3/edge-components/toggle.md b/resources/views/docs/mobile/3/edge-components/toggle.md new file mode 100644 index 00000000..debc4508 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/toggle.md @@ -0,0 +1,81 @@ +--- +title: Toggle +order: 510 +--- + +## Overview + +A native on/off switch control. Renders as a `UISwitch` on iOS and a Material `Switch` on Android. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported, plus: + +- `value` - Current toggle state (optional, boolean, default: `false`) +- `disabled` - Disable the toggle (optional, boolean, default: `false`) + +## Events + +- `@change` - Livewire method called when the toggle is flipped. Receives the new boolean value as a parameter + + + +## Two-way Binding + +Use `@model` for automatic two-way binding with a Livewire property. + +@verbatim +```blade + +``` +@endverbatim + +## Examples + +### Settings list + +@verbatim +```blade + + + Dark Mode + + + + + Notifications + + + + + Location + + + +``` +@endverbatim + +### With icon and description + +@verbatim +```blade + + + + Push Notifications + Receive alerts for new messages + + + +``` +@endverbatim From 8116c5be9f44d985b8685bdfebcffc67f1f59fcc Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Wed, 29 Apr 2026 17:41:24 -0400 Subject: [PATCH 2/3] docs(mobile/3): full revise of edge-components + new chrome / nav / safe-area pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Edge components — reconciled every existing page with element + iOS/Android renderers: - bottom-nav: active-color, background-color, text-color, news; TabBar / Tab builder API; safe-area auto-handling; tab taps use replace semantics. - top-bar: subtitle, background-color, text-color, elevation (hairline overlay, not SwiftUI shadow); NavBar / NavAction builder API; navigationOptions(). - scroll-view: shows-indicators flagged iOS-only; Android LazyRow/Column. - stack: rewrote around the new custom Layout — children at natural size, centered. - layout: align-self stretch override of items-center; flex-1 shorthand. - button, toggle, checkbox, slider, select, radio-group, button-group, chip, text-input: Model 3 styling rule (per-instance bg/padding/font-size dropped). - text-input: replaced the (non-existent) doc with separate outlined and filled coverage; corrected keyboard string enum. - image: corrected fit modes (renderer collapses to fit/fill). - text: fixed font-weight 7 → .heavy (was "extrabold"). - shapes: per-shape sections (rect / circle / line); flagged that ignores from/to (renderer always draws horizontal). - divider: clarified border-color drives line color; horizontal-divider alias. - introduction: refreshed component inventory. New edge-components pages: - badge, button-group, canvas, card, carousel, checkbox, chip, list (covers list-item), modal, progress-bar, radio-group (covers radio), screen, select, slider, tab-row (covers tab). New the-basics pages: - layouts: NativeLayout + StackLayout / TabsLayout, route attachment, wrapWithChrome flow, navigationOptions / setNavBar / navTitle. - navigation: navigate / back / replace / exitToWeb, transitions, param/data. - safe-area: safeArea / safeAreaTop / safeAreaBottom; bitmask + auto-handling via wrapWithChrome based on which bars are present. - positioning: absolute / relative + anchor convention; FAB pattern; stack caveat. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../3/edge-components/activity-indicator.md | 45 ++-- .../docs/mobile/3/edge-components/badge.md | 90 ++++++++ .../mobile/3/edge-components/bottom-nav.md | 62 +++++- .../mobile/3/edge-components/bottom-sheet.md | 71 +++--- .../mobile/3/edge-components/button-group.md | 83 +++++++ .../docs/mobile/3/edge-components/button.md | 103 ++++++--- .../docs/mobile/3/edge-components/canvas.md | 43 ++++ .../docs/mobile/3/edge-components/card.md | 103 +++++++++ .../docs/mobile/3/edge-components/carousel.md | 88 ++++++++ .../docs/mobile/3/edge-components/checkbox.md | 82 +++++++ .../docs/mobile/3/edge-components/chip.md | 82 +++++++ .../docs/mobile/3/edge-components/column.md | 15 ++ .../docs/mobile/3/edge-components/divider.md | 22 +- .../docs/mobile/3/edge-components/icon.md | 12 + .../docs/mobile/3/edge-components/image.md | 26 ++- .../mobile/3/edge-components/introduction.md | 27 ++- .../docs/mobile/3/edge-components/layout.md | 24 +- .../docs/mobile/3/edge-components/list.md | 202 +++++++++++++++++ .../docs/mobile/3/edge-components/modal.md | 90 ++++++++ .../mobile/3/edge-components/pressable.md | 11 + .../mobile/3/edge-components/progress-bar.md | 83 +++++++ .../mobile/3/edge-components/radio-group.md | 113 ++++++++++ .../docs/mobile/3/edge-components/row.md | 15 ++ .../docs/mobile/3/edge-components/screen.md | 53 +++++ .../mobile/3/edge-components/scroll-view.md | 9 +- .../docs/mobile/3/edge-components/select.md | 96 ++++++++ .../docs/mobile/3/edge-components/shapes.md | 74 +++--- .../docs/mobile/3/edge-components/side-nav.md | 3 +- .../docs/mobile/3/edge-components/slider.md | 96 ++++++++ .../docs/mobile/3/edge-components/stack.md | 55 ++++- .../docs/mobile/3/edge-components/tab-row.md | 127 +++++++++++ .../mobile/3/edge-components/text-input.md | 169 ++++++++------ .../docs/mobile/3/edge-components/text.md | 49 +++- .../docs/mobile/3/edge-components/toggle.md | 59 +++-- .../docs/mobile/3/edge-components/top-bar.md | 102 +++++++-- .../views/docs/mobile/3/the-basics/layouts.md | 210 ++++++++++++++++++ .../docs/mobile/3/the-basics/navigation.md | 146 ++++++++++++ .../docs/mobile/3/the-basics/positioning.md | 63 ++++++ .../docs/mobile/3/the-basics/safe-area.md | 83 +++++++ 39 files changed, 2645 insertions(+), 241 deletions(-) create mode 100644 resources/views/docs/mobile/3/edge-components/badge.md create mode 100644 resources/views/docs/mobile/3/edge-components/button-group.md create mode 100644 resources/views/docs/mobile/3/edge-components/canvas.md create mode 100644 resources/views/docs/mobile/3/edge-components/card.md create mode 100644 resources/views/docs/mobile/3/edge-components/carousel.md create mode 100644 resources/views/docs/mobile/3/edge-components/checkbox.md create mode 100644 resources/views/docs/mobile/3/edge-components/chip.md create mode 100644 resources/views/docs/mobile/3/edge-components/list.md create mode 100644 resources/views/docs/mobile/3/edge-components/modal.md create mode 100644 resources/views/docs/mobile/3/edge-components/progress-bar.md create mode 100644 resources/views/docs/mobile/3/edge-components/radio-group.md create mode 100644 resources/views/docs/mobile/3/edge-components/screen.md create mode 100644 resources/views/docs/mobile/3/edge-components/select.md create mode 100644 resources/views/docs/mobile/3/edge-components/slider.md create mode 100644 resources/views/docs/mobile/3/edge-components/tab-row.md create mode 100644 resources/views/docs/mobile/3/the-basics/layouts.md create mode 100644 resources/views/docs/mobile/3/the-basics/navigation.md create mode 100644 resources/views/docs/mobile/3/the-basics/positioning.md create mode 100644 resources/views/docs/mobile/3/the-basics/safe-area.md diff --git a/resources/views/docs/mobile/3/edge-components/activity-indicator.md b/resources/views/docs/mobile/3/edge-components/activity-indicator.md index c5283090..7c1a707f 100644 --- a/resources/views/docs/mobile/3/edge-components/activity-indicator.md +++ b/resources/views/docs/mobile/3/edge-components/activity-indicator.md @@ -5,8 +5,9 @@ order: 350 ## Overview -A native loading spinner. Use this to indicate background activity or loading states. Renders as a platform-native -progress indicator (spinning wheel on iOS, circular indicator on Android). +A circular spinner indicating background activity. Always indeterminate — for determinate progress use +[``](progress-bar). Renders as a SwiftUI `ProgressView` on iOS and Material3 +`CircularProgressIndicator` on Android. @verbatim ```blade @@ -18,13 +19,17 @@ progress indicator (spinning wheel on iOS, circular indicator on Android). All [shared layout and style attributes](layout) are supported, plus: -- `size` - Indicator size (optional, float): `0`=default, `1`=large, `2`=small -- `color` - Spinner color as hex string (optional, default: platform default) +- `size` - `"sm"`, `"md"` (default), or `"lg"` (optional, string). Legacy ints `1`=large, `2`=small are also accepted +- `color` - Spinner color as hex string (optional). Leave unset to use `theme.primary` +- `a11y-label` - Accessibility label (optional) ## Examples @@ -34,7 +39,7 @@ All [shared layout and style attributes](layout) are supported, plus: @verbatim ```blade - + Loading... ``` @@ -45,24 +50,32 @@ All [shared layout and style attributes](layout) are supported, plus: @verbatim ```blade - + Refreshing ``` @endverbatim -### Conditional loading +### Override the tint @verbatim ```blade -@if($loading) - - - -@else - - {{-- Content --}} - -@endif + ``` @endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\ActivityIndicator; + +ActivityIndicator::make() + ->size('lg') + ->color('#7C3AED') + ->a11yLabel('Loading messages'); +``` + +- `make()` - Create a new indicator +- `size(string|int $size)` - `"sm" | "md" | "lg"`. Legacy: `1`=large, `2`=small +- `color(string $hex)` - Override the theme tint +- `a11yLabel(string $value)` - Accessibility label diff --git a/resources/views/docs/mobile/3/edge-components/badge.md b/resources/views/docs/mobile/3/edge-components/badge.md new file mode 100644 index 00000000..74da21f9 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/badge.md @@ -0,0 +1,90 @@ +--- +title: Badge +order: 360 +--- + +## Overview + +A small count or text marker, typically used as an overlay on nav items, list rows, or buttons. Renders as a capsule +pill. + +Per Model 3, colors come from the theme via the semantic `variant` prop — there are no per-instance overrides. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +- `count` - Numeric count. Renders as `"99+"` for values above 99 (optional, int) +- `label` - Arbitrary short text. Wins over `count` when both are set (optional, string) +- `variant` - Color variant (optional, string, default: `destructive`): + - `destructive` — `theme.destructive` / `theme.onDestructive` + - `primary` — `theme.primary` / `theme.onPrimary` + - `accent` — `theme.accent` / `theme.onAccent` +- `a11y-label` - Accessibility label (optional) + + + +## Examples + +### Count badge + +@verbatim +```blade + + + + +``` +@endverbatim + +### Label badge + +@verbatim +```blade + +``` +@endverbatim + +### Anchored to an icon + +Use a [``](stack) to layer the badge over its target: + +@verbatim +```blade + + + + + + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Badge; + +Badge::make() + ->count(3) + ->variant('primary'); + +Badge::make() + ->label('New') + ->variant('accent'); +``` + +- `make()` - Create a badge +- `count(int $count)` - Numeric count (capped display at `99+`) +- `label(string $text)` - Short text label (wins over `count`) +- `variant(string $variant)` - `destructive | primary | accent` +- `a11yLabel(string $value)` - Accessibility label diff --git a/resources/views/docs/mobile/3/edge-components/bottom-nav.md b/resources/views/docs/mobile/3/edge-components/bottom-nav.md index ff047141..978505b8 100644 --- a/resources/views/docs/mobile/3/edge-components/bottom-nav.md +++ b/resources/views/docs/mobile/3/edge-components/bottom-nav.md @@ -40,28 +40,84 @@ A bottom navigation bar with up to 5 items. Used for your app's primary navigati - `label-visibility` - `labeled`, `selected`, or `unlabeled` (optional, default: `labeled`) - `dark` - Force dark mode styling (optional) +- `active-color` - Color of the active tab's icon and label. Hex string (optional) +- `background-color` - Bar background color. Hex string. Wins over `dark`'s default (optional) +- `text-color` - Color of inactive tab icons and labels. Hex string. Active tabs use `active-color` (optional) + + ## Children A `` can contain up to 5 `` elements. +### Props + - `id` - Unique identifier (required) - `icon` - A named [icon](icons) (required) - `label` - Accessibility label (required) - `url` - A URL to navigate to in the web view (required) - `active` - Highlight this item as active (optional, default: `false`) -- `badge` - Badge text/number (optional) -- `news` - Show "new" indicator dot (optional, default: `false`) +- `badge` - Badge text/number, e.g. `"2"` — small red pill anchored top-right of the icon (optional) +- `news` - Show a small red dot anchored top-right of the icon. Mutually exclusive with `badge` (optional, default: `false`) ### `badge` example +
![](/img/docs/edge-bottom-nav-item-badge.png)
+ +## Builder API + +When a `` is supplied by a [layout](../the-basics/layouts), you build it fluently with the `TabBar` +and `Tab` builders rather than writing it in Blade. + +```php +use Native\Mobile\Edge\Layouts\Builders\Tab; +use Native\Mobile\Edge\Layouts\Builders\TabBar; + +TabBar::make() + ->dark() + ->activeColor('#0891b2') + ->labelVisibility('labeled') + ->backgroundColor('#0F172A') + ->textColor('#94A3B8') + ->add(Tab::link('Chats', '/syncup', icon: 'chat_bubble')->badge('2')) + ->add(Tab::link('Friends', '/syncup/friends', icon: 'person.3.fill')->news()) + ->add(Tab::link('Profile', '/syncup/profile', icon: 'person')->active()); +``` + +### `TabBar` methods + +- `make()` - Create a new builder +- `dark(bool $dark = true)` - Force dark mode styling +- `activeColor(string $color)` - Color of the active tab's icon and label +- `backgroundColor(string $color)` - Bar background color (overrides `dark()`'s default) +- `textColor(string $color)` - Color of inactive tab icons and labels +- `labelVisibility(string $mode)` - `"labeled"`, `"selected"`, or `"unlabeled"` +- `add(Tab $tab)` - Append a tab item + +### `Tab` methods + +- `link(string $label, string $url, ?string $icon = null)` - Build a tab. The id defaults to the label slugified +- `id(string $id)` - Override the auto-generated id +- `icon(string $icon)` - A named [icon](icons) +- `badge(string $badge, ?string $color = null)` - Show a numeric/text badge +- `news(bool $news = true)` - Show a red dot indicator +- `active(bool $active = true)` - Mark this tab as active diff --git a/resources/views/docs/mobile/3/edge-components/bottom-sheet.md b/resources/views/docs/mobile/3/edge-components/bottom-sheet.md index 63ef2ca3..a19f5996 100644 --- a/resources/views/docs/mobile/3/edge-components/bottom-sheet.md +++ b/resources/views/docs/mobile/3/edge-components/bottom-sheet.md @@ -5,8 +5,12 @@ order: 700 ## Overview -A modal bottom sheet that slides up from the bottom of the screen. Use it for contextual actions, forms, and detail -views that overlay the main content. Renders as a native bottom sheet on both iOS and Android. +A modal panel that slides up from the bottom of the screen. Use it for contextual actions, forms, and detail views +that overlay the main content. Renders as SwiftUI's `.sheet` with `presentationDetents` on iOS and a Material3 +`ModalBottomSheet` on Android. + +Per Model 3, the container color resolves from `theme.surface`. For a custom surface wrap content in a +``. @verbatim ```blade @@ -22,13 +26,18 @@ views that overlay the main content. Renders as a native bottom sheet on both iO ## Props -All [shared layout and style attributes](layout) are supported, plus: - - `visible` - Whether the sheet is shown (required, boolean) +- `detents` - Allowed sheet heights (optional, default: `"medium,large"`). Comma-separated combination of: + - `small` (25% of screen) + - `medium` + - `large` + - `full` (100% of screen) + - A numeric fraction `0.0`–`1.0` for a custom height (e.g. `"0.4"` for 40%) +- `a11y-label` - Accessibility label (optional) ## Events -- `@dismiss` - Livewire method called when the sheet is dismissed (e.g. by swiping down or tapping the scrim) +- `@dismiss` - Livewire method called when the sheet is dismissed (swipe down or tap outside) ## Children @@ -40,18 +49,18 @@ Accepts any EDGE elements as children. The children are rendered inside the shee @verbatim ```blade - + - + Edit - + Share @@ -71,42 +80,50 @@ Accepts any EDGE elements as children. The children are rendered inside the shee @verbatim ```blade - + Add Item - - + + - - + + ``` @endverbatim -### Toggling a sheet - -The sheet is controlled by a Livewire property. Set `visible` to `true` to show it, and handle the `@dismiss` event to -hide it when the user swipes it away. +### Custom height @verbatim ```blade -{{-- Trigger --}} - - -{{-- Sheet --}} - - - Sheet content - + + ``` @endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\BottomSheet; + +BottomSheet::make() + ->visible($showSheet) + ->detents('medium,large') + ->onDismiss('hideSheet'); +``` + +- `make()` - Create a bottom sheet +- `visible(bool $value = true)` - Toggle visibility +- `detents(string $detents)` - Allowed heights +- `a11yLabel(string $value)` - Accessibility label +- `onDismiss(string $method)` - Livewire method invoked on dismissal diff --git a/resources/views/docs/mobile/3/edge-components/button-group.md b/resources/views/docs/mobile/3/edge-components/button-group.md new file mode 100644 index 00000000..aeda8be2 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/button-group.md @@ -0,0 +1,83 @@ +--- +title: Button Group +order: 315 +--- + +## Overview + +A segmented single-choice selector. Each option is a pressable pill in a horizontal bar; the active one fills with +`theme.primary`. The group owns the selected-index state. + +Use this for short, mutually-exclusive choices that fit on one row. For more options or longer labels use a +[``](tab-row) or [``](select). + +@verbatim +```blade + +``` +@endverbatim + +## Props + +- `options` - Array of option labels (required, array of strings) +- `value` / `selected-index` - Currently selected index (optional, int, default: `0`) +- `disabled` - Disable the group (optional, boolean, default: `false`) +- `a11y-label` - Accessibility label (optional) + +## Events + +- `@change` - Livewire method called when the selection changes. Receives the new index as a parameter + +## Two-way Binding + +`native:model` binds the selected index to a Livewire integer property: + +@verbatim +```blade + +``` +@endverbatim + +## Examples + +### Period picker + +@verbatim +```blade + +``` +@endverbatim + +### With manual change handler + +@verbatim +```blade + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\ButtonGroup; + +ButtonGroup::make() + ->options(['Daily', 'Weekly', 'Monthly']) + ->selectedIndex(1) + ->onChange('setPeriod'); +``` + +- `make()` - Create a button group +- `options(array $options)` - Option labels +- `selectedIndex(int $index)` - Currently selected index +- `disabled(bool $value = true)` - Disable the group +- `a11yLabel(string $value)` - Accessibility label +- `syncMode(string $mode)` - `live | blur | debounce` (set by `native:model` modifiers) +- `onChange(string $method)` - Livewire method invoked on change diff --git a/resources/views/docs/mobile/3/edge-components/button.md b/resources/views/docs/mobile/3/edge-components/button.md index 90a0b8be..214fa090 100644 --- a/resources/views/docs/mobile/3/edge-components/button.md +++ b/resources/views/docs/mobile/3/edge-components/button.md @@ -5,79 +5,124 @@ order: 310 ## Overview -A tappable button element. The label can be set via the `label` attribute or as slot content between the tags. Buttons -support custom colors, font sizing, and disabled state. +A native button. Renders as a SwiftUI `Button` with `buttonStyle(...)` on iOS and a Material3 `Button` on Android. + +Visual styling follows Model 3 — colors, radius, shadow, and typography come from the theme. There are intentionally +**no per-instance** color, background, border, radius, shadow, font-size, or font-weight overrides. For full visual +control drop to a [``](pressable) wrapping your own content. @verbatim ```blade - + ``` @endverbatim ## Props -All [shared layout and style attributes](layout) are supported, plus: +The label can be passed as the `label` attribute or as slot content between the tags. If both are set, `label` wins. - `label` - Button text (optional if using slot content) -- `color` - Background color as hex string (optional) -- `label-color` - Text color as hex string (optional) -- `font-size` - Label text size (optional, float) +- `variant` - Semantic style: `primary` (default), `secondary`, `destructive`, `ghost` +- `size` - `sm`, `md` (default), `lg` +- `icon` - A leading [icon](icons) name (optional) +- `icon-trailing` - A trailing [icon](icons) name (optional) - `disabled` - Disable the button (optional, boolean, default: `false`) +- `loading` - Show a spinner in place of the leading icon and prevent presses (optional, boolean, default: `false`) +- `a11y-label` - Accessibility label override (optional) +- `a11y-hint` - Accessibility hint (optional) ## Events - `@press` - Livewire method to call when tapped -- `@longPress` - Livewire method to call on long press + + ## Examples -### Label as attribute +### Variants @verbatim ```blade - + + + + + + ``` @endverbatim -### Label as slot content +### Sizes @verbatim ```blade - - Save Changes - + + + + + ``` @endverbatim - - -### Button row +### With icons @verbatim ```blade - - - - + ``` @endverbatim -### Disabled button +### Loading state @verbatim ```blade - + ``` @endverbatim -### Long press +### Label as slot content @verbatim ```blade - + + Save Changes + ``` @endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Button; + +Button::make('Save') + ->variant('primary') + ->size('md') + ->icon('check') + ->iconTrailing('forward') + ->disabled(false) + ->loading(false) + ->onPress('save'); +``` + +- `make(string $label = '')` - Create a button with an optional label +- `variant(string $value)` - `primary | secondary | destructive | ghost` +- `size(string $value)` - `sm | md | lg` +- `icon(string $name)` - Leading icon +- `iconTrailing(string $name)` - Trailing icon +- `disabled(bool $value = true)` - Disable the button +- `loading(bool $value = true)` - Show a spinner and prevent presses +- `a11yLabel(string $value)` - Accessibility label override +- `a11yHint(string $value)` - Accessibility hint +- `onPress(string $method)` - Livewire method to invoke on tap diff --git a/resources/views/docs/mobile/3/edge-components/canvas.md b/resources/views/docs/mobile/3/edge-components/canvas.md new file mode 100644 index 00000000..19d1ae63 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/canvas.md @@ -0,0 +1,43 @@ +--- +title: Canvas +order: 605 +--- + +## Overview + +A drawing surface for [shape primitives](shapes). Behaves like a [``](column) for layout purposes — +children stack vertically by default. Use it as a semantic wrapper when grouping shapes. + +@verbatim +```blade + + + + +``` +@endverbatim + +## Props + +All [shared layout and style attributes](layout) are supported. There are no canvas-specific props. + +## Children + +Accepts any EDGE elements as children. Typically used with [shape primitives](shapes) (``, +``, ``). + +For overlay-style layering of shapes use a [``](stack) instead — `` arranges children +along the column main axis, which is rarely what you want for free-form drawing. + +## Element + +```php +use Native\Mobile\Edge\Elements\Canvas; +use Native\Mobile\Edge\Elements\Rect; + +Canvas::make( + Rect::make()->width(100)->height(100)->bg('#3B82F6'), +); +``` + +- `make(Element ...$children)` - Create a canvas with children diff --git a/resources/views/docs/mobile/3/edge-components/card.md b/resources/views/docs/mobile/3/edge-components/card.md new file mode 100644 index 00000000..60f32a61 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/card.md @@ -0,0 +1,103 @@ +--- +title: Card +order: 260 +--- + +## Overview + +A content surface with three semantic variants: + +- `filled` (default) — `theme.surfaceVariant` background, no stroke. Medium emphasis +- `outlined` — `theme.surface` + a `theme.outline` 1pt stroke. Low emphasis +- `elevated` — `theme.surface` + a soft drop shadow. High emphasis + +Per Model 3, all colors and the corner radius (`theme.radiusLg`) come from the theme. For custom visuals drop to a +styled `` or [``](pressable). + +@verbatim +```blade + + + Card Title + Card content goes here. + + +``` +@endverbatim + +## Props + +- `variant` - `filled` (default), `outlined`, or `elevated` +- `filled`, `outlined`, `elevated` - Boolean shortcuts for the corresponding variant +- `a11y-label` - Accessibility label (optional) +- `a11y-hint` - Accessibility hint (optional) + +## Events + +Cards honor the standard `@press` and `@longPress` directives — useful for tappable cards. + +## Children + +Accepts any EDGE elements as children. Typically wraps a `` so internal content has padding and gap +control. + +## Examples + +### Outlined card + +@verbatim +```blade + + + Settings + Manage your preferences + + +``` +@endverbatim + +### Tappable card + +@verbatim +```blade + + + {{ $item->title }} + {{ $item->excerpt }} + + +``` +@endverbatim + +### Card with image header + +@verbatim +```blade + + + + {{ $post->title }} + {{ $post->excerpt }} + + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Card; + +Card::make()->variant('elevated'); + +// Shortcuts: +Card::make()->filled(); +Card::make()->outlined(); +Card::make()->elevated(); +``` + +- `make()` - Create a card +- `variant(string $variant)` - `filled | outlined | elevated` +- `filled()`, `outlined()`, `elevated()` - Variant shortcuts +- `a11yLabel(string $value)` - Accessibility label +- `a11yHint(string $value)` - Accessibility hint diff --git a/resources/views/docs/mobile/3/edge-components/carousel.md b/resources/views/docs/mobile/3/edge-components/carousel.md new file mode 100644 index 00000000..32f820af --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/carousel.md @@ -0,0 +1,88 @@ +--- +title: Carousel +order: 270 +--- + +## Overview + +A horizontal paging carousel. Each child is sized to `item-width` and laid out in a horizontally-scrolling lazy +stack with `item-spacing` between items. + +@verbatim +```blade + + @foreach($posts as $post) + + {{ $post->title }} + {{ $post->excerpt }} + + @endforeach + +``` +@endverbatim + +## Props + +- `item-width` - Width of each child in dp (optional, float, default: `200`) +- `item-spacing` - Spacing between items in dp (optional, float, default: `8`) +- `variant` - Reserved for future variants (optional, string) + +## Children + +Accepts any EDGE elements as children. Each child is clipped to a 16dp rounded rectangle by the renderer, so +border-radius styling on the child itself is optional. + + + +## Examples + +### Featured cards + +@verbatim +```blade + + @foreach($features as $feature) + + {{ $feature->title }} + + {{ $feature->subtitle }} + + @endforeach + +``` +@endverbatim + +### Avatar strip + +@verbatim +```blade + + @foreach($contacts as $contact) + + + {{ $contact->name }} + + @endforeach + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Carousel; + +Carousel::make($child1, $child2, $child3) + ->itemWidth(280) + ->itemSpacing(12); +``` + +- `make(Element ...$children)` - Create a carousel with children +- `itemWidth(float $width)` - Width per item +- `itemSpacing(float $spacing)` - Spacing between items +- `variant(string $variant)` - Variant identifier (reserved) diff --git a/resources/views/docs/mobile/3/edge-components/checkbox.md b/resources/views/docs/mobile/3/edge-components/checkbox.md new file mode 100644 index 00000000..026e0620 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/checkbox.md @@ -0,0 +1,82 @@ +--- +title: Checkbox +order: 520 +--- + +## Overview + +A binary tick/untick control with an optional inline label. On iOS, renders as a tappable SF Symbol pair +(`checkmark.square.fill` / `square`) — SwiftUI has no native checkbox primitive. On Android, renders as a Material3 +`Checkbox`. + +Per Model 3, check/border/label colors come from the theme — no per-instance overrides. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +- `value` - Current checked state (optional, boolean, default: `false`) +- `label` - Inline label rendered to the right of the box (optional, string) +- `disabled` - Disable the checkbox (optional, boolean, default: `false`) +- `a11y-label` - Accessibility label (optional) +- `a11y-hint` - Accessibility hint (optional) + +## Events + +- `@change` - Livewire method called when toggled. Receives the new boolean value as a parameter + +## Two-way Binding + +Use `native:model` for automatic two-way binding with a Livewire boolean property. + +@verbatim +```blade + +``` +@endverbatim + +## Examples + +### Multiple options + +@verbatim +```blade + + + + + +``` +@endverbatim + +### Disabled + +@verbatim +```blade + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Checkbox; + +Checkbox::make() + ->value($agreed) + ->label('I agree to the terms') + ->onChange('setAgreed'); +``` + +- `make()` - Create a checkbox +- `value(bool $checked)` - Current state +- `label(string $label)` - Inline label +- `disabled(bool $value = true)` - Disable the checkbox +- `a11yLabel(string $value)` - Accessibility label +- `a11yHint(string $value)` - Accessibility hint +- `syncMode(string $mode)`, `debounceMs(int $ms)` - Set by `native:model` modifiers +- `onChange(string $method)` - Livewire method invoked on toggle diff --git a/resources/views/docs/mobile/3/edge-components/chip.md b/resources/views/docs/mobile/3/edge-components/chip.md new file mode 100644 index 00000000..d2e913e3 --- /dev/null +++ b/resources/views/docs/mobile/3/edge-components/chip.md @@ -0,0 +1,82 @@ +--- +title: Chip +order: 525 +--- + +## Overview + +A compact selectable tag with a boolean active state and an optional leading icon. Renders as a capsule. + +When selected, the chip fills with `theme.primary` and uses `theme.onPrimary` for content. When unselected, it uses +`theme.surfaceVariant` with a `theme.outline` 1pt stroke. Per Model 3 — no per-instance color overrides. + +@verbatim +```blade + +``` +@endverbatim + +## Props + +- `label` - Chip text (required, string). Can also be passed as the first argument to `make()` +- `selected` / `value` - Whether the chip is active (optional, boolean, default: `false`) +- `icon` - Leading [icon](icons) name (optional, string) +- `disabled` - Disable the chip (optional, boolean, default: `false`) +- `a11y-label` - Accessibility label (optional) +- `a11y-hint` - Accessibility hint (optional) + +## Events + +- `@change` - Livewire method called when toggled. Receives the new boolean value + +## Two-way Binding + +`native:model` binds the selected state to a Livewire boolean property: + +@verbatim +```blade + +``` +@endverbatim + +## Examples + +### Filter chip row + +@verbatim +```blade + + + + + +``` +@endverbatim + +### With icon + +@verbatim +```blade + +``` +@endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Chip; + +Chip::make('Verified') + ->icon('check') + ->selected($onlyVerified) + ->onChange('toggleVerified'); +``` + +- `make(string $label = '')` - Create a chip with an optional label +- `label(string $label)` - Set the chip text +- `selected(bool $selected = true)` - Active state +- `icon(string $icon)` - Leading icon +- `disabled(bool $value = true)` - Disable the chip +- `a11yLabel(string $value)`, `a11yHint(string $value)` - Accessibility +- `syncMode(string $mode)` - Set by `native:model` modifiers +- `onChange(string $method)` - Livewire method invoked on toggle diff --git a/resources/views/docs/mobile/3/edge-components/column.md b/resources/views/docs/mobile/3/edge-components/column.md index 969655e7..49b620d8 100644 --- a/resources/views/docs/mobile/3/edge-components/column.md +++ b/resources/views/docs/mobile/3/edge-components/column.md @@ -89,3 +89,18 @@ Accepts any EDGE elements as children. Children are arranged vertically from top ``` @endverbatim + +## Element + +```php +use Native\Mobile\Edge\Elements\Column; +use Native\Mobile\Edge\Elements\Text; + +Column::make( + Text::make('First'), + Text::make('Second'), +)->fill()->padding(16)->gap(12); +``` + +- `make(Element ...$children)` - Create a column with children. Layout / style fluent methods are inherited from + the base `Element` class — see [Layout & Styling](layout) diff --git a/resources/views/docs/mobile/3/edge-components/divider.md b/resources/views/docs/mobile/3/edge-components/divider.md index a3c78abf..e0d6d2f6 100644 --- a/resources/views/docs/mobile/3/edge-components/divider.md +++ b/resources/views/docs/mobile/3/edge-components/divider.md @@ -5,7 +5,8 @@ order: 340 ## Overview -A horizontal line separator used to visually divide sections of content. Renders as a thin native divider line. +A thin horizontal line separator. Renders as a 1pt rule. Color resolves from `border-color` if set, otherwise the +platform separator color. @verbatim ```blade @@ -13,11 +14,14 @@ A horizontal line separator used to visually divide sections of content. Renders ``` @endverbatim +`` is an alias of `` exposed for use inside [side +navigation](side-nav). + ## Props All [shared layout and style attributes](layout) are supported. The most useful for dividers: -- `bg` - Line color as hex string (optional, default: platform default separator color) +- `border-color` - Line color as hex string (optional, default: platform separator color) - `opacity` - Line opacity from 0.0 to 1.0 (optional) - `margin` - Spacing around the divider (optional) @@ -25,6 +29,8 @@ All [shared layout and style attributes](layout) are supported. The most useful `` is a self-closing element. It does not accept children. +The line is always 1pt high. To change thickness, use a styled `` instead. + ## Examples @@ -47,7 +53,7 @@ All [shared layout and style attributes](layout) are supported. The most useful @verbatim ```blade - + ``` @endverbatim @@ -67,3 +73,13 @@ All [shared layout and style attributes](layout) are supported. The most useful ``` @endverbatim + +## Element + +```php +use Native\Mobile\Edge\Elements\Divider; + +Divider::make()->borderColor('#E2E8F0'); +``` + +- `make()` - Create a divider diff --git a/resources/views/docs/mobile/3/edge-components/icon.md b/resources/views/docs/mobile/3/edge-components/icon.md index 69198640..a0767cbf 100644 --- a/resources/views/docs/mobile/3/edge-components/icon.md +++ b/resources/views/docs/mobile/3/edge-components/icon.md @@ -76,3 +76,15 @@ and platform-specific usage, see the [Icons](icons) reference page. /> ``` @endverbatim + +## Element + +```php +use Nativephp\NativeUi\Elements\Icon; + +Icon::make('home')->size(24)->color('#1E293B'); +``` + +- `make(string $name = '')` - Create an icon +- `size(float $size)` - Icon size in dp +- `color(string $hex)` - Icon color diff --git a/resources/views/docs/mobile/3/edge-components/image.md b/resources/views/docs/mobile/3/edge-components/image.md index 70c950fe..5b249974 100644 --- a/resources/views/docs/mobile/3/edge-components/image.md +++ b/resources/views/docs/mobile/3/edge-components/image.md @@ -5,8 +5,7 @@ order: 320 ## Overview -Displays an image from a URL. Supports multiple content fit modes and optional tinting. Images are loaded -asynchronously by the native platform. +Displays an image from a URL. Loaded asynchronously by the native platform — `AsyncImage` on iOS, Coil on Android. @verbatim ```blade @@ -20,14 +19,15 @@ All [shared layout and style attributes](layout) are supported, plus: - `src` - Image URL (required, string) - `fit` - Content fit mode (optional, int, default: `1`): - - `0` - None (original size) - - `1` - Fit (scale to fit within bounds, preserving aspect ratio) - - `2` - Crop (scale to fill bounds, cropping excess) - - `3` - Fill (stretch to fill bounds, may distort) + - `0` / `1` — fit (scale to fit within bounds, preserving aspect ratio) + - `2` / `3` — fill (scale to fill bounds, cropping excess) - `tint-color` - Apply a color tint as hex string (optional) @@ -82,3 +82,17 @@ All [shared layout and style attributes](layout) are supported, plus: ``` @endverbatim + +## Element + +```php +use Native\Mobile\Edge\Elements\Image; + +Image::make('https://example.com/photo.jpg') + ->fit(2) + ->tintColor('#7C3AED'); +``` + +- `make(string $src = '')` - Create an image with a source URL +- `fit(int $mode)` - `0`/`1` = fit, `2`/`3` = fill +- `tintColor(string $hex)` - Apply a color tint diff --git a/resources/views/docs/mobile/3/edge-components/introduction.md b/resources/views/docs/mobile/3/edge-components/introduction.md index 0770f9fc..ca7b9dcc 100644 --- a/resources/views/docs/mobile/3/edge-components/introduction.md +++ b/resources/views/docs/mobile/3/edge-components/introduction.md @@ -24,40 +24,59 @@ interactive forms and navigation chrome. ### Layout - **[Layout & Styling](layout)** - Shared sizing, spacing, flex, style, and event attributes available on all elements +- **[Screen](screen)** - Themed page-level container - **[Column](column)** - Vertical flex container - **[Row](row)** - Horizontal flex container - **[Scroll View](scroll-view)** - Scrollable container with virtualization - **[Stack](stack)** - Overlay container (ZStack) for layering elements - **[Spacer](spacer)** - Flexible space element - **[Pressable](pressable)** - Touch-sensitive container wrapper +- **[Card](card)** - Content surface with filled / outlined / elevated variants ### Content - **[Text](text)** - Text display with font sizing, weight, color, and alignment -- **[Button](button)** - Tappable button with label, colors, and disabled state - **[Image](image)** - Image display with fit modes and tinting - **[Icon](icon)** - Platform-native icons (SF Symbols on iOS, Material Icons on Android) - **[Divider](divider)** - Horizontal line separator - **[Activity Indicator](activity-indicator)** - Loading spinner +- **[Progress Bar](progress-bar)** - Linear progress indicator +- **[Badge](badge)** - Count or label pill marker ### Forms -- **[Text Input](text-input)** - Text input field with labels, validation, and keyboard types +- **[Button](button)** - Tappable button with variants, sizes, and disabled / loading state +- **[Button Group](button-group)** - Segmented single-choice selector +- **[Text Input](text-input)** - Outlined and filled text input variants - **[Toggle](toggle)** - On/off switch control +- **[Checkbox](checkbox)** - Tick/untick control with optional inline label +- **[Radio Group](radio-group)** - Single-choice radio selector +- **[Select](select)** - Dropdown picker +- **[Slider](slider)** - Continuous (or stepped) value selector +- **[Chip](chip)** - Compact selectable tag ### Navigation - **[Bottom Navigation](bottom-nav)** - The always-accessible bottom navigation bar - **[Top Bar](top-bar)** - A title bar with action buttons - **[Side Navigation](side-nav)** - A slide-out navigation drawer +- **[Tab Row](tab-row)** - Horizontal tab strip for in-screen sectioning -### Shapes +### Lists & data -- **[Shapes](shapes)** - Rect, circle, and line elements for drawing +- **[List](list)** - Virtualized list with pull-to-refresh, end-reached, and swipe actions +- **[List Item](list)** - Material3 row with leading + trailing slot system +- **[Carousel](carousel)** - Horizontal paging carousel ### Overlays - **[Bottom Sheet](bottom-sheet)** - Modal bottom sheet for contextual actions and forms +- **[Modal](modal)** - Full-screen modal overlay + +### Drawing + +- **[Canvas](canvas)** - Drawing surface for shape primitives +- **[Shapes](shapes)** - Rect, circle, and line elements ## How It Works diff --git a/resources/views/docs/mobile/3/edge-components/layout.md b/resources/views/docs/mobile/3/edge-components/layout.md index 523bd334..c9c358c9 100644 --- a/resources/views/docs/mobile/3/edge-components/layout.md +++ b/resources/views/docs/mobile/3/edge-components/layout.md @@ -110,6 +110,13 @@ properties control how children grow, shrink, and align. - `flex-shrink` - How much this element shrinks when space is limited (float) - `flex-basis` - Initial size before flex distribution (float or string) + + ## Alignment Alignment values are integers that map to standard flex alignment: @@ -147,6 +154,13 @@ Alignment values are integers that map to standard flex alignment: - `align-self` - Override parent's `align-items` for this element (int, 0-4) - `center` - Shorthand: sets both `align-items` and `justify-content` to center (boolean) + + ## Style Visual styling attributes that apply to any element. @@ -202,7 +216,12 @@ typically applied to your outermost column. ``` @endverbatim -- `safe-area` - Inset content to avoid system UI (boolean) +- `safe-area` - Inset content on both top and bottom edges (boolean) +- `safe-area-top` - Inset only the top edge (status bar / notch) +- `safe-area-bottom` - Inset only the bottom edge (home indicator) + +See [Safe Area](../the-basics/safe-area) for the full picture, including how the framework's [layout](../the-basics/layouts) +chrome already handles safe-area insets for you. ## Visibility @@ -271,7 +290,8 @@ the `class` attribute on any element. | Justify | `justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly` | | Self | `self-start`, `self-center`, `self-end`, `self-stretch` | | Flex | `flex-1`, `flex-grow`, `flex-grow-0`, `flex-shrink`, `flex-shrink-0` | -| Safe area | `safe-area` | +| Safe area | `safe-area`, `safe-area-top`, `safe-area-bottom` | +| Position | `absolute`, `relative`, `top-[N]`, `right-[N]`, `bottom-[N]`, `left-[N]` | | Text align | `text-left`, `text-center`, `text-right` |