-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): introduce Tabs component (#159)
* feat(motion): add reference to LumexMotion * chore: update .editorconfig * feat(components): add baseline implementation of `LumexTabs` component * feat(tabs): add `Size` parameter * feat(tabs): add `Radius` parameter * feat(tabs): add `FullWidth` parameter * feat(tabs): add `Disabled` parameter * feat(tabs): add `Colors` parameter and compound styles * feat(motion): update package contents * feat: add `Id` param for the tab component * refactor: set defaults for the `Variant`, `Color`, `Size` and `Radius` * feat: add `Disabled` and `DisabledItems` parameters * fix: multiple Tabs share the same layoutId causing conflicts * fix: tabs are getting removed on active tab change * chore: .editorconfig * fix: correct outlined variant styles * feat: render tab as link if `href` is provided; automatically set as active if matches route * feat: add 2-way data binding * feat: add slots support * chore(motion): nits * chore(motion): update package contents * refactor(docs): stop treating RZ2012 warning as error * test: add tests * chore(motion): exclude from code coverage (will be tested in its own solution) * feat: respect predefined `SelectedId` set on the owner * chore: add summaries * fix: typo * fix: 2-way binding logic * feat(docs): introduce Tabs page * refactor: make relative path and href matching less permissive * refactor: make relative path and href matching less permissive * refactor: make relative path and href matching less permissive * test: fix
- Loading branch information
1 parent
bb5fead
commit acb86a1
Showing
59 changed files
with
2,159 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Colors.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="flex flex-wrap gap-4"> | ||
| @foreach (var color in Enum.GetValues<ThemeColor>()[1..]) | ||
| { | ||
| <LumexTabs Color="@color"> | ||
| <LumexTab Id="@("photos")" Title="Photos" /> | ||
| <LumexTab Id="@("music")" Title="Music" /> | ||
| <LumexTab Id="@("videos")" Title="Videos" /> | ||
| </LumexTabs> | ||
| } | ||
| </div> |
48 changes: 48 additions & 0 deletions
48
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/CustomStyles.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <div class="w-full flex flex-col"> | ||
| <LumexTabs Variant="@TabVariant.Underlined" | ||
| Color="@ThemeColor.Primary" | ||
| Classes="@_classes"> | ||
| <LumexTab Id="@("photos")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.PhotoLibrary" /> | ||
| <span>Photos</span> | ||
| @_chip(12) | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| <LumexTab Id="@("music")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.LibraryMusic" /> | ||
| <span>Music</span> | ||
| @_chip(2) | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| <LumexTab Id="@("videos")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.VideoLibrary" /> | ||
| <span>Videos</span> | ||
| @_chip(7) | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| </LumexTabs> | ||
| </div> | ||
|
|
||
| @code { | ||
| private RenderFragment<int> _chip = content => | ||
| @<div class="size-5 inline-flex items-center justify-center border-2 border-default-200 bg-default-100 text-default-foreground rounded-full"> | ||
| <span class="text-tiny">@content</span> | ||
| </div>; | ||
|
|
||
| private TabsSlots _classes = new() | ||
| { | ||
| TabList = "gap-6 w-full rounded-none p-0 border-b border-divider", | ||
| Tab = "max-w-fit px-0 h-12", | ||
| TabContent = "group-data-[selected=true]:text-secondary", | ||
| Cursor = "w-full bg-secondary" | ||
| }; | ||
| } |
30 changes: 30 additions & 0 deletions
30
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Disabled.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="w-full flex flex-col"> | ||
| <LumexTabs Disabled="@true"> | ||
| <LumexTab Id="@("photos")" Title="Photos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor | ||
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
| exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("music")" Title="Music"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex | ||
| ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("videos")" Title="Videos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt | ||
| mollit anim id est laborum. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| </LumexTabs> | ||
| </div> |
30 changes: 30 additions & 0 deletions
30
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/DisabledItems.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="w-full flex flex-col"> | ||
| <LumexTabs DisabledItems="@(["music"])"> | ||
| <LumexTab Id="@("photos")" Title="Photos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor | ||
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
| exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("music")" Title="Music"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex | ||
| ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("videos")" Title="Videos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt | ||
| mollit anim id est laborum. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| </LumexTabs> | ||
| </div> |
30 changes: 30 additions & 0 deletions
30
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Links.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <div class="w-full flex flex-col"> | ||
| <LumexTabs> | ||
| <LumexTab Id="@("photos")" Title="Photos" href="/photos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor | ||
| incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud | ||
| exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("music")" Title="Music" href="/music"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex | ||
| ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| <LumexTab Id="@("videos")" Title="Videos" href="/videos"> | ||
| <LumexCard> | ||
| <LumexCardBody> | ||
| Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt | ||
| mollit anim id est laborum. | ||
| </LumexCardBody> | ||
| </LumexCard> | ||
| </LumexTab> | ||
| </LumexTabs> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/Sizes.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="flex flex-wrap gap-4"> | ||
| @foreach (var size in Enum.GetValues<Size>()) | ||
| { | ||
| <LumexTabs Size="@size"> | ||
| <LumexTab Id="@("photos")" Title="Photos" /> | ||
| <LumexTab Id="@("music")" Title="Music" /> | ||
| <LumexTab Id="@("videos")" Title="Videos" /> | ||
| </LumexTabs> | ||
| } | ||
| </div> |
28 changes: 28 additions & 0 deletions
28
docs/LumexUI.Docs.Client/Pages/Components/Tabs/Examples/TitleContent.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <div class="w-full flex flex-col"> | ||
| <LumexTabs Color="@ThemeColor.Primary"> | ||
| <LumexTab Id="@("photos")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.PhotoLibrary" /> | ||
| <span>Photos</span> | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| <LumexTab Id="@("music")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.LibraryMusic" /> | ||
| <span>Music</span> | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| <LumexTab Id="@("videos")"> | ||
| <TitleContent> | ||
| <div class="flex items-center space-x-2"> | ||
| <LumexIcon Icon="@Icons.Rounded.VideoLibrary" /> | ||
| <span>Videos</span> | ||
| </div> | ||
| </TitleContent> | ||
| </LumexTab> | ||
| </LumexTabs> | ||
| </div> |
Oops, something went wrong.