Refle Widgets | Library for flexible and customisable React widgets.

Components:

• Sidebar - a vertical sidebar, that provides various sorts and draggable re-ordering.
• Card - complimentary component for sidebar. Introduces properties to allow different sorts.

Styles:

• Use import 'refle-widgets/dist/styles.css'; to include all styles.

Sidebar

Root HTML Element - <aside>

Properties

• sort: CardSorts

| CardSorts | Description | Required Property | | :-----------: | ----------- | :-----------: | | Custom | Draggable cards (default) | n/a | | Alpha | Alphanumerical ascending | label | | AlphaDesc | Alphanumerical descending | label | | TimeCreated | DateTime ascending | timecreated | | TimeCreatedDesc | DateTime desceding | timecreated |

:warning: Please ensure your component inside Sidebar contains case-sensitive properties defined above. Alternatively, you can use Card component to wrap your elements.

Card

Root HTML Element - <button>

Properties

• ICardSortable - properties inherited from ICardSortable.
• classnameshadow : string - className for shallow clone styling.
• shadow : bool - if true, enables a shallow clone that gets drawn in the candidate space when a card is dragged and re-ordered.