AppBase
The AppBase component ist the starting point for all interkit apps and needs to be the outermost component you add to any project.
If you are creating a multilanguage project, see the internationalisation guide for setting the languages parameter.
AppBaseAdvanced
AppBaseAdvanced provides additional options to AppBase.
desktopFallback slot
If you intend your Interkit app to be used exclusively on mobile devices, you can force desktop devices to show this fallback view.
Desktop devices means “large viewports” here.
We use a media query to identify them on page load;
you can override the default min-width: 600px using the desktopFallbackMinWidth prop.
The slot takes anything, but we have a special component called DesktopFallback
DesktopFallback component
A splash page with rich content, arranged in a grid intended for wider viewports.
- Title + intro text
- QR code with a link to the web app — not auto-generated, you have to provide it yourself
- A “go fullscreen” button — basically deactivates/circumvents the large viewport detection and takes you to the web app’s default view/slot
- Multi purpose buttons — e.g. links to contact, legal info, privacy policy
- A preview of the web app, fully functional — an iframe styled with a “device bezel” border
Developer docs
AppBase
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| languages* |
Slots
| Name | Default | Props | Fallback |
|---|---|---|---|
| Yes |
AppBaseAdvanced
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| projectIdOverride* | |||
| enableWebPush* | |||
| languages* |
Slots
| Name | Default | Props | Fallback |
|---|---|---|---|
| Yes | |||
| desktopFallback | No | ||
| networkHint | No | ||
| viewport | No |
DesktopFallback
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| qrHint* | |||
| fullscreenHint* | |||
| fullscreenButtonText* | |||
| qrImageSrc* | |||
| text* | |||
| title* | |||
| iframeWidth | string |
'340px' |
|
| iframeHeight | string |
'720px' |
Slots
| Name | Default | Props | Fallback |
|---|---|---|---|
| buttons | No | ||
| content | No | <h1 class="text-headline DesktopFallback__TextHeadline">{$showDummyData ? 'dummy title' : title}</h1> <p class="text-text DesktopFallback__Text">{$showDummyData ? dummyLorem1Paragraph : text}</p> |