DevUI are products for enterprises in the background of open source front solution, its design values based on “to Jane”, “immersion”, “flexible” three kinds of the idea of combining nature and culture, designer, front-end developer is dedicated to provide you with the design of the standard system, and meet all kinds of ground scene, is an enterprise out of the box products. If you are developing ToB tools, DevUI is a great choice!
DevUI is an Angular component library based on the DevUI Design specification. It started in 2019 and has been maintained for two years with 61 components, many of which are not featured in industry component libraries.
We’ve already announced it twice, but today DevUI 12 is finally here! With the latest Angular 12 release, let’s take a look at what’s new!
DevUI 12: Full support for the new Angular Ivy engine
New features
- Normalize the component spacing and change it to a multiple of 4 to be more compatible with scaling and other calculated display effects
- Select Press Enter to Select or deselect in multiple selection mode
- TreeSelect supports customizing the selected item template and controlling the parent node selection relationship by setting checkRelation
- Upload Supports select folder Upload. After a single file is uploaded successfully, the file is retained
- Cascader supports setting appendTobody
- Button Text is too long to display after optimizing the width
Bug fix
- TreeSelect fixed an issue where a node could not be deleted after setting treeNodeIdKey in multi-select mode
- DataTable fixed an issue where it was easy to lose focus when dragging
- DragDrop repair without the placeholder theme set the scene without color
- Fixed problems such as cursor positioning in Editorx Chinese input method
- Tree fixed an issue where calling the checkAllNodes method could not change the half-selected state
- TagsInput Fixed a problem where the tag was too long and could not be deleted
Full Changelog: Version 12.0.0 Changelog
Featured component presentation
Datepicker Pro date selector
Component link: devui.design/ Components /…
Features introduced
Datepicker Pro component draws on the mobile terminal, uses the mouse wheel to select the operation range, and adds precise position to click, reducing the number of clicks and shortening the user’s operation path for time selection.
Functional details
- The component provides radio/range types, supports the date/week/month/year mode, and supports various customized template extensions to fully meet complex business scenarios
- Provides the calendar panel, users can customize the embedded scenarios, flexible use
For a more detailed introduction, see our previous article:
DevUI 11.4.0 release: DatePickerPro is here
Category Search Searches by Category
Component link: devui.design/ Components /…
Features introduced
The Category Search component aggregates the frequently used Search filter content into one component to form an operation model that complies with the Search filter. It reduces the display of redundant Search filter conditions on the page, and thus reduces the understanding and use cost of users
Functional details
The component provides multiple scene menu modes. Different operation modes display different contents of the menu:
- Category information is provided by default
- If a category is selected, the option details of the category are displayed
- Search text exists in the input box. Search categories that match the text or options that match the conditions under the categories are displayed
The component provides one-click clearing, filter saving, and list display of too many categories, which is compatible with various complex business scenarios to the maximum extent
For a more detailed introduction, see our previous article:
CategorySearch first experience of CategorySearch component
Quadrant Diagram
Component link: devui.design/ Components /…
Features introduced
Quadrant charts are often used to prioritize events, analyze how far processing data deviates from expectations, and so on. Component through drag and drop, to achieve the target position control and information presentation.
Functional details
- Through the linkage of the component with the drag and drop, the coordinates follow the positioning of the line, which can easily realize the movement of the label, facilitate the user to change the data and control the development of matters;
- The component has built-in function area, which provides the function of enlarging and shrinking the label and the full screen function of quadrant diagram.
- Flexible style customization ability, users can flexibly match according to their own demands.
How to use quadrant diagram components
Gantt Gantt chart
Component link: devui.design/ Components /…
Features introduced
The Gantt chart is often used to track and manage the progress of multiple transactions. Each project is shown in the form of a bar chart, and the internal relationship between progress and other time-related progress is shown in a visual form.
Functional details
- It is presented in the form of basic graphics, showing the internal connection between each item in the time dimension, and supporting bar, bar-parent, and milestone in three different forms of bar display.
- Multiple interactive support: item drag and drop, progress update, time range update, quick jump, view change, full screen, etc.
- Collocation with table: It can be used with datatable to present and manage richer dimensional information.
Thank you
Thank you for helping DevUI component library developers, wish you a happy use ~
trailer
DevUI Admin 2.0 will also be released on The 17th of this month, providing a magical piece of dark technology, let’s wait and see!
You are also welcome to participate in the construction of DevUI ecology. Currently, DevUI open source ecology mainly has the following products:
- NG DevUI: Angular component library based on the DevUI Design specification
- DevUI Icons: a library of font Icons used in conjunction with the DevUI component library
- NG DevUI Admin: Out of the box enterprise in the background management system
- DevUI Helper: A VSCode plugin, DevUI Helper, brings you a smooth code completion experience.
- Vue DevUI: VuE3 version of DevUI component library, support PC/Mobile (currently under incubation, welcome to participate in the construction ~)