221 lines
9.7 KiB
TypeScript
221 lines
9.7 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {FAB} from '../../src/primitive-components/material-you-components';
|
||
|
|
|
||
|
|
export default function Fabs() {
|
||
|
|
return (
|
||
|
|
<div className={'m3 m3-wrapper'}>
|
||
|
|
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
|
||
|
|
<div>
|
||
|
|
<h1> FABs with elevation</h1>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '100%',
|
||
|
|
gap: '2em',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<h2> Small </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
centralRipple
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Default </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB icon={'edit'} elevated />
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Large </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB size={'large'} icon={'edit'} />
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Extended </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB size={'extended'} icon={'edit'} elevated>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
elevated
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1> FABs without elevation</h1>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
width: '100%',
|
||
|
|
gap: '2em',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<h2> Small </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
variant={'primary'}
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'small'}
|
||
|
|
icon={'edit'}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Default </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB icon={'edit'} />
|
||
|
|
<FAB variant={'primary'} icon={'edit'} />
|
||
|
|
<FAB variant={'secondary'} icon={'edit'} />
|
||
|
|
<FAB variant={'tertiary'} icon={'edit'} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Large </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB size={'large'} icon={'edit'} />
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
/>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'large'}
|
||
|
|
icon={'edit'}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h2> Extended </h2>
|
||
|
|
<div style={{display: 'flex', gap: '2em'}}>
|
||
|
|
<FAB size={'extended'} icon={'edit'}>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'primary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'secondary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
<FAB
|
||
|
|
variant={'tertiary'}
|
||
|
|
size={'extended'}
|
||
|
|
icon={'edit'}
|
||
|
|
>
|
||
|
|
<span className={'label-large'}>Label</span>
|
||
|
|
</FAB>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|