diff --git a/CHANGELOG.md b/CHANGELOG.md index fe61abb..990dc40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## Unreleased +- Added an optional `DisplayTitle` prop to `TabContainer` children tabs to allow displaying custom text on tabs + ## 1.2.0 - Added usePlugin hook diff --git a/src/Components/TabContainer.luau b/src/Components/TabContainer.luau index 05cdb9a..0d2cbbc 100644 --- a/src/Components/TabContainer.luau +++ b/src/Components/TabContainer.luau @@ -36,6 +36,32 @@ end ``` + To override the text displayed on a tab, assign a value to the optional + `DisplayTitle` field in the tab entry; see the "Comments" example below: + ```lua + local function MyPluginApp(props: { + comments: { string } + }) + local selectedTab, setSelectedTab = React.useState("Comments") + local commentsArray = props.comments + + return React.createElement(TabContainer, { + SelectedTab = selectedTab, + OnTabSelected = setSelectedTab, + }, { + ["Comments"] = { + LayoutOrder = 1, + DisplayTitle = `Comments ({#commentsArray})`, + Content = React.createElement(...), + }, + ["Settings"] = { + LayoutOrder = 2, + Content = React.createElement(...), + } + }) + end + ``` + As well as disabling the entire component via the `Disabled` [CommonProp](CommonProps), individual tabs can be disabled and made unselectable by passing `Disabled` with a value of `true` inside the tab's entry in the `Tabs` prop table. @@ -60,6 +86,7 @@ local TAB_HEIGHT = 30 @interface Tab @field LayoutOrder number + @field DisplayTitle string? @field Content React.ReactNode @field Disabled boolean? ]=] @@ -67,6 +94,7 @@ local TAB_HEIGHT = 30 type Tab = { Content: React.ReactNode, LayoutOrder: number, + DisplayTitle: string?, Disabled: boolean?, } @@ -185,7 +213,7 @@ local function TabContainer(props: TabContainerProps) tabs[name] = React.createElement(TabButton, { Size = UDim2.fromScale(1 / count, 1), LayoutOrder = tab.LayoutOrder, - Text = name, + Text = tab.DisplayTitle or name, Selected = isSelectedTab, Disabled = tab.Disabled == true or props.Disabled == true, OnActivated = function()