📧Ding~You have a copy of the new version of DevUI 12 to be checked~😋

DevUI is an open source front-end solution for enterprise mid- and back-end products. Its design values are based on the three concepts of "simple", "immersion", and "flexible" combining nature and humanities. It aims to be designers and front-end developers Provides a standard design system and meets various landing scenarios. It is an enterprise-level out-of-the-box product. If you are developing ToB tool products, DevUI will be a very good choice!

DevUI is an DevUI Design design specification. It was open sourced in 2019 and has been maintained for 2 years. It has accumulated 61 components, many of which are characteristic components that the industry component library does not have.

I previewed it twice before, and today the DevUI 12 version is finally here! Upgraded to the latest Angular 12 version, let's take a look at the new features!

DevUI 12: Full support for the new Angular Ivy engine

New features

1. Standardize the component spacing and change it to a multiple of 4 for better compatibility with the display effect after scaling calculations
2. Select supports multi-select mode, press Enter to select/deselect
3. TreeSelect supports customizing the selected item template, and supports the control of the selected relationship between parent and child nodes by setting checkRelation
4. Upload supports selecting a folder to upload, and the file display is retained after a single file is successfully uploaded
5. Cascader supports setting appendTobody
6. After Button optimizes the width, the text is too long and exceeds the display range

Bug fix

1. TreeSelect fixes the problem that nodes cannot be deleted after setting treeNodeIdKey in multi-select mode
2. DataTable fixes the problem that it is easy to lose focus during drag and drop
3. dragDrop fixes the problem that placeholder has no color in scenes without theme settings
4. Fixed cursor positioning and other issues under Editorx Chinese input method
5. Tree fixes the problem that calling the checkAllNodes method cannot change the half-selected state
6. TagsInput fixes the problem that the tags are too long and cannot be deleted

Complete Changelog: Version 12.0.0 Changelog

Featured components show

Datepicker Pro date picker

Component link: https://devui.design/components/zh-cn/datepickerPro/

Features introduction

The Datepicker Pro component draws on the mobile terminal, uses the mouse wheel to select the operating range, and attaches precise location clicks to reduce the number of user clicks and shorten the user's operation path for time selection.

Function details

1. The component provides single selection/range types, supports date/week/month/year modes, supports various custom template extensions, and fully meets complex business scenarios
2. Provide calendar panel form, users can customize and embed various types of scenes, flexible use

For a more detailed introduction, please refer to our previous article:

DevUI 11.4.0 released: DatePickerPro is coming

Category Search

Component link: https://devui.design/components/zh-cn/category-search/

Features introduction

The Category Search component aggregates frequently used search filtering content into one component to form an operation model that conforms to search filtering, reducing the presentation of redundant search filtering conditions on the page, thereby reducing user understanding and usage costs

Function details

The component provides a multi-scene menu mode, and the display content of the menu is different in different operation modes:

1. Provide category information by default
2. When there is a category selected item, show the option details of the category
3. There is a search text in the input box, showing the search category that matches the text or the options that meet the conditions under the category

The component provides one-click clearing, filter saving, and list display with too many categories, which is compatible with various complex business scenarios to the greatest extent

For a more detailed introduction, please refer to our previous article:

CategorySearch category search component first experience

Quadrant Diagram Quadrant Diagram

Component link: https://devui.design/components/zh-cn/quadrant-diagram/

Features introduction

Quadrant diagrams are often used to plan the priority of events, to analyze and process the degree of deviation of data from expectations, and so on. The components are dragged and dropped to realize the position control and information presentation of the target.

Function details

1. The component can easily realize the movement of the label through the linkage with the drag and drop and the coordinate following the positioning of the line, which is convenient for the user to change the data and control the development of the item;
2. The component has a built-in functional area, which provides the functions of zooming in and zooming out the label and the full screen of the quadrant map;
3. Flexible style customization capabilities, users can flexibly match according to their own requirements.

you how to use the quadrant diagram component

Gantt Gantt chart

Component link: https://devui.design/components/zh-cn/gantt/

Features introduction

Gantt chart is often used to track and manage the progress of multiple transactions. Each project is displayed in the form of a bar chart, and the internal relationship between the progress and other time-related progress is displayed in a visual form.

Function details

1. It is presented in basic graphic form, showing the internal relationship between each item in the time dimension, and supports three different forms of bar display, bar, bar-parent, and milestone;
2. Multiple interaction support: item drag and drop, progress update, time range update, quick jump, view change, full screen, etc.;
3. Match with table: It can be used with datatable to present and manage richer dimensional information.

Thanks

Thanks to the developers who helped DevUI component library, I wish you all a happy use~

Notice

DevUI Admin 2.0 version will also be released on the 17th of this month, providing a magical black technology, let us wait and see!

Everyone is also welcome to participate in the development of the DevUI ecosystem. Currently, the DevUI open source ecosystem mainly includes the following products:

• NG DevUI : Angular component library based on DevUI Design design specification
• DevUI Icons : Font icon library used with DevUI component library
• NG DevUI Admin : out-of-the-box enterprise-level mid- and back-end management system
• DevUI Helper : A VSCode plug-in, DevUI code assistant, brings you a silky code completion experience.
• Vue DevUI : Vue3 version of DevUI component library, support PC/Mobile (currently in incubation, welcome to participate in the construction~)