Carbon-Menus
Demo
Carbon-Menus is a simple fixed location animation wrapper.
A set of menus for React.
Features include:
- Fixed popup animation with user defined elements
- Flower style animation
Installation and usage
npm install carbon-menus
or
yarn add carbon-menus
; ... { return <BottomPopup open=thisstateopen gutter=40 items=thisitems />;}
Then use it in your app:
Create a CSS file to define your base elements or use something from Material-UI or something else all together.
CSS (Optional Styling for DIV elements)
index.css
App
Create a file in your project to define your JSX.Elements. The only relevant part here is the BottomPopup component which takes the JSX.Element array.
App.tsx
; ;; ; interface DemoProps nada?: boolean; interface DemoState open: boolean; interface Definitions color: string; icon: IconDefinition; const transparency = 07;const colors = `rgba(72, 175, 240, )` `rgba(61, 204, 145, )` `rgba(255, 179, 102, )` `rgba(255, 115, 115, )` `rgba(255, 110, 74, )` `rgba(255, 102, 161, )` `rgba(194, 116, 194, )` `rgba(173, 153, 255, )`; const definitons = <Definitions>;definitons;definitons;definitons;definitons;definitons; <DemoProps DemoState> private items: Array<JSXElement> = <JSXElement>; { superprops; thisstate = open: false ; for var item of definitons thisitems; documentbodystylebackgroundColor = 'black'; } private { this; } public : JSXElement console; return <div> <h1>Bottom Popup</h1> <button onClick= this>Toggle</button> <BottomPopup open=thisstateopen gutter=40 items=thisitems /> </div> ;
Props
Common props you may want to specify include:
BottomPopup Props
open
- opens the controlgutter
- spacing between the elementsitems
- list of JSX.ElementsanimationDuration
- (optional) duration of the ease animation
LeftDial Props
open
- opens the controlradius
- radius the elements will be placed around the left sideitems
- list of JSX.ElementsanimationDuration
- (optional) duration of the ease animation