geops-ui

This library provides the geOps Styleguide with a material-ui theme, custom material-ui components, a stylesheet, and images.

Documentation and examples at https://ui.geops.de/.

Visit 404.html for a static "Not found" page and modify the back link at the bottom respectively.

Getting Started

Install the geops-ui package:

yarn add @geops/geops-ui

Import e.g. the theme, header, footer, an image, and the stylesheet (available as scss and css) in your project:

import { geopsTheme, Header, Footer, GeopsLogoLargeSVG } from '@geops/geops-ui';

import '@geops/geops-ui/geops-ui.scss';
// Alternatively
import '@geops/geops-ui/geops-ui.css';

Run demonstration (examples)

Clone the project and run:

yarn install
yarn start

Notes

SVGs (e.g. in the Header and Footer) may not load properly depending on the webpack configuration. This can be fixed by adding a loader rule in webpackConfig using file-loader:

{
  webpackConfig: {
    module: {
      rules: [
        {
          test: /^((?!url).)*\.svg$/,
          include: [
            path.resolve(__dirname, 'node_modules', '@geops', 'geops-ui'), // Load geops-ui SVGs using file-loader
          ],
          use: [
            {
              loader: 'file-loader',
              options: {
                jsx: true,
              },
            },
          ],
        },
      ]
    }
  }
}

More

• Development
• Demonstration