@npm.tangocode/tc_ui_components
Version:
[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #
123 lines (93 loc) • 3.88 kB
Markdown
A collapsable side bar menu
The SideBar will have 2 components that it will be made up of.
1. __onClick__ ((item: string) => void): This allows a function to passed whenever the sidebar has been interacted with. This is can be done in tandem that MenuItem component so that each item can have a different action
2. __styles ?__ (SideMenu.Styles): Allows custom styles to be set onto the SideMenu Component like the positioning of the Menu, Background-Color and padding/margins
```ts
styles={{
MenuListContainer?: <styled component>;
Container?: <styled component>;
SubTitle?: <styled component>;
MenuEligibleItem?: <styled component>;
MenuItem?: <styled component>;
MenuImage?: <styled component>;
}}
```
3. __id ?__ (string): A prefix id for all the html elements of the component
4. __name ?__ (string): A prefix name for all the html elements of the component
This component will have 7 props that can be passed with 2 being required.
1. __displayValue__ (string): This will be the title of each MenuItem Title will be hidden and shown on hover
2. __item__ (any):This will be used to be able to target individual menu items
3. __disabled ?__ (boolean): The props allows for items on the menu to be disabled whent this has been set to true
4. __selectedValue ?__ (boolean): This props allows the Item to have the selected attribute set to true.
5. __onClick ?__ (function): This prop allow for the MenuItem to be given a function to preform when clicked on.
6. __image ?__ (string): This prop will have the image/icon being shown in the sidemenu. There is no default so this needs to be passed
7. __styles ?__ (MenuItem.Styles): Allows for custom styles to be set like the font-size of the text and icon. The color of the text/icon. The Icon itself can also be changed to a different one here.
```ts
styles={{
MenuItem?: <styled component>;
MenuImage?: <styled component>;
SubTitle?: <styled component>;
}}
```
8. __id ?__ (string): A prefix id for all the html elements of the component
9. __name ?__ (string): A prefix name for all the html elements of the component
```jsx
const items: JSX.Element[] = [
<MenuItem
key={1}
displayValue={'Item:1'}
item={'1'}
image={image}
/>,
<MenuItem
key={2}
displayValue={'Item:2'}
item={'2'}
image={image}
/>,
<MenuItem
key={3}
displayValue={'Item:3'}
item={image}
/>
]
<SideMenuComponent onClick={(item) => { }} selectedValue={''} items={items}>
</SideMenuComponent>
```
All the Components Elements targeted are case-sensitive any incorrect charater will not add the style. You will also not receive an error for the misspelling
```jsx
const style = {
This will target the text above the Icon
SubTitle: styles.sideMenu.SubTitle.extend`
font-size: 30px;
`,
This will target the text Icon itself
MenuImage: styles.sideMenu.MenuImage.extend`
font-size:30px;
color: tomato;
`,
This will target the container that has the collapse animation
MenuListContainer: styles.sideMenu.MenuListContainer.extend`
width: 60px;
&:hover{
width: 300px
}
`,
};
const item =[
<MenuItem
displayValue={"Item:1"}
item={"1"}
image={ICON_CODE.CLOSE}
key={1}
/>
]
<SideMenuComponent onClick={() =>{}}>{item}</SideMenuComponent>
```