preface

🎅 Christmas is coming, I wish the users of the nuggets a merry Christmas! Our iView open source component library has also been released for Christmas. Check out the update log page for Easter eggs at iviewui.com. After Posting a number of technical articles about iView in Nuggets, we have received a lot of support from developers in the community and GitHub. We are also determined to make iView a quality product and plan to complete the following three contents in early 2017:

  • Support for Vue 2.0 (already driven crazy by this issue)
  • Support for multiple languages
  • Add English documents

First, let’s talk about the original intention of writing this article. Recently, I just used iView to develop a company project (in fact, it is a fast reconstruction). I completed UI and interactive part in 3 days, thanks to the rich basic component support of iView. So take this opportunity to share some of your experiences and tips as a developer using iView.

Making address:github.com/iview/iview

What is the basis for rapid development of a project?

Below is a partial screenshot of the project:





A complete CSS Layout foundation and Grid (Layout) system

Page layout is often one of the biggest headaches for developers, especially if CSS fundamentals are poor, let alone responsive. While iView is a component library, it is also a complete solution for web development. Reset.css is used as the formatting base for iView, so just import the iView style and you can start writing code. At the same time, iView also helps you initialize the font, size, color, etc. The document also has color recommendations, generally according to the specification, the resulting page is very neat and beautiful. If you have used Bootstrap, you should be familiar with its Grid system, because it is the most commonly used web page Layout, especially for back-end development. Grid (Layout) system can solve most of the Layout problems when you do not know how to multi-column Layout, responsive Layout. IView uses a 24-grid system to divide a column into up to 24 sections. You can combine any column as long as the total does not exceed 24. If the total does not exceed 24, lines will be folded automatically. Grid components are flex supported, so the following layouts can be easily implemented:



Use the navigation

There are several common page layouts for most background projects:

  • Fixed main navigation and secondary navigation at the top (if there is tertiary navigation, it can be pulled down to expand), as shown in the figure:


  • Top navigation and left navigation work together, as shown in the picture:


  • Use side navigation as the main navigation, as shown below:



    IView navigation menu componentMenuProvides horizontal and vertical modes, as well as primary, light, dark three themes, to meet your different layout mode, and is very simple to use, the UI is also very beautiful.

    Use dropdown menus wisely

    IView provides a basic drop-down menu component, as shown below:


    The reason for the clever use of drop-down menus is that when the component was first developed, it addressed the requirements of the ordinary drop-down selection shown in the picture. In the actual project, it is compatible with almost all drop-down requirements, which I did not expect. For example, it can be used like this:


Inside is a slot that can theoretically hold all of the DOM content, which can be achieved with half the effort by using drop-down components.

Forms-class components

Form components, such as input boxes, radio, multiple, cascading selections, switches, tables, SELECT selections, date selections, and so on, are at the heart of completing business logic and interaction. IView can basically meet the needs of common form classes, some can also be composed of their own. It is worth introducing the Table Table component. There are two kinds of things, Table and Chart, which are indispensable to the background. IView Table in the realization of ordinary Table data display on the basis of additional provides a lot of functions, such as fixed Table header, column, sorting, filtering, and the component library on the market are not supported by the function — export. CSV file, you can export raw data, sorting filtered data, and even custom content of the data, The key is to support all browsers, including Internet explorer 9, can click here to link online experience www.iviewui.com/components/… .


There’s always an icon for you

Found that many projects, less than a last resort, no longer want to use pictures, IconFONT has become the mainstream, vector, convenient, play the function of embellicating the page. IView uses the open source project IonIcons, which provides 700+ commonly used ICONS. Of these, there must be one that will meet your needs. In addition, the document has also made a special optimization of Icon component. First of all, there are so many ICONS, you can’t always find them one by one, and when to find them, so it provides a search function, and it supports semantic search, such as search keyword success:


conclusion

The progress of a project can’t be achieved by just working overtime. Smart product managers and developers will choose a set of feature-rich component libraries as the company standard to develop, greatly reducing the work of building wheels. At the end of the article, some other excellent component libraries found in the development of iView project are sorted out and recommended to everyone:

  • AntDesign – React
  • vue-beauty
  • N3
  • Quasar Framework
  • Element
  • VUM
  • Vux

Did this article help you? Welcome to join the front End learning Group wechat group: