Back to Consul

csv-list

ui/packages/consul-ui/app/components/csv-list/README.mdx

1.22.7829 B
Original Source

csv-list

Easily create comma separated lists via CSS. Also contains a %csv if you don't want to use the %csv-lists display and only apply the commas to specific DOM elements.

hbs
<p>
  <span>one</span>
  <span>two</span>
  <span>three</span>
  <span>four</span>
  <span>five</span>
  <span>six</span>
</p>

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

<ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ol>
css
  p, ul {
    @extend %csv-list;
  }
  ol li {
    @extend %csv;
  }
  ol {
    list-style-type: none;
  }

Properties

PropertyTypeDefaultDescription
--csv-list-separatorstring,The separator to use between the list items.