A <word-list> is a container view for rendering a sequence of <word-view>s or <word-editors>s.
Notice that the array of Word objects passed in as data is rendered exactly as passed. Sorting and searching is handled in other components such as a <LexiconView> or <TextView>. <word-list> data is typically edited inside of a <LexiconEditor> or a <TextEditor>.
<word-list id=basic></word-list>
Which renders like this:
In this example, data is fetched and set directly via Javascript. However, this is usually handled internally via a <LexiconView>, <LexiconEditor>, <TextView>, or <TextEditor>.
Notice that the <word-view>s inside a <word-list> are rendered as block-level elements by default, with the contents of those views (<span>s containing form and gloss content, usually) being rendered as their default inline manner.
This is also the styling which is used when a <word-list is rendered inside a <lexicon-view>.
Inside a <sentence-view>, however, <word-views are set to render as inline elements, with their constituent spans set to render as block-level elements:
<word-list>s also have an “editing” mode, which is different primarily in that each word is rendered inside a <word-editor> instead of a <word-view>. Here is an example with the same data from the previous example:
Which renders like this:
set .data(words)Set the view’s data. Overwrites current data and re-renders the view.
get .dataGet the view’s data as an array of objects. For export purposes it is better to access this data via a <LexiconView, as metadata will be attached.
It has a .data getter and setter, which accepts an array of Word objects.
The editable attribute, when present, causes the word-list to render <word-editor>s instead of <word-view>s.
None