App

App Props

Name Type Default Description

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

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>
    </>
  );
}

PreviousProvider Props NextAction Sheet

Last updated 3 months ago