# ion-tray

> A Web Component which enables you to have central content with a left and right tray which can 'push' into view

Latest version **1.0.0** (published 2014-08-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install ion-tray
pnpm add ion-tray
yarn add ion-tray
bun add ion-tray
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2014-08-25 |
| First published | 2014-08-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dominic Tobias |
| Maintainers | ferahl |
| Keywords | web-component, ion-tray |

## Links

- npm: https://www.npmjs.com/package/ion-tray
- Repository: git@github.com:DominicTobias/ion-tray
- Homepage: https://github.com/DominicTobias/ion-tray
- Issues: https://github.com/DominicTobias/ion-tray/issues
- npm.io page: https://npm.io/package/ion-tray

## Recent versions

- 1.0.0 (latest) — 2014-08-25

## README

# Ion Tray

A Web Component which enables you to have central content with a left and right tray which can 'push' into view.

## Usage

```html
<ion-tray class="my-tray">
	<section class="tray-left" data-width="260px">
		Left tray content
	</section>
	<section class="tray-center">
		Right tray content
	</section>
	<section class="tray-right" data-width="50%">
		Right tray content
	</section>
</ion-tray>
```
	
Elements do not have to be sections, the required part is the `tray-left`, `tray-center`, `tray-right`  class names.

`data-width` only applies to the left and right trays and will default to `100%` if you do not specify it.

## Opening trays

Ion components are stateless and interaction is achieved through events. The component listens for the following events on the `<ion-tray>` element:

**showLeftTray** Shows the left tray.

**showCenterTray** Shows the center tray.

**showRightTray** Shows the right tray.

For example:

```javascript
var ionTray = document.querySelector('.my-tray');
ionTray.dispatchEvent(new Event('showLeftTray'));
```

**Note that when you open a side tray the user can click anywhere in the center tray to bring it back into position.**

## Styling the trays

The styling of the content is up to you. To style the tray containers you need to use the `::shadow` pseudo-selector.

```css
.my-tray::shadow .tray-left {
	background-color: black;
	color: white;
}
.my-tray::shadow .tray-center {
	background-color: lightgrey;
}
.my-tray::shadow .tray-right {
	background-color: purple;
	color: white;
}
```
	
You can also apply styles based on a side tray being open:

```css
.my-tray::shadow .side-tray-visible .tray-center {
	background-color: red;
}
```

---
_Source: https://npm.io/package/ion-tray · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._