Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
fe273c2759
121
app/page.tsx
121
app/page.tsx
|
|
@ -1,113 +1,24 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import Fabs from './components/fabs';
|
||||
import Badges from './components/badges';
|
||||
import Radios from './components/radios';
|
||||
import Buttons from './components/buttons';
|
||||
import Switches from './components/switches';
|
||||
import Checkboxes from './components/checkboxes';
|
||||
import IconButtons from './components/icon-buttons';
|
||||
import { TextFields } from './components/text-fields';
|
||||
import {
|
||||
ButtonLayout,
|
||||
Divider,
|
||||
SegmentedButtons,
|
||||
} from '../src/primitive-components/components';
|
||||
import { Button, Divider } from '../src/primitive-components/components';
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflowX: 'auto',
|
||||
gap: '0em',
|
||||
}}
|
||||
>
|
||||
<h1>Google Material You UI kit</h1>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<SegmentedButtons>
|
||||
<ButtonLayout>Segment 1</ButtonLayout>
|
||||
<ButtonLayout>Segment 2</ButtonLayout>
|
||||
</SegmentedButtons>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<Buttons />
|
||||
</div>
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
padding: '25px',
|
||||
}}
|
||||
>
|
||||
<IconButtons />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={'m3 m3-wrapper'}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0.5em',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Checkboxes />
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<Radios />
|
||||
<Divider
|
||||
orientation={'vertical'}
|
||||
variant={'middle-inset'}
|
||||
/>
|
||||
<Badges />
|
||||
</div>
|
||||
<Switches />
|
||||
<TextFields />
|
||||
<Fabs />
|
||||
<div className={'m3 m3-wrapper'}>
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'full-width'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'inset'} />
|
||||
<div>
|
||||
<Button>Label</Button>
|
||||
</div>
|
||||
<Divider orientation={'vertical'} variant={'middle-inset'} />
|
||||
<div>
|
||||
<Button disabled>Label</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const Badge = forwardRef<SVGSVGElement, BadgeProps>(
|
|||
>
|
||||
{children && (
|
||||
<text x={'50%'} y={'50%'}>
|
||||
{children}
|
||||
{parseInt(children) > 999 ? '999+' : children}
|
||||
</text>
|
||||
)}
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import React, { forwardRef, HTMLAttributes } from 'react';
|
||||
|
||||
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
variant?: 'outlined' | 'filled' | 'elevated';
|
||||
}
|
||||
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ variant = 'filled', ...props }, ref) => {
|
||||
const classes =
|
||||
`m3 m3-card m3-card-${variant} ${props.className ?? ''}`.trimEnd();
|
||||
|
||||
return (
|
||||
<div {...props} className={classes} ref={ref}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
export default Card;
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,26 +1,26 @@
|
|||
hr.m3.m3-divider
|
||||
border: none
|
||||
outline: 0.5px solid var(--md-sys-color-outline-variant)
|
||||
margin-inline: 4px
|
||||
position: relative
|
||||
margin: 0
|
||||
|
||||
&.vertical
|
||||
height: 100%
|
||||
height: auto
|
||||
writing-mode: vertical-lr
|
||||
|
||||
&.inset
|
||||
margin-top: 16px
|
||||
margin-inline-start: 16px
|
||||
|
||||
&.middle-inset
|
||||
margin-bottom: 16px
|
||||
margin-top: 16px
|
||||
margin-inline: 16px
|
||||
|
||||
|
||||
&.horizontal
|
||||
width: 100%
|
||||
width: auto
|
||||
writing-mode: horizontal-tb
|
||||
|
||||
&.inset
|
||||
margin-left: 16px
|
||||
margin-inline-start: 16px
|
||||
|
||||
&.middle-inset
|
||||
margin-left: 16px
|
||||
margin-right: 16px
|
||||
margin-inline: 16px
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -25,7 +25,6 @@ html
|
|||
user-select: none
|
||||
|
||||
.m3.m3-wrapper
|
||||
width: 100%
|
||||
position: relative
|
||||
display: block
|
||||
background-color: var(--md-sys-color-surface)
|
||||
|
|
|
|||
Loading…
Reference in New Issue