The attributes passed into the component.
The root DOM element for the component.
ProtecteditemWidth of each item, by index, captured while all of them were on the row. Measuring once and reusing avoids feeding the widths of an already collapsed row back into the next calculation.
Protected OptionalobserverProtected OptionalonClass component state that is persisted between redraws.
Updating this will not automatically trigger a redraw, unlike other frameworks.
This is different to Vnode state, which is always an instance of your class component.
This is undefined by default.
ProtectedtoggleProtectedvisibleHow many leading items are shown in the row. null means "not measured
yet", during which everything renders so the widths can be read.
Returns a jQuery object for this component's element. If you pass in a selector string, this method will return a jQuery object, using the current element as its buffer.
For example, calling component.$('li') will return a jQuery object
containing all of the li elements inside the DOM element of this
component.
Optionalselector: stringa jQuery-compatible selector string
the jQuery object for the DOM node
ProtectedavailableHow much room the row could occupy, rather than how much it currently does.
The list sits in a flex parent that shrink-wraps its contents, so once items have been collapsed the element reports the narrower width it took because of the collapse. Measuring that would be circular — the row could never grow back. What matters is the gap to whatever sits beside it.
ProtectedouterProtectedrecalculateWork out how many items fit, and redraw if that has changed.
StaticcomponentConvenience method to attach a component without JSX.
Has the same effect as calling m(THIS_CLASS, attrs, children).
StaticinitInitialize the component's attrs.
This can be used to assign default values for missing, optional attrs.
Lays out a list of items on a single row, moving those that do not fit into a dropdown at the end of the row.
The list is rendered in full and measured after each paint, so item widths come from the real laid-out DOM rather than an estimate. That keeps the result correct whatever an item happens to contain — an icon, a long label, a translated string, or something an extension added.