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

ContentModify point
Navigation dimensionsTop navigation height changed from AntDesign Pro 64px to 48px - Side navigation width changed from AntDesign Pro 256px to 208px
Navigation layout modeAdd 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 optimizationGlobal 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 optimizationAdd 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 ModeTop 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.

image.png

Custom secondary actions

Add custom assists, pull filter below.

image.png

The menu name is too long, the abbreviation is displayed, and hover appears with all the tooltip prompts.

image.png

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.

image.png

Color version

Continue to offer dark, bright white versions, which change from #001529 to OneX with the same dark #1F293D.

image.png

Search interaction optimization

Search activates style modification, opens search squeeze menu, turns search back to normal.

image.png

Utility Hover effect optimization

Utility Hover changed from blue background to dark black #161726.

image.png

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.

image.png

Demo

image.png