mirror of
https://github.com/getpaseo/paseo.git
synced 2026-11-06 16:34:36 +00:00
50 lines
3.2 KiB
Markdown
50 lines
3.2 KiB
Markdown
# Modal UI example
|
|
|
|
Install on a Paseo host with npm source installation support and npm available:
|
|
|
|
```sh
|
|
paseo plugin install npm:@getpaseo/plugin-example-modal-ui@0.1.1
|
|
```
|
|
|
|
In host **Settings → Plugins**, paste the same `npm:` identifier into **Plugin source**.
|
|
Enable plugins, then open **Modal examples** from the sidebar or a workspace tab.
|
|
Choose **Open Form**, type into **Paste here**, and watch the **Input:** text update.
|
|
The installed plugin ID is `modal-ui-example`. Host Settings shows the package identity and
|
|
installed version. With reviewed-update support, run `paseo plugin update modal-ui-example --check`
|
|
to check for a newer version, then `paseo plugin update modal-ui-example` to review and approve it.
|
|
An explicit install version selects the initial content; later updates still check the latest release.
|
|
|
|
The package ships the existing TypeScript entry and client sources. Paseo compiles them through
|
|
its directory plugin loader; no package build or preparation command is required. React,
|
|
React Native, and `@getpaseo/plugin` are peer contracts supplied by the host. npm is needed for
|
|
installation, not loading or reloading. You can also install this directory while developing.
|
|
See the [source reference](https://paseo.sh/docs/plugins/reference#plugin-sources)
|
|
for supported identifiers and preparation rules.
|
|
|
|
The examples demonstrate default and custom padding, a full-width body, author-owned ScrollView and
|
|
FlatList scrolling, horizontal tabs, and clipboard actions with a keyboard-aware input. See the
|
|
[host UI reference](https://paseo.sh/docs/plugins/reference#host-ui) for the API contract.
|
|
|
|
The browser regression installs this exact example in an isolated daemon:
|
|
|
|
```sh
|
|
cd packages/app
|
|
npx playwright test e2e/browser/plugin-modal-body.spec.ts --project=browser --workers=1
|
|
```
|
|
|
|
On Android, open each example and drag up on its content to expand the sheet, then scroll the list.
|
|
In FlatList, expand before using **Jump to last row**; row 100 should be visible. At the top of either
|
|
list, drag down on a row to dismiss the sheet. In Form,
|
|
press **Copy text**, long-press the input, and choose **Paste**. The input should contain
|
|
“Copied from Paseo”. With the system keyboard enabled, focusing the input should keep it visible.
|
|
|
|
Run the [native sheet regression](https://github.com/getpaseo/paseo/blob/main/packages/app/e2e/mobile/modal-sheet/README.md) to check body
|
|
dismissal, list scrolling and horizontal tabs together.
|
|
|
|
These captures show Android copy/paste and custom padding on browser and wide native layouts.
|
|
Android API 35 and Chromium were exercised; iOS and Electron were not tested.
|
|
|
|
| Android copy/paste | Browser custom padding | Wide Android custom padding |
|
|
| ---------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------- |
|
|
|  |  |  |
|