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

ADDED: slider label but it's not done

Browse Source
This commit is contained in:
doryan04
2024-02-25 19:52:36 +04:00
committed by doryan
parent 894f0bc2c9
commit ecb431fe72
5 changed files with 104 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
app/page.tsx
View File

@@ -1,109 +1,14 @@
import React from 'react';
import { Card } from '../src/primitive-components/card/card';
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';
import { Slider } from '../src/primitive-components/input-components/slider/slider';
export default function Page() {
return (
<main>
<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'}
ripple={false}
variant={'filled'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'default'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
ripple={false}
variant={'outlined'}
/>
<IconButton
icon={'settings'}
ripple={false}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'filled'}
/>
<IconButton
icon={'settings'}
ripple={false}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'default'}
/>
<IconButton
icon={'settings'}
ripple={false}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
variant={'tonal'}
/>
<IconButton
icon={'settings'}
ripple={false}
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>
<Slider />
</CardFooter>
</Card>
</main>