Skip to content

Commit

Permalink
feat(toolbar): reworked material Toolbar and Tabbar to match m3 styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@nolimits4web
nolimits4web committed Aug 17, 2022
1 parent de973fb commit 3022a45
Show file tree
Hide file tree
Showing 28 changed files with 469 additions and 176 deletions.
2 changes: 1 addition & 1 deletion kitchen-sink/react/pages/Badge.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function BadgePage() {
</Link>
}
/>
<Tabbar labels className="left-0 bottom-0 fixed">
<Tabbar labels icons className="left-0 bottom-0 fixed">
<TabbarLink
active
icon={
Expand Down
38 changes: 26 additions & 12 deletions kitchen-sink/react/pages/Tabbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,57 +21,62 @@ import { MdEmail, MdToday, MdFileUpload } from 'react-icons/md';
export default function TabbarPage() {
const isPreview = document.location.href.includes('examplePreview');
const [activeTab, setActiveTab] = useState('tab-1');
const [isTabbarLabels, setIsTabbarLabels] = useState(false);
const [isTabbarLabels, setIsTabbarLabels] = useState(true);
const [isTabbarIcons, setIsTabbarIcons] = useState(false);
return (
<Page>
<Navbar
title="Tabbar"
left={!isPreview && <NavbarBackLink onClick={() => history.back()} />}
/>

<Tabbar labels={isTabbarLabels} className="left-0 bottom-0 fixed">
<Tabbar
labels={isTabbarLabels}
icons={isTabbarIcons}
className="left-0 bottom-0 fixed"
>
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => setActiveTab('tab-1')}
icon={
isTabbarLabels && (
isTabbarIcons && (
<Icon
ios={<EnvelopeFill className="w-7 h-7" />}
material={<MdEmail className="w-6 h-6" />}
/>
)
}
label="Tab 1"
label={isTabbarLabels && 'Tab 1'}
/>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => setActiveTab('tab-2')}
icon={
isTabbarLabels && (
isTabbarIcons && (
<Icon
ios={<Calendar className="w-7 h-7" />}
material={<MdToday className="w-6 h-6" />}
/>
)
}
label="Tab 2"
label={isTabbarLabels && 'Tab 2'}
/>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => setActiveTab('tab-3')}
icon={
isTabbarLabels && (
isTabbarIcons && (
<Icon
ios={<CloudUploadFill className="w-7 h-7" />}
material={<MdFileUpload className="w-6 h-6" />}
/>
)
}
label="Tab 3"
label={isTabbarLabels && 'Tab 3'}
/>
</Tabbar>

<List>
<List strong inset>
<ListItem
title="Tabbar Labels"
after={
Expand All @@ -81,10 +86,19 @@ export default function TabbarPage() {
/>
}
/>
<ListItem
title="Tabbar Icons"
after={
<Toggle
checked={isTabbarIcons}
onChange={() => setIsTabbarIcons(!isTabbarIcons)}
/>
}
/>
</List>

{activeTab === 'tab-1' && (
<Block strong className="space-y-4">
<Block strong inset className="space-y-4">
<p>
<b>Tab 1</b>
</p>
Expand Down Expand Up @@ -117,7 +131,7 @@ export default function TabbarPage() {
</Block>
)}
{activeTab === 'tab-2' && (
<Block strong className="space-y-4">
<Block strong inset className="space-y-4">
<p>
<b>Tab 2</b>
</p>
Expand Down Expand Up @@ -150,7 +164,7 @@ export default function TabbarPage() {
</Block>
)}
{activeTab === 'tab-3' && (
<Block strong className="space-y-4">
<Block strong inset className="space-y-4">
<p>
<b>Tab 3</b>
</p>
Expand Down
8 changes: 4 additions & 4 deletions kitchen-sink/svelte/pages/Badge.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,20 +42,20 @@
</Link>
</Navbar>

<Tabbar labels class="left-0 bottom-0 fixed">
<TabbarLink active label="Inbox" withIcon>
<Tabbar labels icons class="left-0 bottom-0 fixed">
<TabbarLink active label="Inbox">
<Icon slot="icon" badge="5" badgeColors={{ bg: 'bg-green-500' }}>
<EnvelopeFill slot="ios" class="w-7 h-7" />
<MdEmail slot="material" class="w-6 h-6" />
</Icon>
</TabbarLink>
<TabbarLink label="Calendar" withIcon>
<TabbarLink label="Calendar">
<Icon slot="icon" badge="7" badgeColors={{ bg: 'bg-red-500' }}>
<Calendar slot="ios" class="w-7 h-7" />
<MdToday slot="material" class="w-6 h-6" />
</Icon>
</TabbarLink>
<TabbarLink label="Upload" withIcon>
<TabbarLink label="Upload">
<Icon slot="icon" badge="1" badgeColors={{ bg: 'bg-red-500' }}>
<CloudUploadFill slot="ios" class="w-7 h-7" />
<MdFileUpload slot="material" class="w-6 h-6" />
Expand Down
117 changes: 72 additions & 45 deletions kitchen-sink/svelte/pages/Tabbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
const isPreview = document.location.href.includes('examplePreview');
let activeTab = 'tab-1';
let isTabbarLabels = false;
let isTabbarLabels = true;
let isTabbarIcons = true;
</script>

<Page>
Expand All @@ -34,60 +35,86 @@
</svelte:fragment>
</Navbar>

<Tabbar labels={isTabbarLabels} class="left-0 bottom-0 fixed">
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => (activeTab = 'tab-1')}
label="Tab 1"
withIcon={isTabbarLabels}
>
<svelte:fragment slot="icon">
<Icon>
<EnvelopeFill slot="ios" class="w-7 h-7" />
<MdEmail slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => (activeTab = 'tab-2')}
label="Tab 2"
withIcon={isTabbarLabels}
>
<svelte:fragment slot="icon">
<Icon>
<Calendar slot="ios" class="w-7 h-7" />
<MdToday slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => (activeTab = 'tab-3')}
label="Tab 3"
withIcon={isTabbarLabels}
>
<svelte:fragment slot="icon">
<Icon>
<CloudUploadFill slot="ios" class="w-7 h-7" />
<MdFileUpload slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
<Tabbar
labels={isTabbarLabels}
icons={isTabbarIcons}
class="left-0 bottom-0 fixed"
>
{#if isTabbarIcons}
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => (activeTab = 'tab-1')}
label={isTabbarLabels ? 'Tab 1' : undefined}
>
<svelte:fragment slot="icon">
<Icon>
<EnvelopeFill slot="ios" class="w-7 h-7" />
<MdEmail slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => (activeTab = 'tab-2')}
label={isTabbarLabels ? 'Tab 2' : undefined}
>
<svelte:fragment slot="icon">
<Icon>
<Calendar slot="ios" class="w-7 h-7" />
<MdToday slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => (activeTab = 'tab-3')}
label={isTabbarLabels ? 'Tab 3' : undefined}
>
<svelte:fragment slot="icon">
<Icon>
<CloudUploadFill slot="ios" class="w-7 h-7" />
<MdFileUpload slot="material" class="w-6 h-6" />
</Icon>
</svelte:fragment>
</TabbarLink>
{:else}
<TabbarLink
active={activeTab === 'tab-1'}
onClick={() => (activeTab = 'tab-1')}
label={isTabbarLabels ? 'Tab 1' : undefined}
/>
<TabbarLink
active={activeTab === 'tab-2'}
onClick={() => (activeTab = 'tab-2')}
label={isTabbarLabels ? 'Tab 2' : undefined}
/>
<TabbarLink
active={activeTab === 'tab-3'}
onClick={() => (activeTab = 'tab-3')}
label={isTabbarLabels ? 'Tab 3' : undefined}
/>
{/if}
</Tabbar>

<List>
<List strong inset>
<ListItem title="Tabbar Labels">
<Toggle
slot="after"
checked={isTabbarLabels}
onChange={() => (isTabbarLabels = !isTabbarLabels)}
/>
</ListItem>
<ListItem title="Tabbar Icons">
<Toggle
slot="after"
checked={isTabbarIcons}
onChange={() => (isTabbarIcons = !isTabbarIcons)}
/>
</ListItem>
</List>

{#if activeTab === 'tab-1'}
<Block strong class="space-y-4">
<Block strong inset class="space-y-4">
<p>
<b>Tab 1</b>
</p>
Expand Down Expand Up @@ -119,7 +146,7 @@
</Block>
{/if}
{#if activeTab === 'tab-2'}
<Block strong class="space-y-4">
<Block strong inset class="space-y-4">
<p>
<b>Tab 2</b>
</p>
Expand Down Expand Up @@ -152,7 +179,7 @@
</Block>
{/if}
{#if activeTab === 'tab-3'}
<Block strong class="space-y-4">
<Block strong inset class="space-y-4">
<p>
<b>Tab 3</b>
</p>
Expand Down
2 changes: 1 addition & 1 deletion kitchen-sink/vue/pages/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</k-link>
</template>
</k-navbar>
<k-tabbar labels class="left-0 bottom-0 fixed">
<k-tabbar labels icons class="left-0 bottom-0 fixed">
<k-tabbar-link active label="Inbox">
<template #icon>
<k-icon badge="5" :badge-colors="{ bg: 'bg-green-500' }">
Expand Down
Loading

0 comments on commit 3022a45

Please sign in to comment.