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

ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

Browse Source 
CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons
This commit is contained in:
doryan04
2024-02-23 23:55:21 +04:00
committed by doryan
parent f5bf0f92d2
commit 5300c63827
28 changed files with 1628 additions and 3505 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/page.tsx
View File

@@ -1,19 +1,11 @@
import React from 'react';
import testImage1 from './test-images/test-image-1.jpg';
import { Card } from '../src/primitive-components/card/card';
import {
Button,
Checkbox,
FAB,
IconButton,
} 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 { Typography } from '../src/primitive-components/typography/typography';
import { CardActionArea } from '../src/primitive-components/card/card-action-area';
import { Slider } from '../src/primitive-components/input-components/slider/slider';
import { Button } from '../src/primitive-components/button-components/button/button';
import { SegmentButton } from '../src/primitive-components/button-components/segmented-buttons/segment-button';
import { SegmentedButtons } from '../src/primitive-components/button-components/segmented-buttons/segmented-buttons';
@@ -34,22 +26,51 @@ export default function Page() {
>
<Card variant={'outlined'}>
<CardFooter>
<SegmentedButtons toggled={true}>
<SegmentedButtons selectable={true}>
<SegmentButton
fillIcon={1}
icon={'change_history'}
>
fin ita la comedia
Label 1
</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
selectable={false}
>
Label 2
Not selectable
</SegmentButton>
<SegmentButton disabled>Label 3</SegmentButton>
<SegmentButton
fillIcon={1}
icon={'change_history'}
iconPlace={'right'}
iconSize={48}
svgSize={48}
>
Label 3
</SegmentButton>
<SegmentButton disabled>Label 4</SegmentButton>
</SegmentedButtons>
<Button ripple={false}>Filled button</Button>
<Button ripple={false} variant={'outlined'}>
Outlined button
</Button>
<Button ripple={false} variant={'elevated'}>
Elevated button
</Button>
<Button ripple={false} variant={'text'}>
Text button
</Button>
<Button ripple={false} variant={'tonal'}>
Tonal button
</Button>
<FAB icon={'edit'} ripple={false}></FAB>
<FAB icon={'edit'}></FAB>
<IconButton
icon={'settings'}
variant={'filled'}
></IconButton>
</CardFooter>
</Card>
</div>