App
App Props
Name
Type
Default
Description
component
string
'div'
Component's HTML Element
dark
boolean
false
Include dark: variants (if dark theme is in use)
safeAreas
boolean
true
Adds safe-areas class to the container. Should be enabled if app container is the full screen element to properly handle screen safe areas
theme
'ios' | 'material' | 'parent'
'material'
App theme. If set to 'parent' it will look for ios or md class on root <html> element, useful to use with parent framework like Framework7 or Ionic
touchRipple
boolean
true
Enables touch ripple effect in Material theme. Allows to globally disable touch ripple for all components
Examples
App component should be used as main wrapper for all UI components, and there should be only one App component at a time in the app
<template>
<!-- App component ideally should be the main root component -->
<i-app theme="ios" safe-areas>
<!-- rest of UI components -->
</i-app>
</template>
<script>
import { iApp } from 'ina-ui/vue';
export default {
components: {
iApp,
},
};
</script>import React from 'react';
import { App } from 'ina-ui/react';
export default function MyApp() {
return (
<>
{/* App component ideally should be the main root component */}
<App theme="ios" safeAreas>
{/* rest of UI components */}
</App>
</>
);
}Last updated