Components | Gladio

Component library for gladio Design.

This package is composed of all other components and provides a compact way to use all other components from gladio. Other components can be imported with there names only. Following components are exported:

Button, Badge, BadgeList, ButtonGroup, ButtonToolbar, DateTime, DateTimePicker, DateTimeInput, Dialog, useDialog, Icons, Paginate, Input, InputGroup, InputGroupAddon, FormGroup, TextArea, SelectInput, ErrorMessage, Select, AsyncSelect, Table

Installation

npm install --save @gladio/ui

CSS

CSS is included in @gladio/ui/styles/index.css that includes styles of all other components.

@include @gladio/ui/styles/index;

Usage

import { Button } from "@gladio/ui"
function App () {
  return <Button branded>
    Save
  </Button>
}

Playground

Code Editor

// import { Button, Badge, Dialog, Input, FormGroup, Select } from "@gladio/ui"

function App () {
const [isDialogOpen, changeDialogVisibility] = useState(false)
return <form onSubmit={(e) => { e.preventDefault(); changeDialogVisibility(true)}}>
  <FormGroup>
    <label>Name</label>
    <Input type="text" placeholder="gladio Holidays" />
  </FormGroup>
  <FormGroup>
    <label>Select Email</label>
    <Select options={[{ id:1, name: "developer@gladio.com"}, {id: 2, name: "support@gladio.com" }]} />
  </FormGroup>
  <Dialog open={isDialogOpen} onClose={() => changeDialogVisibility(false)}>
    <Dialog.Body>
      Are you sure you want to continue ?
    </Dialog.Body>
    <Dialog.Footer>
    <Button danger primary>Continue</Button> <Button onClick={() => changeDialogVisibility(false)}>Cancel</Button>
    </Dialog.Footer>
  </Dialog>
  <Button type="submit">Save</Button>
</form>
}

// import { Button, Badge, Dialog, Input, FormGroup, Select } from "@gladio/ui"
function App () {
const [isDialogOpen, changeDialogVisibility] = useState(false)
return <form onSubmit={(e) => { e.preventDefault(); changeDialogVisibility(true)}}>
  <FormGroup>
    <label>Name</label>
    <Input type="text" placeholder="gladio Holidays" />
  </FormGroup>
  <FormGroup>
    <label>Select Email</label>
    <Select options={[{ id:1, name: "developer@gladio.com"}, {id: 2, name: "support@gladio.com" }]} />
  </FormGroup>
  <Dialog open={isDialogOpen} onClose={() => changeDialogVisibility(false)}>
    <Dialog.Body>
      Are you sure you want to continue ?
    </Dialog.Body>
    <Dialog.Footer>
    <Button danger primary>Continue</Button> <Button onClick={() => changeDialogVisibility(false)}>Cancel</Button>
    </Dialog.Footer>
  </Dialog>
  <Button type="submit">Save</Button>
</form>
}