doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Mixins for icon buttons, but it's not completed feature

Browse Source 
FIXED: Styles for segmented-button
This commit is contained in:
doryan04
2024-02-24 23:58:23 +04:00
committed by doryan
parent 964534c780
commit 0a8b58668d
22 changed files with 423 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
app/page.tsx
View File

@@ -1,6 +1,10 @@
import React from 'react';
import { Card } from '../src/primitive-components/card/card';
import { IconButton } from '../src/primitive-components/components';
import {
Button,
FAB,
IconButton,
} from '../src/primitive-components/components';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@@ -8,51 +12,80 @@ import { SegmentedButtons } from '../src/primitive-components/button-components/
export default function Page() {
return (
<main>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '8px',
padding: '8px',
}}
>
<div
style={{ display: 'flex', gap: '8px', maxWidth: '1024px' }}
>
<Card variant={'outlined'}>
<CardFooter>
<SegmentedButtons selectable={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
>
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
selectable={false}
>
Not selectable
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
iconSize={48}
svgSize={48}
>
Label 3
</SegmentButton>
<SegmentButton disabled>Label 4</SegmentButton>
</SegmentedButtons>
<IconButton icon={'settings'} variant={'filled'} />
</CardFooter>
</Card>
</div>
</div>
<Card variant={'outlined'}>
<CardFooter>
<Button> Default Button </Button>
<Button ripple={false}> Default Button </Button>
<FAB icon={'edit'} variant={'secondary'} />
<FAB icon={'edit'} ripple={false} variant={'secondary'} />
<IconButton icon={'settings'} variant={'filled'} />
<IconButton icon={'settings'} variant={'default'} />
<IconButton icon={'settings'} variant={'tonal'} />
<IconButton icon={'settings'} variant={'outlined'} />
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'default'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'outlined'}
/>
<SegmentedButtons density={-2} selectable={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
ripple={false}
>
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
ripple={false}
selectable={false}
>
Not selectable
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
ripple={false}
>
Label 3
</SegmentButton>
<SegmentButton disabled>Label 4</SegmentButton>
</SegmentedButtons>
</CardFooter>
</Card>
</main>
);
}