mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
chore: 迁移 menu iconfont
This commit is contained in:
parent
d467994249
commit
ae5ae396ef
@ -9,6 +9,7 @@
|
|||||||
````jsx
|
````jsx
|
||||||
var Menu = antd.Menu;
|
var Menu = antd.Menu;
|
||||||
var SubMenu = Menu.SubMenu;
|
var SubMenu = Menu.SubMenu;
|
||||||
|
var Icon = antd.Icon;
|
||||||
|
|
||||||
var App = React.createClass({
|
var App = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -25,12 +26,12 @@ var App = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
|
return <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
|
||||||
<Menu.Item key="mail">
|
<Menu.Item key="mail">
|
||||||
<i className="anticon anticon-mail"></i>导航一
|
<Icon type="mail" />导航一
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<Menu.Item key="app">
|
<Menu.Item key="app">
|
||||||
<i className="anticon anticon-appstore"></i>导航二
|
<Icon type="appstore" />导航二
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
<SubMenu title={<span><i className="anticon anticon-setting"></i>导航 - 子菜单</span>}>
|
<SubMenu title={<span><Icon type="setting" />导航 - 子菜单</span>}>
|
||||||
<Menu.Item key="setting:1">选项1</Menu.Item>
|
<Menu.Item key="setting:1">选项1</Menu.Item>
|
||||||
<Menu.Item key="setting:2">选项2</Menu.Item>
|
<Menu.Item key="setting:2">选项2</Menu.Item>
|
||||||
<Menu.Item key="setting:3">选项3</Menu.Item>
|
<Menu.Item key="setting:3">选项3</Menu.Item>
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
````jsx
|
````jsx
|
||||||
var Menu = antd.Menu;
|
var Menu = antd.Menu;
|
||||||
var SubMenu = Menu.SubMenu;
|
var SubMenu = Menu.SubMenu;
|
||||||
|
var Icon = antd.Icon;
|
||||||
|
|
||||||
var Sider = React.createClass({
|
var Sider = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -37,13 +38,13 @@ var Sider = React.createClass({
|
|||||||
onClose={this.onToggle}
|
onClose={this.onToggle}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="inline">
|
mode="inline">
|
||||||
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
<Menu.Item key="2">选项2</Menu.Item>
|
<Menu.Item key="2">选项2</Menu.Item>
|
||||||
<Menu.Item key="3">选项3</Menu.Item>
|
<Menu.Item key="3">选项3</Menu.Item>
|
||||||
<Menu.Item key="4">选项4</Menu.Item>
|
<Menu.Item key="4">选项4</Menu.Item>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
|
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
|
||||||
<Menu.Item key="5">选项5</Menu.Item>
|
<Menu.Item key="5">选项5</Menu.Item>
|
||||||
<Menu.Item key="6">选项6</Menu.Item>
|
<Menu.Item key="6">选项6</Menu.Item>
|
||||||
<SubMenu key="sub3" title="三级导航">
|
<SubMenu key="sub3" title="三级导航">
|
||||||
@ -51,7 +52,7 @@ var Sider = React.createClass({
|
|||||||
<Menu.Item key="8">选项8</Menu.Item>
|
<Menu.Item key="8">选项8</Menu.Item>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
|
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
|
||||||
<Menu.Item key="9">选项9</Menu.Item>
|
<Menu.Item key="9">选项9</Menu.Item>
|
||||||
<Menu.Item key="10">选项10</Menu.Item>
|
<Menu.Item key="10">选项10</Menu.Item>
|
||||||
<Menu.Item key="11">选项11</Menu.Item>
|
<Menu.Item key="11">选项11</Menu.Item>
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
````jsx
|
````jsx
|
||||||
var Menu = antd.Menu;
|
var Menu = antd.Menu;
|
||||||
var SubMenu = Menu.SubMenu;
|
var SubMenu = Menu.SubMenu;
|
||||||
|
var Icon = antd.Icon;
|
||||||
|
|
||||||
var Sider = React.createClass({
|
var Sider = React.createClass({
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -28,13 +29,13 @@ var Sider = React.createClass({
|
|||||||
defaultOpenKeys={['sub1']}
|
defaultOpenKeys={['sub1']}
|
||||||
selectedKeys={[this.state.current]}
|
selectedKeys={[this.state.current]}
|
||||||
mode="inline">
|
mode="inline">
|
||||||
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<Menu.Item key="1">选项1</Menu.Item>
|
<Menu.Item key="1">选项1</Menu.Item>
|
||||||
<Menu.Item key="2">选项2</Menu.Item>
|
<Menu.Item key="2">选项2</Menu.Item>
|
||||||
<Menu.Item key="3">选项3</Menu.Item>
|
<Menu.Item key="3">选项3</Menu.Item>
|
||||||
<Menu.Item key="4">选项4</Menu.Item>
|
<Menu.Item key="4">选项4</Menu.Item>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
|
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
|
||||||
<Menu.Item key="5">选项5</Menu.Item>
|
<Menu.Item key="5">选项5</Menu.Item>
|
||||||
<Menu.Item key="6">选项6</Menu.Item>
|
<Menu.Item key="6">选项6</Menu.Item>
|
||||||
<SubMenu key="sub3" title="三级导航">
|
<SubMenu key="sub3" title="三级导航">
|
||||||
@ -42,7 +43,7 @@ var Sider = React.createClass({
|
|||||||
<Menu.Item key="8">选项8</Menu.Item>
|
<Menu.Item key="8">选项8</Menu.Item>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
|
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
|
||||||
<Menu.Item key="9">选项9</Menu.Item>
|
<Menu.Item key="9">选项9</Menu.Item>
|
||||||
<Menu.Item key="10">选项10</Menu.Item>
|
<Menu.Item key="10">选项10</Menu.Item>
|
||||||
<Menu.Item key="11">选项11</Menu.Item>
|
<Menu.Item key="11">选项11</Menu.Item>
|
||||||
|
@ -10,19 +10,20 @@
|
|||||||
var Menu = antd.Menu;
|
var Menu = antd.Menu;
|
||||||
var MenuItem = Menu.Item;
|
var MenuItem = Menu.Item;
|
||||||
var SubMenu = Menu.SubMenu;
|
var SubMenu = Menu.SubMenu;
|
||||||
|
var Icon = antd.Icon;
|
||||||
|
|
||||||
function handleClick(e) {
|
function handleClick(e) {
|
||||||
console.log('click', e);
|
console.log('click', e);
|
||||||
}
|
}
|
||||||
|
|
||||||
React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
|
React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
|
||||||
<SubMenu key="sub1" title={<span><i className="anticon anticon-mail"></i><span>导航一</span></span>}>
|
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
|
||||||
<MenuItem key="1">选项1</MenuItem>
|
<MenuItem key="1">选项1</MenuItem>
|
||||||
<MenuItem key="2">选项2</MenuItem>
|
<MenuItem key="2">选项2</MenuItem>
|
||||||
<MenuItem key="3">选项3</MenuItem>
|
<MenuItem key="3">选项3</MenuItem>
|
||||||
<MenuItem key="4">选项4</MenuItem>
|
<MenuItem key="4">选项4</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub2" title={<span><i className="anticon anticon-appstore"></i><span>导航二</span></span>}>
|
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
|
||||||
<MenuItem key="5">选项5</MenuItem>
|
<MenuItem key="5">选项5</MenuItem>
|
||||||
<MenuItem key="6">选项6</MenuItem>
|
<MenuItem key="6">选项6</MenuItem>
|
||||||
<SubMenu key="sub3" title="三级导航">
|
<SubMenu key="sub3" title="三级导航">
|
||||||
@ -30,7 +31,7 @@ React.render(<Menu onClick={handleClick} style={{width:240}} mode="vertical">
|
|||||||
<MenuItem key="8">选项8</MenuItem>
|
<MenuItem key="8">选项8</MenuItem>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu key="sub4" title={<span><i className="anticon anticon-setting"></i><span>导航三</span></span>}>
|
<SubMenu key="sub4" title={<span><icon type="setting" /><span>导航三</span></span>}>
|
||||||
<MenuItem key="9">选项9</MenuItem>
|
<MenuItem key="9">选项9</MenuItem>
|
||||||
<MenuItem key="10">选项10</MenuItem>
|
<MenuItem key="10">选项10</MenuItem>
|
||||||
<MenuItem key="11">选项11</MenuItem>
|
<MenuItem key="11">选项11</MenuItem>
|
||||||
|
Loading…
Reference in New Issue
Block a user