home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-15 07:46:41 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
5048dda885f67e1c24bd4276fd940ec39cddbf34
ant-design/docs/react/install.html
T
afc163 5048dda885 Updates
2016-12-04 17:30:36 +08:00

76 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ant Design - An enterprise-class UI design language and React-based implementation">
<title>Ant Design - One Design Language</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
</head>
<body>
<div id="react-content" hidden>
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="44023015"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="docs/react/introduce" data-reactid="47">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="50"><a href="docs/react/install" data-reactid="51">Installation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="docs/react/practical-projects" data-reactid="53">Practical Projects</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="docs/react/customize-theme" data-reactid="55">Customize theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="changelog" data-reactid="57">Change Log</a></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="58"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480843817139_2" aria-haspopup="true" data-reactid="59"><h4 data-reactid="60">Components</h4></div><!-- react-empty: 61 --></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="62"><article class="markdown" data-reactid="63"><h1 data-reactid="64"><!-- react-text: 65 -->Installation<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/react/install.en-US.md" data-reactid="66"><i class="anticon anticon-edit" data-reactid="67"></i></a></h1><section class="toc" data-reactid="68"><ul data-reactid="69"><li data-reactid="70"><a href="#Using-npm-to-install" data-reactid="71"><!-- react-text: 72 -->Using npm to install<!-- /react-text --></a></li><li data-reactid="73"><a href="#Import-in-Browser" data-reactid="74"><!-- react-text: 75 -->Import in Browser<!-- /react-text --></a></li><li data-reactid="76"><a href="#Development-tool" data-reactid="77"><!-- react-text: 78 -->Development tool<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="79"><h2 id="Using-npm-to-install" data-reactid="80"><span data-reactid="81"><!-- react-text: 82 -->Using npm to install<!-- /react-text --></span><a href="#Using-npm-to-install" class="anchor" data-reactid="83">#</a></h2><p data-reactid="84"><strong data-reactid="85"><!-- react-text: 86 -->We recommend using npm to install<!-- /react-text --></strong><!-- react-text: 87 -->，it not only makes development easier，but you can also take advantage of the whole ecosystem.<!-- /react-text --></p><p data-reactid="88"><!-- react-text: 89 -->If using npm to install, you could use <!-- /react-text --><code data-reactid="90"><!-- react-text: 91 -->import<!-- /react-text --></code><!-- react-text: 92 --> or <!-- /react-text --><code data-reactid="93"><!-- react-text: 94 -->require<!-- /react-text --></code><!-- react-text: 95 -->.<!-- /react-text --></p><p data-reactid="96"><!-- react-text: 97 -->Stable version：<!-- /react-text --></p><p data-reactid="98"><a href="https://www.npmjs.org/package/antd" data-reactid="99"><img src="https://img.shields.io/npm/v/antd.svg?style=flat-square" alt="npm package" data-reactid="100"/></a></p><pre class="language-bash" data-reactid="101"><code data-reactid="102">$ npm <span class="token function" >install</span> antd --save</code></pre><p data-reactid="103"><!-- react-text: 104 -->You can subscribe to this feed for new version notification: <!-- /react-text --><a href="https://github.com/ant-design/ant-design/releases.atom" data-reactid="105"><!-- react-text: 106 -->https://github.com/ant-design/ant-design/releases.atom<!-- /react-text --></a></p><p data-reactid="107"><!-- react-text: 108 -->Beta version：<!-- /react-text --></p><p data-reactid="109"><a href="https://www.npmjs.org/package/antd" data-reactid="110"><img src="https://cnpmjs.org/badge/v/antd.svg?&amp;tag=beta&amp;subject=npm" data-reactid="111"/></a></p><pre class="language-bash" data-reactid="112"><code data-reactid="113">$ npm <span class="token function" >install</span> antd@beta --save</code></pre><h2 id="Import-in-Browser" data-reactid="114"><span data-reactid="115"><!-- react-text: 116 -->Import in Browser<!-- /react-text --></span><a href="#Import-in-Browser" class="anchor" data-reactid="117">#</a></h2><p data-reactid="118"><a href="https://cdnjs.com/libraries/antd" data-reactid="119"><img src="https://img.shields.io/cdnjs/v/antd.svg?style=flat-square" alt="CDNJS" data-reactid="120"/></a></p><p data-reactid="121"><!-- react-text: 122 -->We provide <!-- /react-text --><code data-reactid="123"><!-- react-text: 124 -->antd.js<!-- /react-text --></code><!-- react-text: 125 --> <!-- /react-text --><code data-reactid="126"><!-- react-text: 127 -->antd.css<!-- /react-text --></code><!-- react-text: 128 --> and <!-- /react-text --><code data-reactid="129"><!-- react-text: 130 -->antd.min.js<!-- /react-text --></code><!-- react-text: 131 --> <!-- /react-text --><code data-reactid="132"><!-- react-text: 133 -->antd.min.css<!-- /react-text --></code><!-- react-text: 134 --> under <!-- /react-text --><code data-reactid="135"><!-- react-text: 136 -->antd/dist<!-- /react-text --></code><!-- react-text: 137 --> in antd&#x27;s npm package, in order to import all the components of antd directly. Also, you can use <!-- /react-text --><a href="https://unpkg.com/" data-reactid="138"><!-- react-text: 139 -->unpkg<!-- /react-text --></a><!-- react-text: 140 -->.<!-- /react-text --></p><blockquote data-reactid="141"><p data-reactid="142"><!-- react-text: 143 -->It&#x27;s not recommended to use the already built files, as you cannot get bugfixes from the dependencies of antd.<!-- /react-text --></p></blockquote><h4 id="stable" data-reactid="144"><span data-reactid="145"><!-- react-text: 146 -->stable<!-- /react-text --></span><a href="#stable" class="anchor" data-reactid="147">#</a></h4><ul data-reactid="148"><li data-reactid="149"><p data-reactid="150"><a href="https://unpkg.com/antd/dist/antd.js" data-reactid="151"><!-- react-text: 152 -->https://unpkg.com/antd/dist/antd.js<!-- /react-text --></a></p></li><li data-reactid="153"><p data-reactid="154"><a href="https://unpkg.com/antd/dist/antd.css" data-reactid="155"><!-- react-text: 156 -->https://unpkg.com/antd/dist/antd.css<!-- /react-text --></a></p></li><li data-reactid="157"><p data-reactid="158"><a href="https://unpkg.com/antd/dist/antd.min.js" data-reactid="159"><!-- react-text: 160 -->https://unpkg.com/antd/dist/antd.min.js<!-- /react-text --></a></p></li><li data-reactid="161"><p data-reactid="162"><a href="https://unpkg.com/antd/dist/antd.min.css" data-reactid="163"><!-- react-text: 164 -->https://unpkg.com/antd/dist/antd.min.css<!-- /react-text --></a></p></li></ul><h4 id="beta" data-reactid="165"><span data-reactid="166"><!-- react-text: 167 -->beta<!-- /react-text --></span><a href="#beta" class="anchor" data-reactid="168">#</a></h4><ul data-reactid="169"><li data-reactid="170"><p data-reactid="171"><a href="https://unpkg.com/antd@beta/dist/antd.js" data-reactid="172"><!-- react-text: 173 -->https://unpkg.com/antd@beta/dist/antd.js<!-- /react-text --></a></p></li><li data-reactid="174"><p data-reactid="175"><a href="https://unpkg.com/antd@beta/dist/antd.css" data-reactid="176"><!-- react-text: 177 -->https://unpkg.com/antd@beta/dist/antd.css<!-- /react-text --></a></p></li><li data-reactid="178"><p data-reactid="179"><a href="https://unpkg.com/antd@beta/dist/antd.min.js" data-reactid="180"><!-- react-text: 181 -->https://unpkg.com/antd@beta/dist/antd.min.js<!-- /react-text --></a></p></li><li data-reactid="182"><p data-reactid="183"><a href="https://unpkg.com/antd@beta/dist/antd.min.css" data-reactid="184"><!-- react-text: 185 -->https://unpkg.com/antd@beta/dist/antd.min.css<!-- /react-text --></a></p></li></ul><blockquote data-reactid="186"><p data-reactid="187"><!-- react-text: 188 -->Here is an <!-- /react-text --><a href="https://github.com/ant-design/antd-init/tree/master/examples/build-antd-standalone" data-reactid="189"><!-- react-text: 190 -->example<!-- /react-text --></a><!-- react-text: 191 --> of how to build your own antd.js if you are using antd@&lt;1.0.0.<!-- /react-text --></p></blockquote><h2 id="Development-tool" data-reactid="192"><span data-reactid="193"><!-- react-text: 194 -->Development tool<!-- /react-text --></span><a href="#Development-tool" class="anchor" data-reactid="195">#</a></h2><p data-reactid="196"><!-- react-text: 197 -->We provide React components <!-- /react-text --><a href="https://github.com/ant-design/antd-init" data-reactid="198"><!-- react-text: 199 -->Scaffold tool<!-- /react-text --></a><!-- react-text: 200 -->.<!-- /react-text --></p><pre class="language-bash" data-reactid="201"><code data-reactid="202">$ npm <span class="token function" >install</span> antd-init -g</code></pre><p data-reactid="203"><!-- react-text: 204 -->Inside an empty folder run <!-- /react-text --><code data-reactid="205"><!-- react-text: 206 -->antd-init<!-- /react-text --></code><!-- react-text: 207 --> to init.<!-- /react-text --></p><p data-reactid="208"><!-- react-text: 209 -->You can explore the latest structure of scaffold <!-- /react-text --><a href="https://github.com/ant-design/antd-init/tree/master/boilerplates" data-reactid="210"><!-- react-text: 211 -->here<!-- /react-text --></a><!-- react-text: 212 -->, it is a good habit to watch this repo to get the latest features.<!-- /react-text --></p><blockquote data-reactid="213"><p data-reactid="214"><a href="http://ant-tool.github.io/" data-reactid="215"><!-- react-text: 216 -->More development tools<!-- /react-text --></a><!-- react-text: 217 -->。<!-- /react-text --></p></blockquote></section></article></div></div><div class="ant-row" data-reactid="218"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="219"><section class="prev-next-nav" data-reactid="220"><a class="prev-page" href="docs/react/getting-started" data-reactid="221">Getting Started</a><a class="next-page" href="docs/react/practical-projects" data-reactid="222">Practical Projects</a></section></div></div></div><footer id="footer" data-reactid="223"><ul data-reactid="224"><li data-reactid="225"><h2 data-reactid="226">GitHub</h2><div data-reactid="227"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="228"><span data-reactid="229">Repository</span></a></div><div data-reactid="230"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="231">dva</a><!-- react-text: 232 --> - <!-- /react-text --><span data-reactid="233">Framework</span></div><div data-reactid="234"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="235">dva-cli</a><!-- react-text: 236 --> -<!-- /react-text --><span data-reactid="237">Scaffold</span></div><div data-reactid="238"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="239">ant-tool</a><!-- react-text: 240 --> - <!-- /react-text --><span data-reactid="241">Developer Tools</span></div></li><li data-reactid="242"><h2 data-reactid="243"><span data-reactid="244">Links</span></h2><div data-reactid="245"><a href="http://mobile.ant.design" data-reactid="246">Ant Design Mobile</a><span data-reactid="247"> - </span><span data-reactid="248">Mobile</span></div><div data-reactid="249"><a href="https://g2.alipay.com/" data-reactid="250">G2</a><span data-reactid="251"> - </span><span data-reactid="252">Data Visualization</span></div><div data-reactid="253"><a href="https://antv.alipay.com/" data-reactid="254">AntV</a><span data-reactid="255"> - </span><span data-reactid="256">Data Visualization Specification</span></div><div data-reactid="257"><a href="http://motion.ant.design" data-reactid="258">Ant Motion</a><span data-reactid="259"> - </span><span data-reactid="260">Motion</span></div><div data-reactid="261"><a href="http://library.ant.design/" data-reactid="262">AntD Library</a><span data-reactid="263"> - </span><span data-reactid="264">Axure library of Ant Design</span></div><div data-reactid="265"><a href="http://ux.ant.design" data-reactid="266">Ant UX</a><span data-reactid="267"> - </span><span data-reactid="268">Sitemap Template</span></div></li><li data-reactid="269"><h2 data-reactid="270"><span data-reactid="271">Community</span></h2><div data-reactid="272"><a rel="noopener noreferrer" href="/changelog" data-reactid="273"><span data-reactid="274">Change Log</span></a></div><div data-reactid="275"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="276"><span data-reactid="277">Feedback</span></a></div><div data-reactid="278"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="279"><span data-reactid="280">Chat Room</span></a></div><div data-reactid="281"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="282"><span data-reactid="283">Bug Report</span></a></div></li><li data-reactid="284"><div data-reactid="285"><!-- react-text: 286 -->©2016 <!-- /react-text --><span data-reactid="287">Created by Ant UED</span></div><div data-reactid="288"><!-- react-text: 289 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="290">BiSheng</a></div><div style="margin-top:10px;" data-reactid="291"><span data-reactid="292">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="293"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="294"><div class="ant-select-selection__rendered" data-reactid="295"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="296">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="297"><b data-reactid="298"></b></span></div></div></div></li></ul></footer></div>
</div>
<div class="ant-site-loading" id="ant-site-loading">
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/>
<div id="loading-text">One Design Language</div>
</div>
<script>
(function () {
var content = document.getElementById('loading-text');
if (content) {
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
var className;
if (i > 0 && i < content.innerText.length - 1) {
className = 'yoyo-x-' + (i % 6);
}
if (letter.trim() === '') {
className += ' blank';
}
return '<span class="' + className + '">' + letter + '</span>';
}).join('');
}
})();
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink