❤
npm
Sign UpSign In

This package has been deprecated

Author message:

no longer supported

vui-list

1.1.0 • Public • Published

vui-list

Bower version NPM version Build status Dependency Status

This component contains SASS mixins and CSS that you can use to style lists.

There are three styles of lists.

With Separators Without Separators Compact
screenshot of list with separators screenshot of list without separators screenshot of compact list

Installation

vui-list can be installed from Bower:

bower install vui-list

Or alternatively from NPM:

npm install vui-list

Depending on which installation method you choose, use that path when doing the SASS import:

@import 'bower_components/vui-list/list.scss';
@import 'bower_components/vui-list/list-item.scss';
// or... 
@import "node_modules/vui-list/list.scss";
@import "node_modules/vui-list/list-item.scss";

Usage

A list can be either a <ol> or <ul> HTML element containing any number of <li> elements. The default list style is with separators.

HTML:

<ol>
    <li>Gold</li>
    <li>Silver</li>
    <li>Bronze</li>
</ol>

SCSS:

ol {
    @include vui-list;
}

To style a list with no separators or a compact list, add the appropriate mixin.

HTML:

<ol>
    <li>First Unseparated Item</li>
    <li>Last Unseparated Item</li>
</ol>
 
<ul>
    <li>Compact Item A</li>
    <li>Compact Item B</li>
<ul>
ol {
    @include vui-list;
    @include vui-list-no-separator;
}
 
ul {
    @include vui-list;
    @include vui-list-compact;
}

To style an individual list item as active, selected, or both, add the appropriate mixin to the list item.

HTML:

<ol>
    <li class="selected">Gold</li>
    <li class="active">Silver</li>
    <li class="selected-active">Bronze</li>
</ol>

SCSS:

.selected {
    @include vui-list-item-selected;
}
.active {
    @include vui-list-item-active;
}
.selected-active {
    @include vui-list-item-selected-active;
}

For further information on this component and other VUI components, see the docs at ui.valence.d2l.com.

Coding styles

See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.

Readme

Keywords

Package Sidebar

Install

npm i vui-list

Repository

github.com/Brightspace/valence-ui-list

Homepage

github.com/Brightspace/valence-ui-list

Weekly Downloads

23

Version

1.1.0

License

Apache-2.0

Last publish

Collaborators

  • d2l-travis-deploy
Try on RunKit
Report malware