React Starter Template Generator - Appwork v1.6.0 Docs

Material ripple

Splash screen

RTL support

RTL mode

Theme settings panel

Light style

Material style

Dark style

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

<!DOCTYPE html>

<html lang="en"{% if rtlMode %} dir="rtl"{% endif %} class="{{style}}-style{% if pageLayout != 'blank' and layoutPosition %} layout-{{layoutPosition}}{% endif %}{% if reversedLayout %} layout-reversed{% endif %}{% if collapsedSidenav %} layout-collapsed{% endif %}{% if fixedNavbar %} layout-navbar-fixed{% endif %}{% if fixedFooter %} layout-footer-fixed{% endif %}">
<head>
  <title>React Starter</title>

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet" />

<link rel="stylesheet" href="%PUBLIC_URL%/vendor/fonts/ionicons.css" />

{% if settingsPanel -%}
  
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-bootstrap-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-appwork-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-theme-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-colors-css" />
  <link rel="stylesheet" href="%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/uikit.css" />
  {% endif %}

{% if materialRipple %}
  
  <script src="%PUBLIC_URL%/vendor/js/material-ripple.js"></script>
  {% endif %}
  {%- if materialRipple and not settingsPanel -%}
  <script>window.attachMaterialRippleOnLoad();</script>
  {% endif %}

<script src="%PUBLIC_URL%/vendor/js/layout-helpers.js"></script>

{% if settingsPanel %}
  
  <script src="%PUBLIC_URL%/vendor/js/theme-settings.js"></script>
  <script>
    // Use settings panel generator to configure the plugin
    window.themeSettings = new ThemeSettings({
      cssPath: '%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/',
      themesPath: '%PUBLIC_URL%/vendor/css{% if rtlSupport %}/rtl{% endif %}/'
      {%- if styles.length < 3 %},
      styles: ['{{ styles.join("', '")|safe }}']
      {%- endif %}
    });
  </script>
  {% endif %}
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

{% if splashScreen %}
  
  <div class="app-splash-screen" style="background: #fff; position: fixed; z-index: 99999999; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s;">
    <div class="app-splash-screen-content" style="position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
      <span class="text-large font-weight-bolder">CompanyName</span>
    </div>
  </div>
  
  {% endif %}

import React, { Component } from 'react'
import Router from './shared/Router'

{%- if settingsPanel %}
import { connect } from 'react-redux'
import { updateThemeSettings } from './store/actions/themeActions'
import themeSettings from './vendor/libs/theme-settings'
{%- endif %}

{% if not settingsPanel -%}
import './vendor/styles{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss'
import './vendor/styles{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss'
import './vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss'
import './vendor/styles{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss'
import './vendor/styles{% if rtlSupport %}/rtl{% endif %}/uikit.scss'
{%- endif %}
import './App.scss'

class App extends Component {
  {%- if settingsPanel %}
  constructor(props) {
    super(props)

// Update store on theme settings change
    themeSettings._themeSettings.settings.onSettingsChange = () =>
      this.props.updateThemeSettings()
  }
{%- endif %}
  render() {
    return <Router />
  }
}
{% if settingsPanel %}
export default connect(null, { updateThemeSettings })(App)
{% else %}
export default App
{% endif %}

$enable-rtl-support: {% if rtlSupport %}true{% else %}false{% endif %};
$enable-light-style: {% if (not settingsPanel and style == 'light') or (settingsPanel and styles.indexOf('light') !== -1) %}true{% else %}false{% endif %};
$enable-material-style: {% if (not settingsPanel and style == 'material') or (settingsPanel and styles.indexOf('material') !== -1) %}true{% else %}false{% endif %};
$enable-dark-style: {% if (not settingsPanel and style == 'dark') or (settingsPanel and styles.indexOf('dark') !== -1) %}true{% else %}false{% endif %};

@mixin feature-ltr($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      html:not([dir=rtl]) & { @content; }
    } @else {
      html:not([dir=rtl]) { @content; }
    }
  } @else {
    @content;
  }
}

@mixin feature-ltr-style() {
  @if $enable-rtl-support {
    &:not([dir=rtl]) { @content; }
  } @else {
    @content;
  }
}

@mixin feature-rtl($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      [dir=rtl] & { @content; }
    } @else {
      [dir=rtl] { @content; }
    }
  }
}

@mixin feature-rtl-style() {
  @if $enable-rtl-support {
    &[dir=rtl] { @content; }
  }
}