X-Brain React Components
xbrain-react-components
is a set of custom components that use material-ui v1 as a basis.
Installation
Using yarn:
yarn add xbrain-react-components react-
Using npm:
npm install --save xbrain-react-components react-
Available Components
- XButton - mui
- XExternalRedirect - Redirects to an external URL
- XTableHead - mui
- XTabs - mui
All
[mui]
components have the material-ui props. However, we added new properties that will be listed as a custom property.
XButton
Just a button.
Custom properties
loading={true|false}
(optional) - displays a loading or not, default is
false
.
gutter={all|top|right|bottom|left}
(optional) - adds extra space in chosen direction.
<XButton ="right" ="submit"> Cancel</XButton> <XButton ="left" ="submit"> Send</XButton>
XExternalRedirect
Redirects to an external URL.
Properties
uri={string}
(required) - URL you want to redirect
<XExternalRedirect ="https://google.com" />
XTableHead
Head for data table.
Properties
enterDelay=300
(optional) - Delay for tooltip.
titleToolTip={string}
(optional) - Name in tooltip.
actions={false|true}
(optional) - Add last column in table for actions.
actionsLabel={string}
(optional) - Name of the label for actions.
orderDirection={'asc'|'desc'}
(optional) - The sort order of the column.
orderBy={string}
(optional) - The current sort columns.
data={array}
(required) - Data list.
data.orderKey:{string}
- (optional) - The name of the columns to be sorted. If it is not present, the column will not be sorted.
data.name:{string}
- (optional) - Column name.
data.numeric:{true|false}
- (optional) - If true
, content will align to the right.
data.visible:{true|false}
- (optional) - If false
, not present content.
data.padding:{default'|'checkbox'|'dense'|'none'}
- (optional) - If present replace padding cell padding
Exemple
const columns = name: 'id' orderKey: 'id' numeric: true name: 'name' orderKey: 'name' visible: false ; const order = orderBy: 'id' orderDirection: 'asc'; const data = id: 1 name: 'Name 1' id: 2 name: 'Name 2' ; { console;}; <XTableHead = = = = = />;
XTabs
Tabs component.
Properties
tabs={array}
(required) - Array of tabs .
tabs.label:{string}
- (optional) - The name tab.
tabs.disabled={bool}
(optional) - Disabled tab.
tabs.component={false|true}
(required) - Component that will be rendered.
Exemple
const tabs = label: 'information' disabled: false component: <InformationScreen /> disableGutters: false label: 'Details' disabled: false component: <DetailsScreen /> disableGutters: true ; <XTabs = />;