nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update card tabs

Browse Source
This commit is contained in:
Bill 2022-03-16 16:26:58 -04:00
parent c2bee696d2
commit 60db79e423
3 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/common/card/NitroCardView.scss
View File

@ -49,6 +49,38 @@ $nitro-card-tabs-height: 33px;
.nitro-card-tabs {
background-color: $secondary;
.nav-item {
padding: $nav-link-padding-y $nav-link-padding-x;
background-color: $muted;
color: $black;
z-index: 1;
margin-bottom: -1px;
&.active {
background-color: $light;
border-color: $border-color $border-color $light !important;
border-bottom: 1px solid black;
&:before {
background: $white;
}
}
&:before {
content: "";
position: absolute;
width: 93%;
height: 3px;
border-radius: 0.25rem;
top: 1.5px;
left: 0;
right: 0;
margin: auto;
background: #c2c9d1;
z-index: 1;
}
}
}
.content-area {
@ -146,7 +178,7 @@ $nitro-card-tabs-height: 33px;
}
.nitro-card-tabs {
min-height: $nitro-card-tabs-height;
height: 100%;
max-height: $nitro-card-tabs-height;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}

26
src/common/card/tabs/NitroCardTabsItemView.tsx
View File

@ -1,23 +1,35 @@
import classNames from 'classnames';
import { FC, MouseEventHandler } from 'react';
import { FC, useMemo } from 'react';
import { Flex, FlexProps } from '../../Flex';
import { LayoutItemCountView } from '../../layout';
interface NitroCardTabsItemViewProps
interface NitroCardTabsItemViewProps extends FlexProps
{
isActive?: boolean;
count?: number;
onClick?: MouseEventHandler<HTMLLIElement>;
}
export const NitroCardTabsItemView: FC<NitroCardTabsItemViewProps> = props =>
{
const { children = null, isActive = false, count = 0, onClick = null } = props;
const { isActive = false, count = 0, overflow = 'hidden', position = 'relative', pointer = true, classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
const newClassNames: string[] = [ 'nav-item', 'rounded-top', 'border' ];
if(isActive) newClassNames.push('active');
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ isActive, classNames ]);
return (
<li className={ 'nav-link cursor-pointer position-relative' + classNames({ ' active': isActive }) } onClick={ onClick }>
<Flex overflow={ overflow } pointer={ pointer } position={ position } classNames={ getClassNames } { ...rest }>
<Flex shrink center>
{ children }
</Flex>
{ (count > 0) &&
<LayoutItemCountView count={ count } /> }
</li>
</Flex>
);
}

6
src/common/card/tabs/NitroCardTabsView.tsx
View File

@ -3,7 +3,7 @@ import { Flex, FlexProps } from '../..';
export const NitroCardTabsView: FC<FlexProps> = props =>
{
const { justifyContent = 'center', classNames = [], children = null, ...rest } = props;
const { justifyContent = 'center', gap = 1, classNames = [], children = null, ...rest } = props;
const getClassNames = useMemo(() =>
{
@ -15,10 +15,8 @@ export const NitroCardTabsView: FC<FlexProps> = props =>
}, [ classNames ]);
return (
<Flex justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
<ul className="nav nav-tabs border-0 gap-1">
<Flex justifyContent={ justifyContent } gap={ gap } classNames={ getClassNames } { ...rest }>
{ children }
</ul>
</Flex>
);
}