222 lines
9.8 KiB
TypeScript
222 lines
9.8 KiB
TypeScript
import React from 'react';
|
|
import { FAB } from '../../src/primitive-components/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
|
|
centralRipple
|
|
elevated
|
|
icon={'edit'}
|
|
size={'small'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'primary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'secondary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'tertiary'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Default </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB elevated icon={'edit'} />
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
variant={'primary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
variant={'secondary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
variant={'tertiary'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Large </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB elevated icon={'edit'} size={'large'} />
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'primary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'secondary'}
|
|
/>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'tertiary'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Extended </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB elevated icon={'edit'} size={'extended'}>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'primary'}
|
|
>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'secondary'}
|
|
>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
elevated
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'tertiary'}
|
|
>
|
|
<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 icon={'edit'} size={'small'} />
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'primary'}
|
|
/>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'secondary'}
|
|
/>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'small'}
|
|
variant={'tertiary'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Default </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB icon={'edit'} />
|
|
<FAB icon={'edit'} variant={'primary'} />
|
|
<FAB icon={'edit'} variant={'secondary'} />
|
|
<FAB icon={'edit'} variant={'tertiary'} />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Large </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB icon={'edit'} size={'large'} />
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'primary'}
|
|
/>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'secondary'}
|
|
/>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'large'}
|
|
variant={'tertiary'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h2> Extended </h2>
|
|
<div style={{ display: 'flex', gap: '2em' }}>
|
|
<FAB icon={'edit'} size={'extended'}>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'primary'}
|
|
>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'secondary'}
|
|
>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
<FAB
|
|
icon={'edit'}
|
|
size={'extended'}
|
|
variant={'tertiary'}
|
|
>
|
|
<span className={'label-large'}>Label</span>
|
|
</FAB>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|