1.0.4-beta.0 • Published 6 months ago
@mojito-inc/core-ui v1.0.4-beta.0
You can install this project with one of these commands:
npm install --save @mojito-inc/core-ui
yarn add @mojito-inc/core-ui
import { CoreUIThemeProvider } from "@mojitoinc/core-ui";
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#FDCC35",
},
secondary: {
main: "#356045",
},
background: {
default: "#000",
},
text: {
primary: "#000",
},
grey: {
100: "#868b93",
},
divider: "#fff",
},
});
<CoreUIThemeProvider theme={ theme }>
<Component {...pageProps} />
</CoreUIThemeProvider>
Accordion
import { Accordion } from "@mojitoinc/core-ui";
<Accordion
open=<open>
label=<label>
children=<children>
labelStyle=<labelStyle>
collapseIcon=<collapseIcon>
expandIcon=<expandIcon>
/>
Param | type | Required | Default | Description |
---|---|---|---|---|
open | boolean | false | ||
label | string | ✅ | ||
children | JSX.Element | ✅ | ||
labelStyle | SxProps | |||
collapseIcon | JSX.Element | RemoveIcon | ||
expandIcon | JSX.Element | AddIcon |
Breadcrumbs
import { Breadcrumbs, BreadcrumbItem } from "@mojitoinc/core-ui";
<Breadcrumbs
list=<BreadcrumbItem[]>
selectedValue=<selectedValue>
separator=<separator>
separatorStyle=<separatorStyle>
itemStyle=<itemStyle>
itemHighlightedStyle=<itemHighlightedStyle>
/>
Param | type | Required | Default | Description |
---|---|---|---|---|
list | object | ✅ | [] | BreadcrumbItem |
selectedValue | string | ✅ | ||
separator | JSX.Element | NavigateNextIcon | ||
separatorStyle | SxProps | { fontSize: 13 } | ||
itemStyle | SxProps | { fontWeight: 500, fontSize: '12px' } | ||
itemHighlightedStyle | SxProps | { fontWeight: 700, fontSize: '12px', color: '#000' } |
interface
BreadcrumbItem
Param | type | Required | Description |
---|---|---|---|
label | string | ✅ | |
value | string | ✅ |
TextInput
import { TextInput } from "@mojitoinc/core-ui";
<TextInput
placeholder=<placeholder>
value=<value>
InputPropsStyle=<InputPropsStyle>
sx=<sx>
error=<error>
type=<type>
disabled=<disabled>
autoFocus=<autoFocus>
onChange=<onChange>
/>
Param | type | Required | Default | Description |
---|---|---|---|---|
placeholder | string | |||
value | string | |||
InputPropsStyle | SxProps | |||
sx | SxProps | |||
error | string | |||
type | string | text | ||
disabled | boolean | false | ||
autoFocus | boolean | false | ||
inputRef | React.Ref | |||
onChange | event(event: React.ChangeEvent) |
BaseModal
import { BaseModal } from "@mojitoinc/core-ui";
<BaseModal
title=<title>
content=<content>
children<children>
titleStyle=<titleStyle>
contentStyle=<contentStyle>
/>
Param | type | Required | Default | Description |
---|---|---|---|---|
title | string | |||
content | string | |||
children | JSX.Element | |||
titleStyle | SxProps | |||
contentStyle | SxProps |
TabSwitcher
import { TabSwitcher, TabPanel } from "@mojitoinc/core-ui";
<TabSwitcher
value=<value>
children=<children>
/>
<TabPanel
id=<id>
children=<children>
/>
<TabSwitcher value='one'>
<>
<TabPanel id='one'>
<p>one</p>
</TabPanel>
<TabPanel id='two'>
<p>two</p>
</TabPanel>
</>
</TabSwitcher>
TabSwitcher
Param | type | Required | Default | Description |
---|---|---|---|---|
value | string | ✅ | ||
children | JSX.Element | ✅ |
TabPanel
Param | type | Required | Default | Description |
---|---|---|---|---|
id | string | ✅ | ||
children | JSX.Element | ✅ |
1.0.4-beta.0
6 months ago
1.0.2-beta.0
6 months ago
1.0.1
10 months ago
1.0.1-beta.1
10 months ago
1.0.1-beta.0
10 months ago
1.0.1-1
10 months ago
1.0.1-0
10 months ago
1.0.0
10 months ago