This is the second day of my participation in the More text Challenge. For more details, see more text Challenge

The paper

Recently, You recommended a component library called Naiveui. I was curious to have a look at it, and found that it was really rich in components. I counted about 75, which is more than ANTD

Website address: www.naiveui.com/zh-CN/os-th…

Installation:

npm i -D naive-ui

According to the need to load

Import {NForm, NFormItem, NInput, NButton, NSpace} from “naive- UI “; Then use components to register

In the pit of

  1. The icon library uses Xicons, corresponding to the plug-in that needs to install the VUE version@vicons/ Corresponding icon libraryBut go to this websitewww.xicons.org/#/

Note: Xicons are divided into several types of libraries. If you use one of them, you need to install the plug-in corresponding to the library. For example, if you use Fluent and ionicon5, you need to install @vicons/ Fluent and @vicons/ionicons5. When searching for one library, the icon of the other library cannot be found

  1. Popconfirm in TSX format does not support defining slots between component labels, as shown below
<NPopconfirm > Confirm delete? {{trigger: () = > <NButton type='error' ghost>delete</NButton>
    }}
  </NPopconfirm>
Copy the code

Slot distribution can be implemented only through V-slots

<NPopconfirm  
    v-slots={{
      trigger: () = > <NButton type='error' ghost>delete</NButton>}} > Are you sure to delete? </NPopconfirm>Copy the code
  1. By default, the form does not provide a resetFields method. If you want to reset the value of the form, you need to manually reset it. The form component only provides a method to reset the error message

Refer to the author’s plan: github.com/TuSimple/na…

  1. If the table component wants to set a border to each column, set bordered to the border on the top layer of the table in the naiveui, similar to antD’s bordered property. To achieve bordered effect, you need to set a single property called :single-line=”false”, this property is not specified in the document.

  2. For form validation, rules must be an object like:

  const rules = {
    title: {
      required: true.message: "Please fill in the title of todo",}};Copy the code

For this rule to take effect, you need to set the path attribute, elem prop attribute, antD name attribute in the form-item

  1. If the table component wants to customize the render column, it can only use the JSX or render function. There is no way to provide template slot.

For specific reasons, please see github.com/TuSimple/na… Yes, I usually use more of the render function, but I think it would be better to support the slot format for better promotion. Also, when using Render, every row passed in is of the component library’s RowData type, as shown below:

render: (rowData: RowData, rowIndex: number): VNodeChild 
Copy the code

If you didn’t have this qualification, it would be nice to be able to use your own type, and each time you need to convert to your own type,

rowData as any as DataItem
Copy the code

If this is a bit of a hassle, antD can be used to limit itself to its own types like this:

 customRender: ({ record }: { record: DataItem }): JSX.Element
Copy the code

conclusion

After making a TODO, the overall effect is very good and smooth, but the form is not very smooth. The table can basically meet my usual use habits. The use experience is similar to ANTDV, and the effect is close to ANTDV, but there is a fresh style. For the time being, I still have to observe for a period of time. I still dare not apply it to a formal project. I can use it in my own project.

The code address

Github:github.com/nabaonan/to…