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

TODO: Slider

Browse Source 
DONE: Segmented buttons
This commit is contained in:
doryan04
2024-02-12 20:11:33 +04:00
committed by doryan
parent ff00e19aeb
commit fef77fb0f9
9 changed files with 175 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/page.tsx
View File

@@ -1,15 +1,16 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
import { Checkbox } from '../src/primitive-components/components';
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 { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
export default function Page() {
return (
@@ -23,7 +24,7 @@ export default function Page() {
padding: '8px',
}}
>
<div style={{ display: 'flex', gap: '8px', maxWidth: '512px' }}>
<div style={{ display: 'flex', gap: '8px', maxWidth: '768px' }}>
<Card variant={'outlined'}>
<CardHeader>
<Typography.h3> Header-3 </Typography.h3>
@@ -52,18 +53,23 @@ export default function Page() {
<Button icon={'add'} iconPlace={'right'}>
Label 2
</Button>
<SegmentedButtons>
<SegmentButton icon={'add'}>
<SegmentedButtons toggled>
<SegmentButton
fillIcon={1}
icon={'change_history'}
>
Label 1
</SegmentButton>
<SegmentButton
icon={'add'}
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
>
Label 2
</SegmentButton>
<SegmentButton>Label 3</SegmentButton>
</SegmentedButtons>
<Checkbox />
</div>
</CardFooter>
</Card>