diff --git a/.gitignore b/.gitignore index fbcac157cc..0b26d10b04 100644 --- a/.gitignore +++ b/.gitignore @@ -90,3 +90,4 @@ src/core-temp # tests snapshots diff components/**/__tests__/snapshots/__diff__/** +cypress/screenshots/** diff --git a/components/nav/__docs__/demo/auto-width/index.css b/components/nav/__docs__/demo/auto-width/index.css new file mode 100644 index 0000000000..35fbd54dcd --- /dev/null +++ b/components/nav/__docs__/demo/auto-width/index.css @@ -0,0 +1,10 @@ +.demo-ctl { + background-color: #f1f1f1; + border-left: 4px solid #0d599a; + color: #0a7ac3; + margin-bottom: 20px; + padding: 5px; +} +.demo-ctl .next-radio-group { + margin: 5px; +} diff --git a/components/nav/__docs__/demo/auto-width/index.md b/components/nav/__docs__/demo/auto-width/index.md new file mode 100644 index 0000000000..6b4f97ee1d --- /dev/null +++ b/components/nav/__docs__/demo/auto-width/index.md @@ -0,0 +1,11 @@ +# zh-CN order=2 + +# 只显示图标-宽度自适应 + +Nav 可设置 iconOnly 属性，只显示图标，以减少占用空间。可以根据设定的iconOnlyWidth为100%，来让icon自适应居中展示，这种情况下需要Nav外部容器有具体宽度。 + +# en-US order=2 + +# Only show icon - width adaptive + +Nav could set the iconOnly property to reduce the footprint. You can set iconOnlyWidth to 100% to make the icon adapt and center itself. In this case, the external container of the Nav needs to have a specific width. diff --git a/components/nav/__docs__/demo/auto-width/index.tsx b/components/nav/__docs__/demo/auto-width/index.tsx new file mode 100644 index 0000000000..a875b3dcbd --- /dev/null +++ b/components/nav/__docs__/demo/auto-width/index.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { Nav, Radio } from '@alifd/next'; +import type { NavProps } from '@alifd/next/types/nav'; + +type AppState = Pick< + NavProps, + 'iconOnly' | 'hasTooltip' | 'hasArrow' | 'iconOnlyWidth' | 'iconTextOnly' +> & { + width?: number; +}; + +const { Item, SubNav } = Nav; + +class App extends React.Component { + state: AppState = { + iconOnly: false, + hasTooltip: true, + hasArrow: true, + iconOnlyWidth: '100%', + iconTextOnly: false, + width: 200, + }; + + setValue(name: keyof AppState, value: string) { + this.setState({ + [name]: value === 'true', + }); + } + + iconfontChange(value: string) { + const props: AppState = {}; + props.iconOnly = value === 'true'; + if (props.iconOnly) { + props.width = 40; + } else { + props.width = 200; + } + this.setState(props); + } + + render() { + const { iconOnly, hasTooltip, hasArrow, iconTextOnly } = this.state; + return ( +
+
+ + iconOnly=true + iconOnly=false + +
+
+ +
+
+ ); + } +} + +ReactDOM.render(, mountNode); diff --git a/components/nav/__tests__/index-spec.tsx b/components/nav/__tests__/index-spec.tsx index 5058c4db73..15e37b5072 100644 --- a/components/nav/__tests__/index-spec.tsx +++ b/components/nav/__tests__/index-spec.tsx @@ -442,6 +442,36 @@ describe('Nav', () => { cy.get('#icononly-switch-item-2').should('have.css', 'padding-left', '40px'); }); + it('should align center when iconOnly and width < 58', () => { + cy.mount( +
+ +
+ ); + cy.get('.next-nav').then($el => { + const { width: navWidth, left: navLeft } = $el[0].getBoundingClientRect(); + const { width, left } = document + .querySelector('.next-menu-item.next-nav-item')! + .getBoundingClientRect(); + const target = Math.round(Math.abs(left - navLeft)); + const expected = (navWidth - width) >> 1; + expect(width).not.equal(0); + expect(target).equal(expected); + }); + }); + it('should support fixed', () => { cy.mount(