@bentley/ui-ninezone

iModel.js Nine-zone React UI components

Usage no npm install needed!

<script type="module">
  import bentleyUiNinezone from 'https://cdn.skypack.dev/@bentley/ui-ninezone';
</script>

README

@bentley/ui-ninezone

Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.

Description

The @bentley/ui-ninezone package contains React components for 9-Zone UI and other purposes.

Documentation

See the iTwin.js documentation for more information.

Usage

Installation

npm install @bentley/ui-ninezone

Basic Usage

import BackButton from "@bentley/ui-ninezone/lib/ui-ninezone/components/buttons/Back";

<BackButton />

Components

  • Buttons
    • App
    • Back
    • Button
    • Close
  • ...

Local Demo

cd imodeljs
rush install
rush build
cd ui/ninezone
npm start

Coding Guidelines

Look at the existing code and try to keep your code similar.

  • Every component class name should follow nz-path-to-component-componentName naming style.

  • Every inner class name should have nz- prefix.

  • Import the Sass classnames with: import "./YourComponent.scss";

  • Every component should accept className?: string and style?: React.CSSProperties props.

  • Components that accept one or a list of children should use the children?: React.ReactNode prop.

Advice

  • Use classnames function to create className strings for the elements.

  • Use const className inside render for the root element className value.