cv-ember-ui
v0.0.1
Published
This library contains a collection of reusable UI components that you can use in your application and extensions to create a consistent and cohesive user interface.
Downloads
4
Readme
🛠️ cv ember ui
This library contains a collection of reusable UI components that you can use in your application and extensions to create a consistent and cohesive user interface.
Installation
npm install cv-ember-ui
Components
The following components are included in the Ember UI Components library:
popover
A component for displaying content in a popup box that appears when the user clicks on an element.tooltip
A component for displaying a brief description or explanation of an element when the user hovers over it.
date-filter
: A component for filtering a list of data based on a date range.model-filter
: A component for filtering a list of data based on a model.multi-option-filter
:A component for filtering a list of data based on multiple options.select-filter
: A component for filtering a list of data based on a single selected option.string-filter
: A component for filtering a list of data based on a search string.
filters-picker-button
: A button component for opening and closing a dropdown list of filters.
dropdown-header-item
: A component for displaying a single item in a dropdown list in the header.dark-mode-toggle
: A toggle button component for switching between light and dark mode.dropdown
: A component for displaying a dropdown.section-body
: A component for displaying the body of a section.section-container
: A container component for a section..section-header
: A component for displaying the header of a section.sidebar-item
: A component for displaying a single item in a sidebar.sidebar-panel
: A component for displaying a panel in a sidebar.layout-container
: A container component for the layout.header
: A component for displaying the header of the page.main
: A component for displaying the main content of the page.mobile-navbar
: A component for displaying the navigation bar on mobile devices.section
: A component for displaying a section on the page.sidebar
: A component for displaying a sidebar on the page.
modal-body-container
: A component that represents the body content of a modal dialog.modal-header-close.md
: A component that represents the body content of a modal dialog.modal-header-title.md
: A component that represents the body content of a modal dialog.modal-layout-alert
: A default template for a modal dialog that includes a header, body, and footer.modal-layout-bulk-action
: A component that represents the entire modal dialog, including the header, body, and footer.modal-layout-confirm
: A component that represents the footer content of a modal dialog.modal-layout-loading
: A component that represents the header content of a modal dialog.modal-layout-option-prompt
: A component that represents the title and buttons in the header of a modal dialog.modal-layout-process
: A component that represents the title and buttons in the header of a modal dialog.modal-default
: A default template for a modal dialog that includes a header, body, and footer.modal-dialog
: A component that represents the entire modal dialog, including the header, body, and footer.modal-footer
: A component that represents the footer content of a modal dialog.modal-header
: A component that represents the header content of a modal dialog.modal-title-with-buttons
: A component that represents the title and buttons in the header of a modal dialog.
options
: A component for displaying content in a popup box that appears when the user clicks on an element.spinner
: A component for displaying content in a popup box that appears when the user clicks on an element.
money-input/currency-dropdown
: A component that renders a dropdown menu to select a currency for the money-input component.money-input/currency-handle:
: AA component that displays the selected currency for the money-input component.
overlay-body
: A component that renders the body content for an overlay.overlay-footer
: A component that renders the footer content for an overlay.overlay-header
: A component that renders the header content for an overlay.
table-cell-anchor
: A component that renders an anchor element within a table cell.table-cell-base
: A base component for table cells.table-cell-checkbox
: A component that renders a checkbox within a table cell.table-cell-country
: A component that renders a country flag within a table cell.table-cell-dropdown
: A component that renders a dropdown menu within a table cell.table-cell-link-to
: A component that renders a link within a table cell.table-cell-media-name
: A component that renders the name of a media item within a table cell.
app-container
: A component for the main application container.badge
: A badge component.button
: A button component.checkbox
: A checkbox component.click-to-copy
: A component for copying text on click.click-to-reveal
: A component for revealing text on click.content-panel
: A component that can be used to display content that can be toggled open or closed.date-picker
: A component for selecting a date.date-time-input
: A component for selecting a date and time.dropdown-button
: A button component that opens a dropdown menu.extensions-list
: A component for displaying a list of file extensions.fetch-select
: A component for selecting an item from a fetched list.file-upload
: : A component for uploading files.filters-picker
: A component for selecting filters.floating
: A component for creating a floating element.image
: A component for displaying an image.info-block
: A component for selecting a country.input-group
: : A component that groups together multiple input components, such as a text input and a dropdown menu, and provides additional functionality such as label and error handling.input-info
: A component that displays additional information about an input field, such as helper text or validation errors..input-label
: A component that displays a label for an input field.modal
: A component that displays a modal window, which is a pop-up dialog box that requires user interaction before the user can return to the main application..modals-container
: A component that manages the display of multiple modals, ensuring that only one is visible at a time.model-select-multiple
: A component that allows the user to select multiple items from a list of models.model-select
: A component that allows the user to select a single item from a list of models.money-input
: A component that allows the user to input monetary values, with additional functionality such as currency selection.multi-select
: A component that allows the user to select multiple items from a list.overlay
: A component that displays an overlay, which is a semi-transparent layer that covers the main application and is typically used to provide a modal-like user interface.pagination
: A component that displays pagination controls, allowing the user to navigate through a large list of items.phone-input
: A component that allows the user to input phone numbers, with additional functionality such as international formatting.scrollable
: A component that provides a scrollable container for other components, allowing the user to scroll through a large amount of content.select
: A component that allows the user to select a single item from a list of options.spinner
: A component that displays a spinner, which is typically used to indicate that a task is in progress.table
: A component that displays tabular data in a scrollable and sortable format, with support for pagination and filtering.toggle
: A component that displays a toggle switch, allowing the user to toggle a boolean value.upload-button
: A component that displays a button for uploading files, with additional functionality such as drag-and-drop support.toggle
: A component that allows the user to select which columns to display in a table.
We are continually adding new components, so be sure to check back for updates!