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

ADDED: Icon wrapper for more elegant way to placement icon in buttons

Browse Source 
TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons
This commit is contained in:
doryan04
2024-02-09 23:16:00 +04:00
committed by doryan
parent 4778ce7e37
commit dbb19057ac
15 changed files with 148 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/page.tsx
View File

@@ -5,13 +5,11 @@ import { CardBody } from '../src/primitive-components/card/card-body';
import { CardMedia } from '../src/primitive-components/card/card-media';
import { CardFooter } from '../src/primitive-components/card/card-footer';
import { CardHeader } from '../src/primitive-components/card/card-header';
import { SegmentedButtons } from '../src/primitive-components/components';
import { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Button } from '../src/primitive-components/button-components/button/button';
import { Typography } from '../src/primitive-components/typography/typography';
import {
ButtonLayout,
SegmentedButtons,
} from '../src/primitive-components/components';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
export default function Page() {
return (
@@ -50,11 +48,21 @@ export default function Page() {
</CardActionArea>
<CardFooter>
<div className={'flex flex-row gap-3'}>
<Button>label</Button>
<Button icon={'add'}>Label 1</Button>
<Button icon={'add'} iconPlace={'right'}>
Label 2
</Button>
<SegmentedButtons>
<ButtonLayout>Label 1</ButtonLayout>
<ButtonLayout>Label 2</ButtonLayout>
<ButtonLayout>Label 3</ButtonLayout>
<SegmentButton icon={'add'}>
Label 1
</SegmentButton>
<SegmentButton
icon={'add'}
iconPlace={'right'}
>
Label 2
</SegmentButton>
<SegmentButton>Label 3</SegmentButton>
</SegmentedButtons>
</div>
</CardFooter>