Smelte logo
SMELTE
Github Smelte

Lists

  • List props
  • List item props
  • prop
    description
    type
    Default value
    value Selected item value String empty string
    items List items (item has id, value, to and text props) Array []
    dense Dense variant Boolean false
    navigation Is navigation drawer list Boolean false
    select Is dropdown selet Boolean false
    One-line
    Two-line
    Dense
    <script>
    	import List from 'smelte/src/components/List';
    	import Icon from 'smelte/src/components/Icon';
    
      const listOneLine = [{
    		text: 'Item 1',
    		icon: 'favorite',
    	}, {
    		text: 'Item 2',
    		icon: 'favorite',
    	}, {
    		text: 'Item 3',
    		icon: 'favorite',
    	}];
    	
    	const listTwoLines = [{
    		text: 'Item 1',
    		icon: 'favorite',
    		subheading: 'Subheading 1',
    	}, {
    		text: 'Item 2',
    		icon: 'favorite',
    		subheading: 'Subheading 2',
    	}, {
    		text: 'Item 3',
    		icon: 'favorite',
    		subheading: 'Subheading 3',
    	}];
    
    	let selected = false;
    </script>
    
    <h6 class="mb-3 mt-6">One-line</h6>
    <List items={listOneLine} />
    <h6 class="mb-3 mt-6">Two-line</h6>
    <List items={listTwoLines} />
    
    <h6 class="mb-3 mt-6">Dense</h6>
    <List dense items={listTwoLines} />
    Custom list element using let:slots
    I selected nothing.
    <script>
    	const menu = [
    		{ to: "/components/text-fields", text: 'Text fields' },
    		{ to: "/components/buttons", text: 'Buttons' },
    		{ to: "/components/selection-controls#checkboxes", text: 'Checkboxes' },
    		{ to: "/components/selection-controls#radio-buttons", text: 'Radio buttons' },
    		{ to: "/components/selection-controls#switches", text: 'Switches' },
    		{ to: "/components/lists", text: 'Lists' },
    	];
    </script>
    
    <List bind:value={selected} items={menu} dense navigation>
    	<li slot="item" let:item={item}>
    		<div
    			use:ripple
    			class="cursor-pointer p-4 border-alert-50 border my-2 border-solid" 
    			on:click={() => selected = item.text}
    			class:bg-alert-50={selected === item.text}
    		>
    			{selected === item.text ? '👌' : '🙅‍'} {item.text}
    		</div>
    	</li>
    </List>