Skip to content

Commit

Permalink
feat(Nav): add iconOnlyWidth for Nav, close alibaba-fusion#2888
Browse files Browse the repository at this point in the history
  • Loading branch information
@youluna
youluna committed Apr 20, 2021
1 parent 4105ce8 commit a0357c4
Show file tree
Hide file tree
Showing 11 changed files with 147 additions and 74 deletions.
62 changes: 47 additions & 15 deletions docs/nav/demo/basic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,26 +18,58 @@ The simplest way to use it.
import { Nav } from '@alifd/next';


const { Item, SubNav } = Nav;
const { Item, SubNav, PopupItem, Group } = Nav;

const header = <span className="fusion">FUSION</span>;
const footer = <a className="login-in" href="javascript:;">Login in</a>;

ReactDOM.render(
<Nav className="basic-nav" mode="popup" direction="hoz" type="primary" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType="hover">
<Item key="home">Home</Item>
<SubNav label="Component" noIcon>
<SubNav label="Next">
<Item key="next-design">Design</Item>
<Item key="next-doc">Document</Item>
</SubNav>
<SubNav label="Meet">
<Item key="meet-design">Design</Item>
<Item key="meet-doc">Document</Item>
</SubNav>
</SubNav>
<Item key="document">Document</Item>
</Nav>
<Nav iconOnly style={{ width: '200px' }}>
<Item icon="account" key="1">
First
</Item>
<Item key="2">Second</Item>
<SubNav icon="account" label="SubNav label">
<Item icon="account" key="1">
First
</Item>
<Item icon="account" key="2">
Second
</Item>
</SubNav>
<SubNav label="SubNav label">
<Item icon="account" key="1">
First
</Item>
<Item icon="account" key="2">
Second
</Item>
</SubNav>
<PopupItem icon="account" label="PopupItem label">
<Item icon="account" key="1">
First
</Item>
<Item icon="account" key="2">
Second
</Item>
</PopupItem>
<PopupItem label="PopupItem label">
<Item icon="account" key="1">
First
</Item>
<Item icon="account" key="2">
Second
</Item>
</PopupItem>
<Group icon="account" label="Group label">
<Item icon="account" key="1">
First
</Item>
<Item icon="account" key="2">
Second
</Item>
</Group>
</Nav>
, mountNode);
````

Expand Down
25 changes: 18 additions & 7 deletions docs/nav/demo/icon-only.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Nav could set the iconOnly property to reduce the footprint.
---

````jsx
import { Nav, Radio } from '@alifd/next';
import { Nav, Radio, Icon, Input } from '@alifd/next';


const { Item, SubNav } = Nav;
Expand All @@ -25,7 +25,8 @@ class App extends React.Component {
state = {
iconOnly: false,
hasTooltip: true,
hasArrow: true
hasArrow: true,
iconOnlyWidth: 58,
}

setValue(name, value) {
Expand All @@ -34,16 +35,26 @@ class App extends React.Component {
});
}

render() {
const { iconOnly, hasTooltip, hasArrow } = this.state;
setWidth(value) {
this.setState({
iconOnlyWidth: value
});
}

render() {
const { iconOnly, hasTooltip, hasArrow, iconOnlyWidth } = this.state;
return (
<div>
<div className="demo-ctl">
<Radio.Group shape="button" size="medium" value={iconOnly ? 'true' : 'false'} onChange={this.setValue.bind(this, 'iconOnly')}>
<Radio value="true">iconOnly=true</Radio>
<Radio value="false">iconOnly=false</Radio>
</Radio.Group>
{iconOnly ?
<Radio.Group shape="button" size="medium" value={iconOnlyWidth} onChange={this.setWidth.bind(this)}>
<Radio value={58}>iconOnlyWidth=58</Radio>
<Radio value={80}>iconOnlyWidth=80</Radio>
</Radio.Group> : null}
{iconOnly ?
<Radio.Group shape="button" size="medium" value={hasArrow ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasArrow')}>
<Radio value="true">hasArrow=true</Radio>
Expand All @@ -55,12 +66,12 @@ class App extends React.Component {
<Radio value="false">hasTooltip=false</Radio>
</Radio.Group> : null}
</div>
<Nav style={{ width: '200px' }} iconOnly={iconOnly} hasArrow={hasArrow} hasTooltip={hasTooltip}>
<Nav style={{ width: '200px' }} iconOnlyWidth={this.state.iconOnlyWidth} iconOnly={iconOnly} hasArrow={hasArrow} hasTooltip={hasTooltip}>
<Item icon="account">Navigation One</Item>
<Item icon="account">Navigation Two</Item>
<Item icon="account">Navigation Three</Item>
<Item icon="account">Navigation Four</Item>
<Item icon="account">Navigation Five</Item>
<Item icon={<Icon type="atm" className="custom-cls"/>}>Navigation Four</Item>
<Item icon={<span>QAQ</span>}>Navigation Five</Item>
<SubNav icon="account" label="Sub Nav">
<Item icon="account">Item 1</Item>
<Item icon="account">Item 2</Item>
Expand Down
1 change: 1 addition & 0 deletions docs/nav/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ It provides top navigation and side navigation, the top navigation provides glob
| popupAlign | pop up sub navigation alignment (horizontal navigation only supports follow)<br><br>**option**:<br>'follow', 'outside' | Enum | 'follow' |
| popupClassName | pop up navigation custom class name | String | - |
| iconOnly | whether to show only icons | Boolean | - |
| iconOnlyWidth | width of Nav in iconOnly mode (only works when iconOnly=true) | String/Number | 58 | |
| hasArrow | whether to display the right arrow (only works when iconOnly=true) | Boolean | true |
| hasTooltip | whether has tool tip (only works when iconOnly=true) | Boolean | false |
| header | custom navigation head | ReactNode | - |
Expand Down
Loading

0 comments on commit a0357c4

Please sign in to comment.