@@ -22,9 +22,114 @@ Please visit this [Repo](https://github.com/samAbeywickrama/roc-examples) for ex
2222
2323## API
2424
25- | Prop | Type | Default | Required | Description |
26- | ------------ | -------- | ------- | -------- | ----------------------------------- |
27- | wrapperClass | ` String ` | none | no | className name for wrapper element. |
25+ ### ReactOffcanvasComponent
26+
27+ | Prop | Type | Default | Required | Description |
28+ | ---------------- | --------- | ------------------------------ | -------- | ----------------------------------------------------------------------------- |
29+ | open | ` Boolean ` | ` false ` | yes | Setting values as ` true ` will Reveal Sidebar and ` false ` will Hide Sidebar |
30+ | className | ` String ` | no | no | Override the styles applied to the component with css |
31+ | style | ` Object ` | no | no | Override the styles applied to the component with inline styles |
32+ | openAnimation | ` Object ` | [ See Default Animations] ( #roc ) | no | Override the default open animation |
33+ | closeAnimation | ` Object ` | [ See Default Animations] ( #roc ) | no | Override the default close animation |
34+ | overlay | ` Boolean ` | false | no | Show / Hide background overlay |
35+ | overlayClassName | ` String ` | no | no | Override the default styles applied to the Overlay component with css classes |
36+
37+ ### AnimatedPanel
38+
39+ | Prop | Type | Default | Required | Description |
40+ | -------------- | -------- | ----------------------------- | -------- | --------------------------------------------------------------- |
41+ | className | ` String ` | no | no | Override the styles applied to the component with css |
42+ | style | ` Object ` | no | no | Override the styles applied to the component with inline styles |
43+ | openAnimation | ` Object ` | [ See Default Animations] ( #ap ) | no | Override the default open animation |
44+ | closeAnimation | ` Object ` | [ See Default Animations] ( #ap ) | no | Override the default close animation |
45+
46+ ### CloseButton
47+
48+ | Prop | Type | Default | Required | Description |
49+ | ------- | ---------- | ------- | -------- | --------------------------------------------------------------- |
50+ | onClick | ` Function ` | no | no | ` function(event: object) => void ` |
51+ | style | ` Object ` | no | no | Override the styles applied to the component with inline styles |
52+
53+ ### DropdownMenu
54+
55+ | Prop | Type | Default | Required | Description |
56+ | --------- | -------- | ------- | -------- | --------------------------------------------------------------- |
57+ | style | ` Object ` | no | no | Override the styles applied to the component with inline styles |
58+ | className | ` String ` | no | no | Override the styles applied to the component with css |
59+
60+ ### DropdownMenu
61+
62+ | Prop | Type | Default | Required | Description |
63+ | --------- | -------- | ------- | -------- | ----------------------------------------------------- |
64+ | className | ` String ` | no | no | Override the styles applied to the component with css |
65+
66+ ### MenuItem
67+
68+ | Prop | Type | Default | Required | Description |
69+ | --------------------- | ---------- | ------- | -------- | ----------------------------------------------------------------- |
70+ | style | ` Object ` | no | no | Override the styles applied to the component with inline styles |
71+ | className | ` String ` | no | no | Override the styles applied to the component with css |
72+ | onClick | ` Function ` | no | no | ` function(event: object) => void ` |
73+ | dropdownIconClassName | ` String ` | no | no | Override the styles applied to the dropdown menu icon with css |
74+ | hasDropdown | ` Boolean ` | no | no | If the MenuItem contains a dropdown menu set this value to ` true ` |
75+
76+ ### Default Animations
77+
78+ #### [ ReactOffcanvasComponent] ( #roc )
79+
80+ ** Open**
81+
82+ ``` js
83+ {
84+ x: " -100px" ,
85+ transition: {
86+ ease: [0.175 , 0.885 , 0.32 , 1.275 ],
87+ duration: 300
88+ },
89+ delayChildren: 150 ,
90+ staggerChildren: 100
91+ }
92+ ```
93+
94+ ** Close**
95+
96+ ``` js
97+ {
98+ x: " -100%" ,
99+ transition: {
100+ duration: 100
101+ },
102+ afterChildren: true
103+ }
104+ ```
105+
106+ #### [ AnimatedPanel] ( #ap )
107+
108+ ** Open**
109+
110+ ``` js
111+ {
112+ x: " 0%" ,
113+ transition: {
114+ ease: [0.175 , 0.885 , 0.32 , 1.275 ],
115+ duration: 300
116+ },
117+ delayChildren: 300 ,
118+ staggerChildren: 100
119+ }
120+ ```
121+
122+ ** Close**
123+
124+ ``` js
125+ {
126+ x: " -100%" ,
127+ transition: {
128+ duration: 100
129+ },
130+ afterChildren: true
131+ }
132+ ```
28133
29134#### Todo:
30135
0 commit comments