@alfaomegasoftware/standard-ui v0.3.0-alpha.0
AlfaOmega Software Standard UI
A collection of components for standard UI use. The main idea behind this project is to create a standard library to be used in all of my projects to provide a consistent and extendable UI across all web sites. So be free to use it just for testing purposes, in your own projects or just for fun!.
Common (non-databound)
- ActionButton: customizable button with label, icon (built-in SVG icon or a custom image link) and icon-position prop
- Badge: shows a circle with a number between 1 and 99 or simply a circle in the top right of a component.
- Chip: chips to identify categories
- ErrorInfo: shows errors from a string or an array of strings (intended to be used primarily with databound components for validation purposes)
- ImageLoader: shows a progress indicator until the image is fully loaded.
- ListView: a list of items shown as icons or a list
- NotificationRibbon: a ribbon to indicate a success, critical, warning or info information to the user.
- StatusBar: a single bar to display information about menus, hovering items, etc.
- SVGIcon: an SVG icon identified by a name (trash, add, menu, etc.)
- TreeView: a list of items from a tree structure.
- TreeViewNode: a tree root node that can contain other nodes
- MenuBar: a horizontal bar with nested subitems.
- FloatingMenu: a floating menu with nested subitems.
- CircularProgressIndicator: a spinning progress indicator with an optional label.
Common (databound)
Components that can be bound to any object and a property, updating it dinamically. Handles null values throught a MVVM (Model-view View-Model) transform.
For use with forms or any object
- CheckBox: a three state checkbox (true, false and null but can be mapped to other values if needed)
- LookupComboBox: a combobox that has two data sources, one for databound (read/write) and other to display items. The items are displayed using a select element.
- RadioButtonGroup: similar to combobox but displays items using radio buttons.
- SlideInput: a simple slider for numeric values.
- TextBox: a textbox with free text editing and automatic casing.
- MaskedTextBox: a textbox with mask capabilities.
For use with multiple data
- DataGrid: displays a grid of items that is selectable. Provides a way to decide which columns to show when using in viewports with different @media sizes.
- DataTable: displays a table of items that is selectable.
Containers
Containers are components that can hold and arrange another components in different ways.
- AccordionPanel: a panel with slide down/up animation to hide or display content.
- Drawer: a drawer or panel that can appear from the left, top, right or bottom.
- GroupBox: a box with a label in the upper left corner.
- SplitView: a view that is horizontally or vertically splitted in half and resizable.
- TabContainer: scrollable multiple tabs to display different content on each tab panel.
Dialogs
Dialogs are windows that can be openned by calling an exposed function. That function is async and returns a promise that can be awaited until an answer (even null) is given.
- MessageDialog: provides a fast way to display a message to the user that doesn't need answer.
- ConfirmDialog: provides a fast way to display a confirmation message to the user and expects an answer via the value assigned to the buttons.
Base components
These are components used internally by others.
- DialogBase: provides all the functions needed by any dialog (open and close)
- ModalLayer: transitions into a layer that covers the whole screen allowing to display content and blocking interaction with the content behing that layer.
- ResponsiveRuler: provides a simple way to show when entering/leaving different screen widths testing responsiveness
Developer notes
- All CSS styles use Tailwind CSS and are prefixed with ao-sui-tw-
Changelog
0.3.0-alpha.0
Enhanced styling
- Added new styles (better tested)
- Added variant for indeterminate state of checkbox (fixed style)
- Merging utils for styles changed namespace
RadioButtonGroup: fixed vertical alignment
- ImageLoader: fixed not showing loader when changing src prop
StatusBar: moved to containers
Changed utility namespaces and redistributed functions
- Created documentation web site (available at AlfaOmega Software Documentation)
0.2.5-alpha.0
- Adopted well defined architecture for data handling, styling, documentation and testing of components.
- Added many new components
- Common(non databound): ActionButton, Badge,Chip, ErrorInfo, ImageLoader, ListView, NotificationRibbon, StatusBar, SVGIcon, TreeView, MenuBar, FloatingMenu
- Common (databound): CheckBox, LookupComboBox, RadioButtonGroup, SlideInput, TextBox, MaskedTextBox
- Containers: AccordionPanel, Drawer, GroupBox, SplitView, TabContainer
- Dialogs: MessageDialog, ConfirmDialog
- Base: DialogBase, ModalLayer
0.0.6-alpha.0
- Initial release
- First components and inital architecture design
10 months ago
10 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago