CardTabs

CardTabs UI Component

Installation

npm i @synerise/ds-card-tabs
or
yarn add @synerise/ds-card-tabs

Usage

import CardTabs from '@synerise/ds-card-tabs'
<CardTabs
maxTabsCount={4}
onChangeOrder={() => {})}
onAddTab={() => {})}
>
<CardTab
id={0}
index={0}
name="Variant A"
tag="A"
active={true}
greyBackground={false}
prefixIcon={<FileIcon />}
suffixIcon={<FileIcon />}
disabled={false}
prefix={prefixType.TAG}
onSelectTab={() => {})}
onChangeName={() => {})}
onRemoveTab={() => {}}
onDuplicateTab={() => {})}
invalid={false}
draggable={false}
/>
<CardTab
id={1}
index={1}
name="Variant B"
tag="B"
active={false}
greyBackground={false}
prefixIcon={<FileIcon />}
suffixIcon={<FileIcon />}
disabled={false}
prefix={prefixType.TAG}
onSelectTab={() => {})}
onChangeName={() => {})}
onRemoveTab={() => {}}
onDuplicateTab={() => {})}
invalid={false}
draggable={false}
/>
</CardTabs>

Demo

API

CardTabs Component

PropertyDescriptionTypeDefault
maxTabsCountMax number of child componentsnumber-
onAddTabCallback fired when user clicks on add buttonfunction-
onChangeOrderCallback fired when user changes order of tabsfunction(newOrder)-

CardTab Component

PropertyDescriptionTypeDefault
idId of tabnumber-
indexPosition of tabnumber-
nameName of tabstring-
tagSingle letter (tag) of tabstring-
activeFlag of active tabbooleanfalse
greyBackgroundChange default color of tabs, use when background will be different then whitebooleanfalse
prefixIconIcon visible on the left side of the tabSVG Iconnull
suffixIconIcon visible on the right side of the tab, when set action icons will be hiddenSVG Iconnull
disabledFlag of disabled tabsbooleanfalse
invalidFlag of tabs with some errorsbooleanfalse
invalidNameFlag of tabs with invalid namebooleanfalse
draggableShows drag handler on the left side of tabbooleanfalse
onSelectTabCallback fired when user clicks on the tab(id: number) => void-
onRemoveTabCallback fired when user clicks on the remove tab icon(id: number) => void-
onDuplicateTabCallback fired when user clicks on the duplicate tab icon(id: number) => void-
onChangeNameCallback fired when the edit name input blur(id: number, newName: string)-
textsTranslations of CrudButtons tooltipsCardTabTexts-
colorColor of CardTabred/ green/ grey/ yellow/ blue/ pink/ mars/ orange/ fern/ cyan/ purple/ violetyellow

CardTabTexts

PropertyDescriptionTypeDefault
changeNameTooltipRename tooltipstring / React.ReactNode'Rename'
duplicateTooltipDuplicate tooltipstring / React.ReactNode'Duplicate'
removeTooltipRemove tooltipstring / React.ReactNode'Remove'