Writing in the front

In the golden autumn of October, iView 4.0 arrived as promised. But the headline is a bit informative, so let’s read the headline first.

IView author Aresn founded Beijing View Update Technology Co., Ltd. in 2019 and began to maintain iView and related software freely and full-time. View UI, the original iView, has been officially renamed View UI with a new Logo since October 2019. The iView author will be in the new repository github.com/view-design… Continue development of iView 4.0 and later versions, as well as maintenance work. The original repository iView author is no longer submitting content.

In short, we migrated GitHub to:

Github.com/view-design…

For the vast majority of users, the use of no impact, after the issue and PR please submit to the new warehouse, including Star of course!

Believe me, the new View UI component library will bring more power and a better experience. Since it is now being maintained full time, I can also assure you that there will be a version iteration every 1-2 weeks.

Update method

The core of version 4.0 is function enhancement and experience optimization, there is basically no incompatible, you can rest assured to upgrade, the main updates will be described one by one in the following paragraphs.

Update method view documentation:

Upgrade 4 x guide: https://www.iviewui.com/docs/update4

Major Updates

There are more than 50 updates in version 4.0.

UI

On the UI side, I changed the original base font size from 12px to 14px. As computer screens get bigger and higher resolution, a base size of 14px is more useful and inevitable.

Accordingly, many components will be slightly larger in size. For example, all Form components (Button, Select, Input, etc.) will be 40px (large), 32px (default), and 24px (small).

The height of a Button is changed from the padding to a fixed height.

The UI of many components has also been fine-tuned, such as Alert, Notice, Modal, Card, etc., to make the whole more unified and standardized.

Here is the size comparison of the two versions:

Added the List component List

List component is the most basic List display, can carry text, lists, pictures, paragraphs, often used for background data display page.

Global configuration

Added the Capture option to global Settings. You can set the default Capture mode for all components. The default value is true.

Capture is the default behavior of the browser. If capture is enabled, when a drop-down component (such as Select) is expanded, clicking on the external action will not respond immediately. Instead, the drop-down menu will be closed first and the action will be responded only after clicking again. If you do not need this feature, you can set Capture to false through global configuration.

Table form

The Table component is the one that people are most concerned about, and in 4.0 we offer more new features:

1. Drag the table header to adjust the column width

The “column” attribute resizable is added. When set to “True”, you can drag and drop the column width when you hover over the column divider at the top of the table:

2. Merge rows or columns

– Added the span-method property, which allows you to merge rows or columns. This property is configured to allow you to merge any row or column:

3. Table tail sum

Added the show-summary attribute, which when set to true displays a total row at the end of the table and automatically sums the values of that column. Also added are summary-method and sum-text from the algorithm or text that defines the total:

4. Default style has no outside border

Since 4.0, the Table component has no border by default, which is more concise unless the border attribute is set.

These features are great, and we will update more powerful features in the later versions of 4.x.

Form Form

1. Add attributesdisabled

If you want to disable all Form components in the Form component, such as Button, Input, Select, Radio, Checkbox, etc. (all Form components in the View UI are supported), you would have to disable each component individually. Now you just need to set the disabled property on the outer Form component:

2. Add attributeshide-required-mark

The Form Form is required in the validation rule, and the corresponding FormItem label is preceded by a red asterisk *. However, it is often unnecessary for a long Form to display the required *, so simply enable the hides-required mark attribute on the Form and do not display the required asterisk.

3. Add attributeslabel-colon

When this property is enabled, the FormItem label name is automatically followed by a colon:. No more configuration is required.

4. New events@on-validate

Any form item is triggered after verification, and the form item prop, verification status, and error message are returned.

Select the selector

1. Add attributesallow-createAnd events@on-create

In filterable mode, enable the allow-create attribute to create new entries by entering text in the input box. After entering a new entry, press enter to create a new entry.

2. Add properties to the Option componenttag

The Option component adds a new attribute, tag, which is displayed preferentially when multiple options are selected.

Select multiple, the selected label, by default, is displayed as label, but in some remote search scenarios, only label will not be enough, so the tag attribute is added.

The Input fields

1. Add attributesshow-word-limit

Enable the show-word-limit attribute to display the word count, with the maxLength attribute to limit the input length:

2. Add attributespassword

When type=”password”, enable the password attribute to toggle the display of hidden passwords:

The Slider sliding block

The new attributemarks

Set the property marks to display the tags. The key value of the marker should be within the closing interval [min, Max]. Tags can also be styled with style and label:

The Switch Switch

1. Switch the background color

Added properties true-color and false-color to customize the background color:

2. Block the switchover

A new property before-change, if set and returns a Promise, can prevent switching. This property is often used when data is requested during switching or when a Promise is returned. It can be used with loading.

The Progress bar

1. Percentage display

The new property “text-inside” is enabled to display percentages inside the progress bar:

2. Gradients

The stroke-color property can now be displayed as a gradient when set to an array. This feature is also supported by the Circle progress loop component:

Message Global prompt

With the background color

Add the “background” property. When enabled, the notification will display the background color:

Radio/Checkbox multiple options

Added the border attribute to support the border style:

Page paging

Added the disabled attribute to disable the paging component:

There are many updates for other components:

The Badge logo for

  • The new attributecolor, you can set more status point color and custom color.
  • New slotcount, you can customize the display content of the corner (remove the corner background), and the value count will be invalid.
  • New slottext, you can customize the content displayed in the corner (with the corner background), and the value count will be invalid. You can also customize the text content in status point mode.

Tabs TAB

  • If there are too many tabs, you can use the mouse to scroll over the tabs.
  • If there are too many tabs, the left and right arrow distances increase.

AutoComplete

  • Placement attribute supports overall direction.
  • Fixed an issue where the input box remained focused after clicking outside the component to close the float window.
  • Fixed an issue with the display profile in disabled mode.

Card Card

  • The new attributeto,target,replace,append, supports skip links.

The Tag label

  • The new attributesize, you can set different sizes, the optional values are large, medium, default

Avatar picture

  • The size attribute size supports specific values.

Article Steps Steps

  • The Step component adds a named slottitle,content 和 icon.
  • Steps changed to the Flex layout and fixed the incorrect width of the last column.

Other fixes:

  • Fix the issue where Button, Menu and other components with jump function jump error on vue-Router 3.1+.

Incompatible update

  • If disabled is enabled for DropdownItem, the @on-click event is no longer triggered by Dropdown.
  • The Table default style no longer has an outer border.

Afterword.

This wave of updates is very powerful!

IView has been in existence for more than 3 years, and today the name of View UI is a new start. I know there are different views on our commercialization in the market, but the original intention of View UI will never change. It will always be free and open source, and it will always be updated, bringing expectations and surprises to everyone.

However, in order to better serve enterprise users and to survive my company, commercial products are inevitable. If View UI saves your company or team money, improves development efficiency, or wants to use richer higher-order components, a powerful set of middle and back end front-end solutions, welcome to buy our professional version of View UI Pro and Admin Pro products.

Finally, attach the address of professional version, you can experience online:

The Admin Pro is introduced: https://pro.iviewui.com/admin-pro

The Admin Pro online preview: https://adminpro.iviewui.com

View the UI Pro:https://pro.iviewui.com/pro