53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { createComponent } from '@lit/react';
|
|
import { MdList as MdListWebComponent } from '@material/web/list/list';
|
|
import { MdListItem as MdListItemWebComponent } from '@material/web/list/list-item';
|
|
|
|
const MdList = createComponent({
|
|
react: React,
|
|
tagName: 'md-list',
|
|
elementClass: MdListWebComponent,
|
|
});
|
|
|
|
type ListProps = {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const List = (props: ListProps) => {
|
|
const { children, ...rest } = props;
|
|
|
|
return (
|
|
<MdList {...rest}>
|
|
{children}
|
|
</MdList>
|
|
);
|
|
}
|
|
|
|
const MdListItem = createComponent({
|
|
react: React,
|
|
tagName: 'md-list-item',
|
|
elementClass: MdListItemWebComponent,
|
|
});
|
|
|
|
type ListItemProps = {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
id?: string;
|
|
ariaLabel?: string;
|
|
disabled?: boolean;
|
|
type?: 'text' | 'link' | 'button';
|
|
href?: string;
|
|
target?: '_blank' | '_self' | '_parent' | '_top';
|
|
}
|
|
|
|
export const ListItem = (props: ListItemProps) => {
|
|
const { children, ...rest } = props;
|
|
|
|
const type = props.type || 'text';
|
|
|
|
return (
|
|
<MdListItem {...rest} type={type}>
|
|
{children}
|
|
</MdListItem>
|
|
)
|
|
} |