How to use Ant Design Tabs Component | Customize, Add, Delete and Disable Tabs | ReactJS Tutorial

Подписаться 6 тыс.

Просмотров 10 тыс.

50% 1

#reactjs #antd #tabs
This video focuses on
How to use Ant Design Tabs Component in ReactJS
How to customize antd Tabs name and their contents
How to add new tabs in antd tabs component
How to remove existing tabs in antd tabs component
How to make some tabs as disabled for users
How to make some tabs as removable and some not be removable using antd tabs component
How to change position of ant tabs and their contents to left, right, bottom and top
How to add icons in antd tab names
How to use useState reactjs hooks to update antd tabs list
How to use useReft reactjs hook to keep track of next unique tab index for tab addition
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For details on how to use ant designs icons and customize them, please go through this video. • How to use Ant Design ...
For details on how to use useRef react hook, please go through this video. • Learn React useRef Hoo...
For more details on ant-design, please visit its documentation at ant.design/com...
Happy Coding!

Опубликовано:

6 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 15

@aubdurrobanik4036 Год назад

Thank you for this great tutorial

@CodeWithAamir Год назад

Glad it was helpful!

@james6415 Год назад

Excuse me. Does the add and delete tab work with only html css and js?

@CodeWithAamir Год назад

Hi @james6415, Yes it should work but for that we need to code that ourselves using htmls/csss/js and here we achieved that using existing antd components. I hope you got the point, please let me know if you need any more information on this feature. Thanks

@carlosadrianespinozafermin9453 7 месяцев назад

With version 4.24.15 of Ant Design with tabs, how can I create arrows (left and right) to switch between tabs? Thx :D

@Salman-l5v6t Год назад

I’m able to change the color of the Tab text but not able to do so with the Tab underline, Can you please guide how to override the Tab underline color css?

@CodeWithAamir Год назад

Hi Salman, You can always override the colors of antd as I have explained in following video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-gpG967lkiJc.html For your use case its class name is "ant-tabs-ink-bar ant-tabs-ink-bar-animated" if you override this it should work. Please let me know if need any more information on this. Thanks

@hakan126 Год назад

Hi Aamir, i am using ant design tab menu. on second and third tabs i have form required fields. is there any way to move the users to the tab 2 and 3 if those fields are not field fill in. currently user have to click on tabs and check if it is filled out or not it is not user friendly.

@CodeWithAamir Год назад

Hi @Hakan, Yes you can navigate to any tab programmatically by setting the activeKey prop of tabs to the required tab number so it will be something like below. And suppose in 2nd and 3rd tabs you have Forms whose reference are form2, and form3, you can create them like const form2 = Form.useForm() So later on when user press any button like confirm or submit button on any of the tabs content you can check whether form2, and form3 are valid or have any errors, in case of error you can just set the appropriate activeKey tab number so suppose if form2 has error you set the activeKey tab number to suppose "2" and so on. You can check for form error using form2.getFieldsError() or form3.getFieldsError() respectively. Hope it will help you. Please let me know if you need any more help on these. Thank you!

@hakan126 Год назад

@CodeWithAamir in my case. I have one form throughout these whole tab systems but different fields only but using the same form.

@CodeWithAamir Год назад

Then its more simple you only need to create one reference of form and rest of the procedure will be same. Please let me know if you face any issues. Thanks

@Spadeads Год назад

TabPane is outdated in v5. Just want to mention that v5 is out now...

@CodeWithAamir Год назад

Thanks @Spade You are right v5 is out and my new videos are also using v5. I have added a couple of videos on new features introduced in v5. Thanks again!

@Spadeads Год назад

@@CodeWithAamir hey, thanks for quick reply. So this videos are already on your channel? I have an issue with adding custom styles to v5 tabs and basically don’t like approach with styling existing antd css classes…

@CodeWithAamir Год назад

Hi @Spade You may try creating a theme to style the components based on your needs if that helps instead of css classes, I have a video on how to create dynamic theme in antd v5 at below link, try if that makes sense ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-tgD-csfLNUs.html Thanks