This is gordo-ui, the material desing with Tailwind
Check it Out
- Install
npm i gordo-ui
- You need to import the CSS styles. You can do this in your main JavaScript file using:
import '/node_modules/gordo-ui/dist/style.css';
or in your main CSS file using:
@import '/node_modules/gordo-ui/dist/style.css';
- Pull any gordo-ui component into your component: Example:
import { Button } from 'gordo-ui';
- Make something awesome!
Exports:
Alert
AlertTitle
Button
IconButton
ClickAway
Collapse
Icons
FormControl
FormHelper
Input
InputLabel
Menu
MenuItem
MenuList
Option
Paper
Popover
SnackBar
Table
TableBody
TableFooter
TableContainer
TableCell
TableHead
TextField
Tooltip
<Alert className="bg-slate-200">Content</Alert>
Props of the Paper
component are also available.
<Alert>
<AlertTitle>Title</AlertTitle>
Content
</Alert>
Props of the DivElement
are also available.
<Button onClick={clickHandler}>Content</Button>
Props of the ButtonComponent
and AnchorElement
are also available.
- color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success' | 'inherit'. Default:'primary'
- If you use href the component will be an
AnchorElement
<IconButton size="small">
<SuccessIcon />
</IconButton>
Props of the ButtonComponent
and AnchorElement
are also available.
- If you use href the component will be an
AnchorElement
<ClickAway onClickAway={clickAwayHandler}>
<TextField label="Select a film" select>
{options.map((option) => (
<Option value={option}>{option}</Option>
))}
</TextField>
</ClickAway>
<Button onClick={changeOpenFunc}>
<Collapse collapsedSize='0px' timeout=0 open={open}>
<div>
<p>gola</p>
<p>gola</p>
</div>
</Collapse>
</Button>
Props of the DivElement
are also available.
<FormControl onSubmit={submitHandler} color="error">
<InputLabel>Email</InputLabel>
<Input name="email" /> <button type="submit">button</button>
</FormControl>
Props of the FormElement
are also available.
- hiddenLabel?: boolean
<FormControl onSubmit={submitHandler} color="error">
<InputLabel>Email</InputLabel>
<Input name="email" /> <button type="submit">button</button>
<FormHelper>Helper text</FormHelper>
</FormControl>
Props of the ParagraphElement
are also available.
<Input autoFocus color="secondary" />
Props of the InputElement
component are also available.
Props of the LabelElement
component are also available.
<Menu open={open} onClose={onCloseHandler} anchorEl={anchorEl}>
<MenuItem divider onClick={onCloseHandler}>
opcion 1
</MenuItem>
<MenuItem onClick={onCloseHandler}>opcion 2</MenuItem>
<MenuItem onClick={onCloseHandler}>opcion 3</MenuItem>
</Menu>
You can wrap some MenuItem
with a MenuList
if you don´t want a Popover
Props of the Popover
component are also available.
Props of the LiElement
component are also available.
Props of the UlElement
component are also available.
<Paper elevation=11 >Content</Paper>
Props of the DivElement
component are also available.
<Button onClick={handleClick}>click aqui</Button>
<Popover
onClose={() => setOpen(false)}
anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
transformOrigin={{ vertical: 'center', horizontal: 'right' }}
anchorReference='anchorEl'
anchorEl={anchorEl}
open={open}
>
<p>
The content of the Popover.
</p>
</Popover>
Props of the DivElement
component are also available.
- anchorOrigin?: {horizontal?: 'center' | 'left' | 'right', vertical?: 'bottom' | 'center' | 'top'}. Default: vertical: 'top', horizontal: 'left'
- transformOrigin?: {horizontal?: 'center' | 'left' | 'right', vertical?: 'bottom' | 'center' | 'top'}. Default: vertical: 'top', horizontal: 'left'
<Button onClick={() => setOpen(!open)}>Hazme click</Button>
<SnackBar open={open} onClose={handleClose} />
Props of the DivElement
component are also available.
- anchorOrigin?: {horizontal: 'center' | 'left' | 'right', vertical: 'bottom' | 'top'}. Default: vertical: 'bottom', horizontal: 'left'
- transition?: 'fade' | 'grown' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight'. Default: 'grown'
You can use Table
, TableBody
, TableCell
, TableContainer
, TableFooter
, TableHead
, TablePagination
, TableRow
and TableSortLabel
<TableContainer component={Paper}>
<Table aria-label="custom pagination table">
<TableHead>
<TableCell>
Name
</TableCell>
<TableCell>
Calories
</TableCell>
<TableCell>
FAat
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row, index) => (
<TableRow key={index} id={`${index}`}>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.calories}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.fat}
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
Props of the TableElement
component are also available.
Props of the TableSectionElement
component are also available.
Props of the TableCellElement
component are also available.
Props of the DivElement
component are also available.
Props of the TableSectionElement
component are also available.
Props of the TableSectionElement
component are also available.
Props of the TableCellElement
component are also available.
Props of the TableRowElement
component are also available.
Props of the SpanElement
component are also available.
<TextField label="Text here" variant={filled} />
Props of the InputElement
component are also available.
- hiddenLabel?: boolean | undefined
<Tooltip title="Tooltip content">
<div>
<p>Hi</p>
</div>
</Tooltip>
Props of the PopoverElement
component are also available.
- placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'
{options.map((option, index) => (
<Option
onClick={() => handleOptionClick(option.value)}
value={option.value}
key={index}
>
{option.value}
</Option>
Props of the DivElement
component are also available.