- AntDesign Pro Modification Points
- The navigation menu section
- Structure and size
- Custom secondary actions
- Menus are too long for too many interactions
- Top navigation interaction section
- Structure and size
- Color version
- Search interaction optimization
- Utility Hover effect optimization
- Mixed Menu New Mode
- Demo
Layout New Style
With the release of the official version of antd, layout will also usher in a new design style. The new style will still focus on technology, optimizing the size and experience details on the basis of the original, designing more concisely and matching more business scenarios.
AntDesign Pro Modification Points
| Content | Modify point |
|---|---|
| Navigation dimensions | Top navigation height changed from AntDesign Pro 64px to 48px - Side navigation width changed from AntDesign Pro 256px to 208px |
| Navigation layout mode | Add a hybrid mode based on the original one-sided edge or top navigation mode, and align it with the techUI's existing mode. |
| Top navigation detail optimization | Global search style modification, interactive modification with the top menu, open the search squeeze menu, turn off the search back to normal state - utility area Hover color modification, from blue to dark black #161726 |
| Side navigation detail optimization | Add custom accessibility actions to side navigation, pull filtering below - side navigation expands the collection icon modification, places at the bottom of side navigation - increases menu name is too long, menu height small information hidden interaction default to fixed mode |
| Mixed Mode | Top navigation provides custom top navigation that matches the original, but adds a perforated top bar. |
The navigation menu section
Structure and size
Side navigation width changed from 256px to 208px, navigation content and front and rear margins changed to 16px.
Custom secondary actions
Add custom assists, pull filter below.
Menus are too long for too many interactions
The menu name is too long, the abbreviation is displayed, and hover appears with all the tooltip prompts.
When the menu name is too large or folds, the top title product title area, the auxiliary operating area and the bottom universal operating area are fixed, and the middle function menu area is sliding. Shadow splits appear in the upper and lower areas.
Top navigation interaction section
Changes to interaction and navigation are the biggest changes this time.
Structure and size
Top navigation height changed from 64px to 48px.
Color version
Continue to offer dark, bright white versions, which change from #001529 to OneX with the same dark #1F293D.
Search interaction optimization
Search activates style modification, opens search squeeze menu, turns search back to normal.
Utility Hover effect optimization
Utility Hover changed from blue background to dark black #161726.
Mixed Menu New Mode
Top Global Navigation plus Side Navigation Blend mode, which supports Ant Design Pro's existing navigation mode to switch to this mode.
Demo
