woby-list

DEMO

Check out the documentation & demo pages to see all use cases.

Installation

NPM

pnpm install woby-list

import { MenuItem } from '../src/lib/MenuItem'
import { MenuList } from '../src/lib/MenuList'
import { ListItemIcon } from '../src/lib/ListItemIcon'
import { ListItemSecondaryAction } from '../src/lib/ListItemSecondaryAction'
import { ListItemText } from '../src/lib/ListItemText'
import { tw } from 'woby-styled'

import { render, $ } from 'woby'
import '../dist/output.css'

const Paper = tw('div')`elevation-3`
const Typography = tw('p')`font-normal text-sm leading-[1.43] tracking-[0.01071em] text-[rgba(0,0,0,0.6)] m-0`
const Divider = tw('hr')`shrink-0 my-2 m-0 [border-width:0px_0px_thin] border-solid border-[rgba(0,0,0,0.12)]`
const open = $(false)


{/* <div class="min-w-[36px] text-[rgba(0,0,0,0.54)] shrink-0 inline-flex">
            <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 [transition:fill_200m_cubic-bezier(0.4,0,0.2,1)0ms] text-xl" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyIcon">
                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>
        </div>
        <div class="flex-auto min-w-0 my-0">
            <span class="font-normal text-base leading-normal tracking-[0.00938em] block m-0">Copy</span></div>
        <p class="font-normal text-sm leading-[1.43] tracking-[0.01071em] text-[rgba(0,0,0,0.6)] m-0">⌘C</p>
        <span class="overflow-hidden pointer-events-none absolute z-0 rounded-[inherit] inset-0"></span> */}

const App = () => <div class='w-[25%]'>
    <div class='w-full w-max-[360px]'>
        <nav>
            <MenuList>
                <MenuItem>
                    <ListItemIcon>
                        <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 text-2xl [transition:fill_200ms_cubic-bezier(0.4,0,0.2,1)0ms]" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="InboxIcon"><path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"></path></svg>
                    </ListItemIcon>
                    <ListItemText primary="Inbox" />
                </MenuItem>
                <MenuItem>
                    <ListItemIcon>
                        <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 text-2xl [transition:fill_200ms_cubic-bezier(0.4,0,0.2,1)0ms]" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DraftsIcon"><path d="M21.99 8c0-.72-.37-1.35-.94-1.7L12 1 2.95 6.3C2.38 6.65 2 7.28 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2l-.01-10zM12 13 3.74 7.84 12 3l8.26 4.84L12 13z"></path></svg>
                    </ListItemIcon>
                    <ListItemText primary="Drafts" secondary="Jan 7, 2014" />
                    {/* <Collapse open={open} timeout="auto" unmountOnExit>
                        <List component="div" disablePadding>
                            <ListItemButton sx={{ pl: 4 }}>
                                <ListItemIcon>
                                    <StarBorder />
                                </ListItemIcon>
                                <ListItemText primary="Starred" />
                            </ListItemButton>
                        </List>
                    </Collapse> */}
                </MenuItem>
            </MenuList>
        </nav>
        <Divider />
        <nav aria-label="secondary mailbox folders">
            <MenuList>
                <MenuItem>
                    <ListItemText primary="Trash" />
                </MenuItem>
                <MenuItem>
                    <ListItemText primary="Spam" />
                </MenuItem>
            </MenuList>
        </nav>
    </div>

    <Paper class={'w-[320px] w-max-full'}>
        <MenuList>
            <MenuItem>
                <ListItemIcon onClick={() => alert('clickd')}>
                    <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 transition-[fill] duration-200 ease-in-out delay-[0ms] text-xl" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCutIcon"><path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"></path></svg>
                </ListItemIcon>
                <ListItemText>Cut</ListItemText>
                <Typography>
                    ⌘X
                </Typography>
            </MenuItem>
            <MenuItem>
                <ListItemIcon>
                    <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 transition-[fill] duration-200 ease-in-out delay-[0ms] text-xl" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentCopyIcon"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></svg>
                </ListItemIcon>
                <ListItemText>Copy</ListItemText>
                <Typography>
                    ⌘C
                </Typography>
            </MenuItem>
            <MenuItem>
                <ListItemIcon>
                    <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 transition-[fill] duration-200 ease-in-out delay-[0ms] text-xl" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ContentPasteIcon"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path></svg>
                </ListItemIcon>
                <ListItemText>Paste</ListItemText>
                <Typography>
                    ⌘V
                </Typography>
            </MenuItem>
            <Divider />
            <MenuItem>
                <ListItemIcon>
                    <svg class="select-none w-[1em] h-[1em] inline-block fill-current shrink-0 transition-[fill] duration-200 ease-in-out delay-[0ms] text-xl" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CloudIcon"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z"></path></svg>
                </ListItemIcon>
                <ListItemText>Web Clipboard</ListItemText>
            </MenuItem>
        </MenuList>
    </Paper>
</div>

render(<App />, document.getElementById('app'))

API

License

MIT