doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADDED: Card sub-components

Browse Source 
TODO: Complete styles for card sub-components and section button
This commit is contained in:
doryan04
2024-02-03 23:52:25 +04:00
committed by doryan
parent a942d22151
commit 9ee845fbba
22 changed files with 1239 additions and 873 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/primitive-components/input-components/checkbox-layout/check-box-layout.tsx
View File

@@ -21,7 +21,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
const classesType = typeInput || type;
const classes =
const extraClassStyles =
props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
@@ -30,7 +30,7 @@ export const CheckBoxLayout = forwardRef<HTMLInputElement, CheckboxLayoutProps>(
<input
ref={checkboxRef}
{...props}
className={classes.trimEnd()}
className={extraClassStyles.trimEnd()}
type={type}
/>
);

4
src/primitive-components/input-components/checkbox/checkbox.tsx
View File

@@ -26,7 +26,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes =
const extraClassStyles =
`m3 m3-checkbox-label ${isActive === true ? 'visible' : ''}`.trimEnd();
useImperativeHandle(ref, () => checkboxRef.current);
@@ -36,7 +36,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
}, [checkboxRef.current?.checked]);
return (
<label {...events} className={classes}>
<label {...events} className={extraClassStyles}>
<CheckBoxLayout
{...props}
indeterminate={props.indeterminate}

4
src/primitive-components/input-components/radio/radio.tsx
View File

@@ -18,11 +18,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes =
const extraClassStyles =
`m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();
return (
<div {...events} className={classes}>
<div {...events} className={extraClassStyles}>
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>