Aix-ui-library NPM

AI X-Lab Shared UI Library

React component library + Other shared UI resources for AI X Lab

Getting Started

To get started, simply install ensure the node package and relevant package dependencies are installed.

Prerequisites

Let's start by making sure the required dependencies are installed.

Here are the packages you would need:

Installing

First, install the aix-ui-library node package:

npm install aix-ui-library

Next, in your top level jsx file (usually index.jsx), include the required stylesheets:

import 'aix-ui-library/src/style/style.css'

import {SiteButton} from 'aix-ui-library';

This line will include SiteButton into the relevant jsx file.

Elements

SiteButton

The SiteButton component is an inline-block display button with the ability to hyperlink or trigger a callback function when clicked.

Name	Type	Default	Description
buttonLink	String	#	hyperlink for the button
onClick	function	null	callback function to customize button behavior
className	CSS class	null	button css class style
newTab	Boolean	false	whether to open the hyperlink in a new tab or not

SiteNavItem

The navigation item component with the ability to hyperlink or trigger a callback function when clicked.

Name	Type	Default	Description
itemLink	String	#	hyperlink for the nav item
onClick	function	null	callback function to customize item behavior
className	CSS class	null	item css class style
newTab	Boolean	false	whether to open the hyperlink in a new tab or not

SiteFooterItem

The footer item component with the ability to hyperlink or trigger a callback function when clicked.

Name	Type	Default	Description
itemLink	String	#	hyperlink for the nav item
onClick	function	null	callback function to customize item behavior
className	CSS class	null	item css class style
newTab	Boolean	false	whether to open the hyperlink in a new tab or not

Components

SiteNavbar

SiteNavbar accepts SiteNavItems to append navigation links/buttons. Call SiteNavbar as below:

 <SiteNavbar>
	 <SiteNavItem onClick={callback}>Share</SiteNavItem>
     <SiteNavItem itemLink="#######">About</SiteNavItem>
 </SiteNavbar>

Name	Type	Default	Description
containerClass	CSSClass	null	css class style for the navbar

SiteFooter

SiteFooter accepts SiteFooterItems to append footer links. Call SiteFooter as below:

 <SiteFooter>
	 <SiteFooterItem onClick={callback}>Terms of Use</SiteFooterItem>
     <SiteFooterItem itemLink="#######">License</SiteFooterItem>
 </SiteFooter>