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.
CHANGED: For optimizing write styles added a few mixins FIXED: Bug with width in segmented-buttons
This commit is contained in:
@@ -1,142 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Badge } from '../../src/primitive-components/badge/badge';
|
||||
import { Divider } from '../../src/primitive-components/divider/divider';
|
||||
|
||||
export default function Badges() {
|
||||
return (
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h1> Badges </h1>
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge disableValue />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge disableValue>3487</Badge>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge>5</Badge>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge>32</Badge>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
width: '24px',
|
||||
aspectRatio: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Badge>322342</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<Divider orientation={"vertical"} variant={"full-width"}/>*/}
|
||||
{/*<div>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* flexDirection: "column",*/}
|
||||
{/* gap: "0.5em",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <Divider variant={"inset"}/>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge>5</Badge>*/}
|
||||
{/* </div>*/}
|
||||
{/* <Divider/>*/}
|
||||
{/* <div style={{*/}
|
||||
{/* width: "24px",*/}
|
||||
{/* aspectRatio: 1,*/}
|
||||
{/* display: "flex",*/}
|
||||
{/* justifyContent: "center",*/}
|
||||
{/* alignItems: "center"*/}
|
||||
{/* }}>*/}
|
||||
{/* <Badge>32</Badge>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Button } from '../../src/primitive-components/components';
|
||||
|
||||
export default function Buttons() {
|
||||
const [state, setState] = useState(1);
|
||||
|
||||
const callback = useCallback(
|
||||
() => setState(prevState => prevState + 1),
|
||||
[state],
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h1> Buttons </h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '2em',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '150px',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
centralRipple
|
||||
onClick={callback}
|
||||
variant={'filled'}
|
||||
>
|
||||
Label
|
||||
</Button>
|
||||
<Button variant={'outlined'}>Label</Button>
|
||||
<Button variant={'tonal'}>Label</Button>
|
||||
<Button variant={'elevated'}>Label</Button>
|
||||
<Button variant={'text'}>Label</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Buttons with icon </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: '150px',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<Button icon={'add'} variant={'filled'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'outlined'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'tonal'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'elevated'}>
|
||||
Label
|
||||
</Button>
|
||||
<Button icon={'add'} variant={'text'}>
|
||||
Label
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Checkbox } from '../../src/primitive-components/components';
|
||||
|
||||
export default function Checkboxes() {
|
||||
return (
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<h1> Checkboxes </h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '5em',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2em',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<Checkbox centralRipple />
|
||||
<Checkbox defaultChecked />
|
||||
<Checkbox indeterminate={true} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<Checkbox disabled />
|
||||
<Checkbox defaultChecked disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Errored </h2>
|
||||
<form
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '2em',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '2em',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
<Checkbox required />
|
||||
<Checkbox defaultChecked required />
|
||||
<Checkbox indeterminate={true} required />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '2em',
|
||||
flexDirection: 'row',
|
||||
}}
|
||||
>
|
||||
<Checkbox className={'m3-error'} required />
|
||||
<Checkbox
|
||||
className={'m3-error'}
|
||||
defaultChecked
|
||||
required
|
||||
/>
|
||||
<Checkbox
|
||||
className={'m3-error'}
|
||||
indeterminate={true}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type={'submit'}>Send</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,221 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,197 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { IconButton } from '../../src/primitive-components/components';
|
||||
|
||||
function IconButtons() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<h1> Icon buttons </h1>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||
<div>
|
||||
<h2> Default buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton centralRipple icon={'settings'} />
|
||||
<IconButton icon={'settings'} variant={'filled'} />
|
||||
<IconButton icon={'settings'} variant={'tonal'} />
|
||||
<IconButton icon={'settings'} variant={'outlined'} />
|
||||
</div>
|
||||
<h2> Disabled default buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton disabled icon={'settings'} />
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
variant={'outlined'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Toggle buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'outlined'}
|
||||
/>
|
||||
</div>
|
||||
<h2> Disabled toggle buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'outlined'}
|
||||
/>
|
||||
</div>
|
||||
<h2> Disabled selected toggle buttons </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'filled'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'tonal'}
|
||||
/>
|
||||
<IconButton
|
||||
disabled
|
||||
icon={'settings'}
|
||||
selected
|
||||
toggled={{
|
||||
selected: 'settings',
|
||||
unselected: 'settings',
|
||||
}}
|
||||
variant={'outlined'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IconButtons;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Radio } from '../../src/primitive-components/components';
|
||||
|
||||
export default function Radios() {
|
||||
return (
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<h1> Radio </h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '5em',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<Radio centralRipple />
|
||||
<Radio defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<div style={{ display: 'flex', gap: '2em' }}>
|
||||
<Radio disabled />
|
||||
<Radio defaultChecked disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Switch } from '../../src/primitive-components/components';
|
||||
|
||||
export default function Switches() {
|
||||
return (
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{ display: 'flex', flexDirection: 'column', gap: '1.5em' }}
|
||||
>
|
||||
<h1> Switches </h1>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', gap: '2em' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> Without icon </h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '2em',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch />
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled />
|
||||
<Switch defaultChecked disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> With icon (both)</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '2em',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch icon />
|
||||
<Switch defaultChecked icon />
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled icon />
|
||||
<Switch defaultChecked disabled icon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> With icon (selected)</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '2em',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch icon selected />
|
||||
<Switch defaultChecked icon selected />
|
||||
</div>
|
||||
<div>
|
||||
<h2> Disabled </h2>
|
||||
<Switch disabled icon selected />
|
||||
<Switch defaultChecked disabled icon selected />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<h2 style={{ margin: 0 }}> With label</h2>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
gap: '2em',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2> Default </h2>
|
||||
<Switch icon labelPlacement={'left'} />
|
||||
<Switch icon selected />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
47
app/page.tsx
47
app/page.tsx
@@ -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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 132 KiB |
Reference in New Issue
Block a user