鎮ㄥソ锛屾杩庝締鍒扮董搴浕瀛愬競鍫�(ch菐ng)缍�(w菐ng)
鐧婚寗 | 鍏嶈不(f猫i)娉ㄥ唺(c猫)
antd 鏄熀浜� Ant Design 瑷�(sh猫)瑷�(j矛)楂旂郴鐨� React UI 绲勪欢搴�锛屼富瑕佺敤浜庣爺鐧�(f膩)浼佹キ(y猫)绱�(j铆)涓悗鑷�(t谩i)鐢�(ch菐n)鍝�銆傞偅涔坅ntd鏈夊摢浜涚壒鎬у拰鍎�(y艒u)鍕�(sh矛)鍛�锛焌ntd鐨勬噳(y墨ng)鐢ㄦ柟娉曞張鏄粈涔堝憿锛熼�欑瘒鏂囩珷涓昏璎涜堪antd鐨勭浉闂�(gu膩n)鍏�(n猫i)瀹癸紝鏈�鍚庨檮鏈塧ntd鐨勭祫浠跺韩渚涘ぇ瀹朵簡瑙ｄ娇鐢�銆�
1銆佹彁鐓夎嚜浼佹キ(y猫)绱�(j铆)涓悗鑷�(t谩i)鐢�(ch菐n)鍝佺殑浜や簰瑾炶█鍜岃瑕洪ⅷ(f膿ng)鏍�銆�
2銆侀枊绠卞嵆鐢ㄧ殑楂樿唱(zh矛)閲� React 绲勪欢銆�
3銆佷娇鐢� TypeScript 妲�(g貌u)寤猴紝鎻愪緵瀹屾暣鐨勯鍨嬪畾缇╂枃浠�銆�
4銆佸叏閺堣矾闁嬬櫦(f膩)鍜岃ō(sh猫)瑷�(j矛)宸ュ叿楂旂郴
5銆佹暩(sh霉)鍗佸��(g猫)鍦嬮殯鍖栬獮瑷�鏀寔銆�
6銆佹繁鍏ユ瘡鍊�(g猫)绱�(x矛)绡�(ji茅)鐨勪富椤屽畾鍒惰兘鍔�銆�
1銆佸畨瑁�
瀹夎绲勪欢搴細npm install antd --save鎴杫arn add antd
瀹夎鍦栨(bi膩o)搴細npm install @ant-design/icons -s
2銆佸紩鐢�
浣跨敤绲勪欢锛氫娇鐢ㄧ祫浠剁殑鏅�(sh铆)鍊�锛岄渶瑕佸湪灏�(du矛)鎳�(y墨ng)鐨剅eact绲勪欢涓�锛屽紩鍏ntd绲勪欢鍜宎ntd妯ｅ紡鏂囦欢?锛涜洏鍜ц嫰閲夎皩鑲熻皷鍕燁牪ain.js涓叏灞�寮曞叆(灏遍渶瑕佹瘡娆′娇鐢ㄩ兘瑕佸紩鍏ヤ簡)
寮曞叆鐩搁棞(gu膩n)绲勪欢锛歩mport { ConfigProvider, DatePicker, message } from 'antd';
寮曞叆妯ｅ紡锛歩mport 'antd/dist/antd.css';
鎻掍欢锛氱偤浜嗗彲浠ュ儚涓婇潰閭ｆǎ鎸夐渶鍔犺級绲勪欢锛岄渶瑕佸紩鍏abel锛屼娇鐢� babel-plugin-import 渚嗛��(j矛n)琛屾寜闇�
浣跨敤 Day.js 鏇挎彌 momentjs 鍎�(y艒u)鍖栨墦鍖呭ぇ?銆傚殠姊㈠厑瑜�?antd-dayjs-webpack-plugin 鎻掍欢鐢� Day.js 鏇挎彌 momentjs 渚嗗ぇ骞呮笡灏忔墦鍖呭ぇ灏忋�傞�欓渶瑕佹洿鏂� webpack 鐨勯厤缃枃浠跺涓嬶細
3.鎸夐渶鍔犺級(闇�瑕佷粈涔堟彃浠剁洿鎺ュ姞杓変粈涔�)
antd鐨勭祫浠跺韩
1銆丅utton绲勪欢
<Button type="primary" danger>鏂囨湰</Button>
type锛氭寜閳曠殑椤炲瀷锛屽彇鍊肩偤primary銆乨efault銆乨ashed銆乼ext銆乴ink
danger锛氳〃绀哄嵄闅�(xi菐n)鎸夐垥
size锛氳〃绀烘寜閳曠殑澶у皬,鍙栧�糽arge銆乵iddle銆乻mall
disabled锛氳〃绀烘寜閳曚笉鍙敤
icon锛氳ō(sh猫)缃寜閳曚笂鐨勫湒妯�(bi膩o)
shape锛氳ō(sh猫)缃寜閳曠殑褰㈢媭
2銆乵essage绲勪欢
娑堟伅妗嗙祫浠�锛屽彲浠ユ彁渚涙垚鍔�銆佽鍛�銆侀尟(cu貌)瑾ょ瓑鍙嶉淇℃伅
message.info()銆乵essage.success()銆乵essage.warning()銆乵essage.error()
3銆丩ayout绲勪欢
Layout鏄竷灞�瀹瑰櫒锛岄噷闈㈠彲浠ュ寘鍚獺eader Sider Content Footer 鎴� Layout 鏈韩
Header锛氶爞閮ㄥ鍣�,鍙兘鏀惧湪Layout涓�
Sider锛氬伌(c猫)閭婃瑒锛岄�氬父鏀惧皫(d菐o)鑸瑒锛屽彧鑳芥斁鍦↙ayout涓�
Content锛氬収(n猫i)瀹归’绀哄崁(q奴),鍙兘鏀惧湪Layout涓�
Footer:搴曢儴瀹瑰櫒,鍙兘鏀惧湪Layout涓�
4銆丮enu绲勪欢
鍙互鐩存帴鍖呭惈鑿滃柈闋�(xi脿ng)(Menu.Item),涔熷彲浠ュ寘鍚瓙鑿滃柈(SubMenu),鍦ㄥ瓙鑿滃柈涓嬪彲浠ュ寘鍚彍鍠爡(xi脿ng)
theme锛氳〃绀鸿彍鍠殑鑳屾櫙鑹�
mode锛� 琛ㄧず鑿滃柈闋�(xi脿ng)鐨勬斁缃柟寮�(姘村钩銆佸瀭鐩�)
defaultSelectedKeys锛氶粯瑾�(r猫n)閬镐腑鐨勮彍鍠爡(xi脿ng),閫氶亷鑿滃柈闋�(xi脿ng)鐨刱ey灞�ц瓨(sh铆)鍒�
defaultOpenKeys锛氶粯瑾�(r猫n)鎵撻枊鐨勫瓙鑿滃柈,閫氶亷瀛愯彍鍠殑key灞�ц瓨(sh铆)鍒�
style锛氳彍鍠殑妯ｅ紡
Menu.Item锛氳彍鍠爡(xi脿ng)绲勪欢
key锛氳〃绀鸿彍鍠爡(xi脿ng)鐨勫敮涓�妯�(bi膩o)璀�(sh铆)
icon锛氬湒妯�(bi膩o)
SubMenu锛氬瓙鑿滃柈绲勪欢
key锛氳〃绀哄瓙鑿滃柈鐨勫敮涓�妯�(bi膩o)璀�(sh铆)
title锛氬瓙鑿滃柈鐨勬(bi膩o)椤屾枃鏈�
icon锛氬瓙鑿滃柈鐨勫湒妯�(bi膩o)
5銆丏ivider鍒嗗壊绶�
orientation锛氳ō(sh猫)缃垎鍓茬窔鏂囨湰鐨勪綅缃�
plain锛氳ō(sh猫)缃垎鍓茬窔鏂囨湰鐨勯鑹�
type锛氬垎鍓茬窔鐨勯鍨�(鍨傜洿/姘村钩)
6銆両nput绲勪欢
size锛氬ぇ灏�(large銆乵iddle銆乻mall)
placeholder锛氭彁绀�,鐢ㄦ埗杓稿叆鏅�(sh铆)鑷嫊(d貌ng)娑堝け
prefix锛氬墠缍村湒妯�(bi膩o)
suffix锛氬悗缍村湒妯�(bi膩o)
maxLength锛氭渶澶ч暦(zh菐ng)搴�(瀛楃鍊�(g猫)鏁�(sh霉))
disabled锛氭槸鍚︾鐢�,榛樿獚(r猫n)鏄痜alse
defaultValue锛氶粯瑾�(r猫n)鍊�
bordered锛氭槸鍚﹀付閭婃
缍韩闆诲瓙閫�锛岄浕瀛愮煡璀�(sh铆)锛屼竴鏌ョ櫨閫�锛�
宸叉敹閷勮姊�153979鍊�(g猫)
IC鍨嬭櫉(h脿o)绱㈠紩锛� A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9
©2025 缍韩闆诲瓙甯傚牬(ch菐ng)缍�(w菐ng)锛坵ww.dzsc.com锛夈��缍�(j墨ng)鐕熻ū鍙瓑绶ㄨ櫉(h脿o)锛�娴橞2-20050339 鐗堟瑠(qu谩n)鑱叉槑
鍗佸叚骞村皥娉ㄦ墦閫犲劒(y艒u)璩�(zh矛)闆诲瓙鍏冨櫒浠堕噰璩肩恫(w菐ng)銆両C浜ゆ槗骞宠嚭(t谩i)銆�
璨峰鏈嶅嫏(w霉)鐔辩窔锛�0571-85317666 | 璨峰鏈嶅嫏(w霉)閮≦Q锛�
璩ｅ鏈嶅嫏(w霉)鐔辩窔锛�0571-85317586 | 璩ｅ鏈嶅嫏(w霉)閮≦Q锛�
