Skip to content

Commit ad015a8

Browse files
shanerbaner82claude
shanerbaner82
and
claude
committed
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) <noreply@anthropic.com>
1 parent 4727552 commit ad015a8

File tree

18 files changed

+1770
-6
lines changed

18 files changed

+1770
-6
lines changed

‎resources/views/docs/mobile/3/edge-components/activity-indicator.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: Activity Indicator
3+
order: 350
4+
---
5+
6+
## Overview
7+
8+
A native loading spinner. Use this to indicate background activity or loading states. Renders as a platform-native
9+
progress indicator (spinning wheel on iOS, circular indicator on Android).
10+
11+
@verbatim
12+
```blade
13+
<native:activity-indicator />
14+
```
15+
@endverbatim
16+
17+
## Props
18+
19+
All [shared layout and style attributes](layout) are supported, plus:
20+
21+
- `size` - Indicator size (optional, float): `0`=default, `1`=large, `2`=small
22+
- `color` - Spinner color as hex string (optional, default: platform default)
23+
24+
<aside>
25+
26+
`<native:activity-indicator />` is a self-closing element. It does not accept children.
27+
28+
</aside>
29+
30+
## Examples
31+
32+
### Centered loading screen
33+
34+
@verbatim
35+
```blade
36+
<native:column fill center>
37+
<native:activity-indicator :size="1" color="#7C3AED" />
38+
<native:text class="text-base text-slate-400 mt-4">Loading...</native:text>
39+
</native:column>
40+
```
41+
@endverbatim
42+
43+
### Inline loading
44+
45+
@verbatim
46+
```blade
47+
<native:row :gap="8" :align-items="1">
48+
<native:activity-indicator :size="2" />
49+
<native:text class="text-sm text-slate-500">Refreshing</native:text>
50+
</native:row>
51+
```
52+
@endverbatim
53+
54+
### Conditional loading
55+
56+
@verbatim
57+
```blade
58+
@if($loading)
59+
<native:column fill center>
60+
<native:activity-indicator color="#3B82F6" />
61+
</native:column>
62+
@else
63+
<native:column fill :padding="16">
64+
{{-- Content --}}
65+
</native:column>
66+
@endif
67+
```
68+
@endverbatim

‎resources/views/docs/mobile/3/edge-components/bottom-sheet.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
title: Bottom Sheet
3+
order: 700
4+
---
5+
6+
## Overview
7+
8+
A modal bottom sheet that slides up from the bottom of the screen. Use it for contextual actions, forms, and detail
9+
views that overlay the main content. Renders as a native bottom sheet on both iOS and Android.
10+
11+
@verbatim
12+
```blade
13+
<native:bottom-sheet :visible="$showSheet" @dismiss="hideSheet">
14+
<native:column class="w-full p-4 gap-3">
15+
<native:text class="text-xl font-bold">Sheet Title</native:text>
16+
<native:text class="text-base text-slate-500">Sheet content goes here.</native:text>
17+
<native:button label="Close" @press="hideSheet" />
18+
</native:column>
19+
</native:bottom-sheet>
20+
```
21+
@endverbatim
22+
23+
## Props
24+
25+
All [shared layout and style attributes](layout) are supported, plus:
26+
27+
- `visible` - Whether the sheet is shown (required, boolean)
28+
29+
## Events
30+
31+
- `@dismiss` - Livewire method called when the sheet is dismissed (e.g. by swiping down or tapping the scrim)
32+
33+
## Children
34+
35+
Accepts any EDGE elements as children. The children are rendered inside the sheet's content area.
36+
37+
## Examples
38+
39+
### Action sheet
40+
41+
@verbatim
42+
```blade
43+
<native:bottom-sheet :visible="$showActions" @dismiss="hideActions">
44+
<native:column class="w-full gap-0 pb-8">
45+
<native:pressable @press="editItem" class="w-full px-4 py-3">
46+
<native:row :gap="12" :align-items="1">
47+
<native:icon name="edit" :size="24" color="#1E293B" />
48+
<native:text class="text-base">Edit</native:text>
49+
</native:row>
50+
</native:pressable>
51+
<native:divider />
52+
<native:pressable @press="shareItem" class="w-full px-4 py-3">
53+
<native:row :gap="12" :align-items="1">
54+
<native:icon name="share" :size="24" color="#1E293B" />
55+
<native:text class="text-base">Share</native:text>
56+
</native:row>
57+
</native:pressable>
58+
<native:divider />
59+
<native:pressable @press="deleteItem" class="w-full px-4 py-3">
60+
<native:row :gap="12" :align-items="1">
61+
<native:icon name="delete" :size="24" color="#EF4444" />
62+
<native:text class="text-base" color="#EF4444">Delete</native:text>
63+
</native:row>
64+
</native:pressable>
65+
</native:column>
66+
</native:bottom-sheet>
67+
```
68+
@endverbatim
69+
70+
### Form in a sheet
71+
72+
@verbatim
73+
```blade
74+
<native:bottom-sheet :visible="$showForm" @dismiss="closeForm">
75+
<native:column class="w-full p-4 gap-4">
76+
<native:text class="text-xl font-bold">Add Item</native:text>
77+
<native:text-input label="Name" @model="itemName" />
78+
<native:text-input label="Description" @model="itemDescription" multiline :min-lines="3" />
79+
<native:row :gap="8" :justify-content="2">
80+
<native:button label="Cancel" @press="closeForm" />
81+
<native:button label="Save" @press="saveItem" color="#7C3AED" label-color="#FFFFFF" />
82+
</native:row>
83+
</native:column>
84+
</native:bottom-sheet>
85+
```
86+
@endverbatim
87+
88+
### Toggling a sheet
89+
90+
The sheet is controlled by a Livewire property. Set `visible` to `true` to show it, and handle the `@dismiss` event to
91+
hide it when the user swipes it away.
92+
93+
@verbatim
94+
```blade
95+
{{-- Trigger --}}
96+
<native:button label="Show Options" @press="showSheet" />
97+
98+
{{-- Sheet --}}
99+
<native:bottom-sheet :visible="$showSheet" @dismiss="hideSheet">
100+
<native:column class="w-full p-4">
101+
<native:text>Sheet content</native:text>
102+
</native:column>
103+
</native:bottom-sheet>
104+
```
105+
@endverbatim
106+
107+
<aside>
108+
109+
Always handle the `@dismiss` event to update your Livewire state. If you don't, the `visible` property will be out of
110+
sync with the actual sheet state after the user dismisses it by gesture.
111+
112+
</aside>

‎resources/views/docs/mobile/3/edge-components/button.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: Button
3+
order: 310
4+
---
5+
6+
## Overview
7+
8+
A tappable button element. The label can be set via the `label` attribute or as slot content between the tags. Buttons
9+
support custom colors, font sizing, and disabled state.
10+
11+
@verbatim
12+
```blade
13+
<native:button label="Get Started" @press="handleStart" color="#7C3AED" label-color="#FFFFFF" />
14+
```
15+
@endverbatim
16+
17+
## Props
18+
19+
All [shared layout and style attributes](layout) are supported, plus:
20+
21+
- `label` - Button text (optional if using slot content)
22+
- `color` - Background color as hex string (optional)
23+
- `label-color` - Text color as hex string (optional)
24+
- `font-size` - Label text size (optional, float)
25+
- `disabled` - Disable the button (optional, boolean, default: `false`)
26+
27+
## Events
28+
29+
- `@press` - Livewire method to call when tapped
30+
- `@longPress` - Livewire method to call on long press
31+
32+
## Examples
33+
34+
### Label as attribute
35+
36+
@verbatim
37+
```blade
38+
<native:button label="Save" @press="save" color="#22C55E" label-color="#FFFFFF" />
39+
```
40+
@endverbatim
41+
42+
### Label as slot content
43+
44+
@verbatim
45+
```blade
46+
<native:button @press="save" class="bg-violet-600 rounded-full text-white text-lg">
47+
Save Changes
48+
</native:button>
49+
```
50+
@endverbatim
51+
52+
<aside>
53+
54+
When both a `label` attribute and slot content are provided, the `label` attribute takes precedence.
55+
56+
</aside>
57+
58+
### Button row
59+
60+
@verbatim
61+
```blade
62+
<native:row :gap="8" :justify-content="1">
63+
<native:button label="Cancel" @press="cancel" color="#94A3B8" label-color="#FFFFFF" />
64+
<native:button label="Confirm" @press="confirm" color="#7C3AED" label-color="#FFFFFF" />
65+
</native:row>
66+
```
67+
@endverbatim
68+
69+
### Disabled button
70+
71+
@verbatim
72+
```blade
73+
<native:button label="Submit" disabled color="#CBD5E1" label-color="#94A3B8" />
74+
```
75+
@endverbatim
76+
77+
### Long press
78+
79+
@verbatim
80+
```blade
81+
<native:button label="Hold me" @press="tap" @longPress="longTap" color="#272d48" label-color="#FFFFFF" />
82+
```
83+
@endverbatim

‎resources/views/docs/mobile/3/edge-components/column.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Column
3+
order: 200
4+
---
5+
6+
## Overview
7+
8+
A vertical flex container that stacks its children from top to bottom. This is the most commonly used layout element
9+
and serves as the foundation for most screen layouts.
10+
11+
@verbatim
12+
```blade
13+
<native:column :padding="16" :gap="12" fill>
14+
<native:text>First item</native:text>
15+
<native:text>Second item</native:text>
16+
<native:text>Third item</native:text>
17+
</native:column>
18+
```
19+
@endverbatim
20+
21+
## Props
22+
23+
All [shared layout and style attributes](layout) are supported. The most commonly used with columns:
24+
25+
- `gap` - Vertical space between children in dp (optional, float)
26+
- `align-items` - Horizontal alignment of children: `0`=start, `1`=center, `2`=end, `3`=stretch (optional, default: `0`)
27+
- `justify-content` - Vertical distribution: `0`=start, `1`=center, `2`=end, `3`=space-between, `4`=space-around, `5`=space-evenly (optional, default: `0`)
28+
- `safe-area` - Respect device safe area insets (optional, boolean)
29+
- `padding` - Inner spacing, single value or array (optional)
30+
- `bg` - Background color as hex (optional)
31+
32+
## Children
33+
34+
Accepts any EDGE elements as children. Children are arranged vertically from top to bottom.
35+
36+
## Examples
37+
38+
### Full-screen layout with safe area
39+
40+
@verbatim
41+
```blade
42+
<native:column fill safe-area bg="#FFFFFF">
43+
<native:text class="text-2xl font-bold">My App</native:text>
44+
<native:spacer />
45+
<native:button label="Get Started" @press="start" />
46+
</native:column>
47+
```
48+
@endverbatim
49+
50+
### Centered content
51+
52+
@verbatim
53+
```blade
54+
<native:column fill center>
55+
<native:activity-indicator />
56+
<native:text>Loading...</native:text>
57+
</native:column>
58+
```
59+
@endverbatim
60+
61+
### Card-style layout
62+
63+
@verbatim
64+
```blade
65+
<native:column
66+
class="w-full p-4 rounded-2xl gap-3"
67+
bg="#FFFFFF"
68+
:border-width="1"
69+
border-color="#E2E8F0"
70+
>
71+
<native:text class="text-lg font-bold">Card Title</native:text>
72+
<native:text class="text-base text-slate-500">Card description goes here.</native:text>
73+
<native:row :gap="8" :justify-content="2">
74+
<native:button label="Cancel" @press="cancel" />
75+
<native:button label="Confirm" @press="confirm" color="#7C3AED" label-color="#FFFFFF" />
76+
</native:row>
77+
</native:column>
78+
```
79+
@endverbatim
80+
81+
### Space-between distribution
82+
83+
@verbatim
84+
```blade
85+
<native:column fill :justify-content="3" :padding="16">
86+
<native:text>Top</native:text>
87+
<native:text>Middle</native:text>
88+
<native:text>Bottom</native:text>
89+
</native:column>
90+
```
91+
@endverbatim

0 commit comments

Comments
 (0)