92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
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';
|
|
|
|
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'} 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>
|
|
);
|
|
}
|