mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(components): add StructuredList

Browse source 
Closes #27
This commit is contained in:
Eric Liu 2019-12-21 18:59:09 -08:00
commit d326bf1fce
12 changed files with 341 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/components/StructuredList/StructuredList.Skeleton.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
let className = undefined;
export { className as class };
export let border = false;
export let rowCount = 5;
export let style = undefined;
import { cx } from '../../lib';
const _class = cx(
'--skeleton',
'--structured-list',
border && '--structured-list--border',
className
);
const rows = Array.from({ length: rowCount - 1 }, (_, i) => i);
</script>
<section on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
<div class={cx('--structured-list-thead')}>
<div class={cx('--structured-list-row', '--structured-list-row--header-row')}>
<div class={cx('--structured-list-th')}>
<span />
</div>
<div class={cx('--structured-list-th')}>
<span />
</div>
<div class={cx('--structured-list-th')}>
<span />
</div>
</div>
</div>
<div class={cx('--structured-list-tbody')}>
{#each rows as row, i (row)}
<div class={cx('--structured-list-row')}>
<div class={cx('--structured-list-td')} />
<div class={cx('--structured-list-td')} />
<div class={cx('--structured-list-td')} />
</div>
{/each}
</div>
</section>