Selectable nested list items with platform specific markup
The desktop version of this component supports only 2 levels which are shown side by side.
+select-list('Select a foo:', 'Select a bar:')
+select-list-group(1).has-sep
ul
each level1 in [1, 2, 3, 4]
+select-list-item()
a(href='#item-' + level1)
+icon('lg', 'arrow-r')
img(src='//placehold.it/20x20/acf').ui-sprite
| Item #{level1}
if level1 < 4
+select-list-group(2).has-sep
ul
each level2 in [1, 2, 3, 4, 5]
+select-list-item()
a(href='#item-' + level1 + '-' + level2)
+icon('lg', 'arrow-r').is-inline
| Item #{level1}.#{level2}
The mobile version of this component supports 3 levels which are shown in a tree structure.
+select-list('Select a foo:', 'Select a bar:')
+select-list-group(1).has-sub.has-sep
ul
each level1 in [1, 2, 3, 4]
+select-list-item()(class=(level1 === 3 ? 'is-active' : ''))
a(href='#item-' + level1)
+icon('lg', 'add')
+icon('lg', 'minus')
+sprite('web', 'add-fade').is-control
+sprite('web', 'minus-fade').is-control
| Item #{level1}
+select-list-group(2).has-sub
ul
each level2 in [1, 2, 3]
+select-list-item()
a(href='#item-' + level1 + '-' + level2)
+icon('lg', 'add')
+icon('lg', 'minus')
+sprite('web', 'add-fade').is-control
+sprite('web', 'minus-fade').is-control
img(src='//placehold.it/20x20/fac').ui-sprite
| Item #{level1}.#{level2}
+select-list-group(3)
ul
each level3 in [1, 2, 3, 4, 5]
+select-list-item()
a(href='#item-' + level1 + '-' + level2 + '-' + level3)
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade').is-control
| Item #{level1}.#{level2}.#{level3}
+select-list-item()
a(href='#item-' + level1 + '-4')
+icon('lg', 'arrow-r')
+sprite('web', 'arrow-r-fade').is-control
img(src='//placehold.it/20x20/fac').ui-sprite
| Item #{level1}.4
The full desktop version of this component supports only 2 levels which are shown side by side and has multiple extra elements in the content.
+select-list('Select a foo:', 'Select a bar within <span></span>:')
+select-list-group(1).has-sep
p Popular Items
ul
each level1 in [1, 2, 3, 4, 5, 6, 7, 8, 9]
+select-list-item()(class=(level1 === 3 ? 'is-active' : ''))
a(href='#item-' + level1)
+icon('lg', 'arrow-r')
| Item #{level1}
+select-list-group(2).has-sep
p Popular Items #{level1}
ul
each level2 in [1, 2, 3, 4, 5]
+select-list-item()
a(href='#item-' + level1 + '-' + level2)
+icon('lg', 'arrow-r').is-inline
| Item #{level1}.#{level2}
- var options = {}
each level2 in [6, 7, 8, 9]
- options['foo-' + level2] = 'More ' + level1 + '.' + level2
+select('more-' + level1, null, options, 'Select more')