opc-menu-drawer is a customizable drawer web component which shows the menu's and user profile
npm install @one-platform/opc-menu-drawer!Version
!Build Status
Opc-menu-drawer is a webcomponent developed using Lit elements for Red Hat One Platform. It's a customizable drawer component that contains header, menu buttons, links.
Opc-menu-drawer is implemented under Red Hat design guidelines. Therefore the component uses Red Hat official font. This can be easily imported with google cdn at the top of HTML document.
``html`
rel="stylesheet"
/>
rel="stylesheet"
/>
Opc-menu-drawer contains mainly two component. A backdrop and a drawer component expanded from rightside of the screen. The drawer can be controlled using isOpen attribute. Backdrop color can be controlled by --opc-menu-drawer__backdrop-color css variable.
opc-menu-drawer with menu
The menu is the bottom element seen on the drawer body. It contains a collapsable box with a title from the attribute menuTitle and an optional slot avatar to provide an avatar of the user. The header also accepts buttons through the slot menu that provide primary actions of the drawer, which is revealed by expanding the header title. The header container could be replaced with the slot header.
`html`
AM
`js`
document.querySelector('opc-menu-drawer').open();
opc-menu-drawer with links
The drawer component accepts links grouped into categories for users to navigate easily. Links can be set via the links attribute. When the links are more than 5 for a group, the rest of them will be hidden in a collapsable box. It can be revealed by clicking on the show more button for that category.
The default slot gets passed to the drawer body. It will be shown after the links section if links are provided.
`html`
AM
Main Body
`js
const links = [
{
title: 'BUILT-IN SERVICES',
links: [
{ name: 'Blog', href: '#' },
{ name: 'Documentation', href: '#', isDisabled: true },
{ name: 'Something #1', href: '#' },
{ name: 'Something #2', href: '#' },
{ name: 'Something #3', href: '#' },
{ name: 'Something #4', href: '#' },
{ name: 'Something #5', href: '#' },
{ name: 'Something #6', href: '#' },
],
},
{
title: 'BUILT-IN SERVICES',
links: [
{ name: 'blog', href: '#' },
{ name: 'Documentation', href: '#' },
],
},
];
document.querySelector('opc-menu-drawer').links = links;
document.querySelector('opc-menu-drawer').open();
`
opc-menu-drawer with footer
The footer component will be at the bottom of the drawer body. It can be added using the slot footer. When the contents of the drawer cause overflow, the footer will be at the bottom.
`html`
AM
2021 Red Hat
`js`
document.querySelector('opc-menu-drawer').open();
There are total 5 slots available in this component
- Default slot: Default slot will be component inside body of the drawer componenent.
- header: Container component that contains the header component.
- header-body: Body component for the header. Eg: Filter chips can be placed here
- avatar: The avatar component on drawer header.
- menu: The menu button on expanding drawer header.
- footer: Footer component of the drawer body.
- links
- Type:
- Default value: [ ]
`js`
document.querySelector("opc-menu-drawer").links = {
title: "BUILT-IN SERVICES",
links: [
{ name: "Blog#2", href: "#", isDisabled: true },
{ name: "Documentation#1", href: "#" },
],
},;
- title
- Type:
- Default value:
`html`
- menuTitle
- Type:
- Default value:
`html`
- isOpen
- Type:
- Default value:
`js`
document.querySelector('opc-menu-drawer').isOpen;
- open
- Description: To open the drawer.
`js`
document.querySelector('opc-menu-drawer').open();
- close
- Description: To close the drawer.
`js`
document.querySelector('opc-menu-drawer').close();
- toggle
- Description: To toggle the drawer states.
`js`
document.querySelector('opc-menu-drawer').toggle();
There are two events emitted by opc-menu-drawer emitter when drawer state changes.
1. opc-menu-drawer:open
Dispatched when drawer opens.
Example:
`js`
document
.querySelector('opc-menu-drawer')
.addEventListener('opc-menu-drawer:open', function (event) {
alert('drawer opened');
});
1. opc-menu-drawer:close
Dispatched when drawer closed.
Example:
`js`
document
.querySelector('opc-menu-drawer')
.addEventListener('opc-menu-drawer:close', function (event) {
alert('drawer closed');
});
| CSS Variable name | Value |
| ------------------------------------------- | ----------------- |
| --opc-menu-drawer__backdrop-color | #00000060 |--opc-menu-drawer__btn-hover-color
| | #efefef |--opc-menu-drawer__z-index
| | 9 | --opc-menu-drawer__width
| | 360px |--opc-menu-drawer__top
| | 0px |--opc-menu-drawer__right
| | #000 |--opc-menu-drawer__menu-padding
| | 8px 21px |--opc-menu-drawer__link-group-title-color
| | #6a6e73 |--opc-menu-drawer__transition--default
| | 120ms ease-in-out |
`sh`
npm install
`sh`
npm install --save @one-platform/opc-menu-drawer
- Import component
`js`
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
- Add component in html
`html`
- In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component
`js
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
`
- Add component in any component html template
`html`
- Import the component in App.js
`js`
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
- Add component in any component html render
`html`
- Run development server
`sh`
npm run dev opc-menu-drawer
`sh`
npm run build opc-menu-drawer
`sh``
npm run test
š¤ akhilmhdh