整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
杈戝璇細鏍呮牸鏄槸B绔骇鍝佸拰璁捐甯堟瘡澶╂帴瑙︽渶澶氱殑缁勪欢锛屽浜嶣绔璁″笀鏉ヨ瀹冨苟涓嶉檶鐢燂紝浣嗘槸璇ュ浣曟洿濂界殑浜嗚В瀹冪殑缁撴瀯鍜屼綔鐢紝濡備綍鏇村ソ鍦拌繍鐢ㄥ畠锛岃澶氫汉骞朵笉娓呮銆傛湰鏂囧氨涓€浜涘ぇ浼楃殑闂杩涜璁茶В骞跺洖绛旓紝璁╂垜浠竴璧锋潵鐪嬬湅鍚э紒
澶у濂斤紝鎴戞槸瀛愮拹锝?/p>
浠婂ぉ涓哄ぇ瀹跺垎浜殑鏄爡鏍间笅绡囥€屾爡鏍煎湪鍝嶅簲寮忚璁′腑鐨勮繍鐢ㄣ€?/p>
鍝嶅簲寮忓竷灞€杩欎釜鍚嶈瘝鐩镐俊澶ч儴鍒嗚璁″笀閮戒笉闄岀敓锛屼篃鑳芥竻妤氱煡閬撳畠鐨勫熀鏈憟鐜版晥鏋溿€備絾鍏蜂綋鎿嶄綔鍙婁笌寮€鍙戜汉鍛樺崗浣滄椂锛岃澶氫笓涓氬悕璇嶈浜洪毦浠ョ悊瑙ｏ紝浣犳槸鍚︿篃浜х敓杩囧涓嬬枒闂煠旓笍锛?/p>
瀹藉害鍗曚綅鐢ㄧ櫨鍒嗘瘮杩樻槸px锛屾垨鑰卹em锛屼粬浠箣闂寸殑鍖哄埆鏄粈涔堬紵
鍝嶅簲寮忓拰鑷€傚簲鍌诲偦鍒嗕笉娓呮锛屼袱鑰呮湁浣曞尯鍒拰鑱旂郴锛?/p>
浠€涔堟槸鏂偣锛熶粈涔堟槸濯掍綋鏌ヨ锛?/p>
鍦ㄦ棭鏈燂紝纭欢璁惧钀藉悗锛屽紑鍙戜汉鍛樺紑鍙戠綉椤甸噰鐢ㄧ殑涓昏鏄浐瀹氬竷灞€锛堜篃绉颁负闈欐€佸竷灞€锛夛紝鍥哄畾甯冨眬鏄皢鍏跺唴瀹硅缃负鍥哄畾鐨勭殑鍍忕礌瀹藉害锛坧x锛?/p>
鍚庨殢鎶€鏈彂灞曪紝娴忚鍣ㄥ澶氾紝寮€鍙戜汉鍛樺繖鐫€鍏煎鍚勭娴忚鍣ㄣ€傚嚭鐜颁簡娴佸紡甯冨眬鍜屽脊鎬у竷灞€锛屽唴瀹逛娇鐢ㄧ櫨鍒嗘瘮锛?锛夌‘瀹氬搴︺€?/p>
2010骞达紝CSS3姝ｅ紡涓婄嚎锛屽悓鏃舵帹鍑轰簡鍝嶅簲寮忓竷灞€锛?012骞存帹鍑轰簡濯掍綋鏌ヨ锛堜篃鍙柇鐐癸紝杩欎釜姒傚康鍚庨潰鍐嶅叿浣撳睍寮€瑙ｉ噴锛夈€傚獟浣撴煡璇㈠彲浠ョЩ鍔ㄥ唴瀹癸紝鏀瑰彉鏂囧瓧澶у皬锛岄殣钘忔垨鏄剧ず鍐呭鍧楋紝璋冩暣杈硅窛鍜岀┖鐧斤紝浠ュ強璋冩暣鍏朵粬鐨凜SS鏍峰紡銆傚洜涓烘湁浜嗚繖涓や釜涓滆タ锛屼笂绾夸互鍚庯紝鑷€傚簲甯冨眬鍜屽搷搴斿紡甯冨眬灏变綔涓烘洿鍏堣繘鐨勫竷灞€鐢ㄦ硶鑰岃杩呴€熷湴浣跨敤銆?/p>
鑷€傚簲鍜屽搷搴斿紡甯冨眬鍒濆鑰呯粡甯镐細娣锋穯锛屼粬浠殑鍘熺悊纭疄鏄潪甯哥浉浼肩殑锛岄兘鏄娴嬭澶囥€傚厛鏉ョ湅涓嬩粬浠殑鍖哄埆锛?/p>
1锛夎嚜閫傚簲锛圓daptive锛?/strong>
鍩轰簬鐢ㄦ埛浣撻獙锛屾妧鏈汉鍛樿嚦灏戦渶瑕佸紑鍙戜笁濂楃晫闈紝灏嗗樊鍒緝澶х殑灞忓箷灏哄锛堝PC绔€佹墜鏈虹銆佸钩鏉跨锛夛紝鍘诲垱寤哄涓笉鍚岀殑璁捐绋匡紝姣忎竴涓璁＄鍘诲搴斾竴涓敤鎴峰疄闄呯殑灏哄鑼冨洿锛屾牴鎹鍏堣缃殑鍒ゆ柇鏍囧噯鑼冨洿杩涜閫傞厤銆傚儚澶у鏁扮殑骞冲彴缃戠珯銆佸晢鍩庣綉绔欓兘浣跨敤鑷€傚簲鎶€鏈繘琛屽紑鍙戙€?/p>
2锛夊搷搴斿紡锛圧esponsive锛?/strong>
鎶€鏈汉鍛樺彧闇€寮€鍙戜竴濂楃晫闈紝鑰屼笉鏄负姣忎釜缁堢鍋氫竴涓壒瀹氱殑鐗堟湰锛屽湪浠ｇ爜涓祵鍏ヤ竴浜涘竷灞€鐨勫垽鏂紝閫氳繃妫€娴嬩笉鍚屽垎杈ㄧ巼锛屼唬鐮佽嚜鍔ㄨ繘琛屽鐞嗭紝瀹炵幇甯冨眬鍙樺寲銆佸昂瀵哥缉鏀剧瓑锛屽疄鐜颁笉鍚屽竷灞€鍜屽唴瀹归€傞厤銆?/p>
姝ゆ椂璁捐甯堢湅鍒拌繖鏄笉鏄細鏈夌枒闂煠旓笍锛屾€庝箞鍒ゆ柇涓€涓嚎涓婄殑缃戝潃鏄搷搴斿紡杩樻槸鑷€傚簲鍛紵
鏈変釜寰堢畝鍗曠殑鏂规硶锛氬悓涓€涓〉闈㈠湪涓嶅悓灏哄鐨勫睆骞曚笂璁块棶鏃讹紝鐪嬬綉鍧€鏄惁涓€鏍凤紝鍙湁涓€涓綉鍧€涓哄搷搴斿紡锛屾湁澶氫釜涓嶅悓鐨勭綉鍧€涓鸿嚜閫傚簲
浣跨敤鍝嶅簲寮忥細缃戠珯鍔熻兘涓嶅锛岀敤鎴蜂氦浜掑皯锛屽崌绾т綆棰戞垨涓昏浣跨敤鍦烘櫙鍦ㄦ闈㈢锛屽缓璁娇鐢ㄥ搷搴斿紡銆傚搷搴斿紡鎴愭湰杈冧綆锛屼粠杩愯惀鐨勯毦鏄撳拰缁存姢鐨勪究鍒╂€ц€冭檻浼氭洿濂斤紝鍙鎼炲畾缃戦〉绔紝鍏朵粬鐨勪篃閮芥悶瀹氫簡銆備緥濡傚畼缃戙€丅绔悗鍙?/p>
浣跨敤鑷€傚簲锛氶渶瑕佸吋椤剧敤鎴峰湪妗岄潰绔€丳ad绔€佺Щ鍔ㄧ绛夊涓澶囬棿鐨勬搷浣滀範鎯紝鎴栦粠椤甸潰涓€у寲澶氬姛鑳芥柟闈㈣€冭檻锛岃嚜閫傚簲璁捐鏇村悎閫傘€傚洜涓鸿繖鏍峰彲浠ユ洿濂界殑涓虹敤鎴锋彁渚涘姛鑳藉叏闈紝鐢ㄦ埛浣撻獙鏇村ソ鐨勭晫闈€備緥濡傚姛鑳藉鏉傘€佺敤鎴蜂氦浜掗绻佺殑缃戠珯銆佺數鍟嗙被缃戠珯锛岀敤鎴烽噺杈冨ぇ鐨勭綉绔欓€夋嫨鑷€傚簲鏇村悎閫傘€?/p>
鍝嶅簲寮忓彲浠ュ搷搴旂殑鍓嶆彁鏈変袱鐐癸細
鑰屾爡鏍肩郴缁熼〉闈㈠竷灞€鍏锋湁瑙勫緥鎬с€佸厓绱犲楂樺彲鐢ㄧ櫨鍒嗘瘮琛ㄧず锛岃繖涓ょ偣姝ｆ槸鏍呮牸绯荤粺鏈韩灏卞叿鏈夌殑鍏稿瀷鐗圭偣锛屾垜浠€忚繃鏍呮牸鍖栧竷灞€鐨勮璁＄郴缁熶负鍝嶅簲寮忛€傞厤鎵撲笅鑹ソ鐨勫熀纭€銆?/p>
瀹氫箟鍝嶅簲寮忚鍒欐椂锛岃繕闇€缁撳悎涓氬姟鐨勫睘鎬у幓鍒跺畾銆傞偅鍦ㄥ竷灞€鏃讹紝鍐呭鍖烘ā鍧楃粨鏋勫浣曞彉鍖栧憿锛熺畝鍗曚粙缁嶅嚑绉嶅父瑙佺殑鍙樺寲褰㈠紡锛?/p>
1锛夋媺浼稿竷灞€
甯冨眬涓嶅彉锛屽唴瀹瑰湪灞忓箷鏄剧ず鍖哄煙鍐呰繘琛岀浉瀵规媺浼革紝浠ヨ揪鍒板竷灞€瀹屾暣銆?/p>
濡備笅鍥惧井淇″叕浼楀彿鍚庡彴鐨勫崱鐗囬€傞厤閲囩敤鐨勫氨鏄媺浼稿竷灞€鐨勫舰寮忥紝杩欑瀹炵幇鏂瑰紡鎴愭湰浣庯紝鍦ㄥ搷搴斿紡涓ぇ閲忕殑琚繍鐢ㄣ€?/p>
2锛夌瓑姣旂缉鏀?/strong>
甯冨眬涓嶅彉锛屽唴瀹瑰湪灞忓箷鐨勭浉瀵逛綅缃繘琛岀瓑姣斾緥缂╂斁锛岃繖绉嶆柟寮忎笉浼氫骇鐢熶换浣曞竷灞€閲嶆瀯褰卞搷锛岄€傞厤绠€鍗曘€?/p>
鈥?
涓€鑸湪甯︽湁鍥剧墖鏄剧ず鍦烘櫙涓娇鐢紝濡傜珯閰风殑甯冨眬閲囩敤鐨勫氨鏄繖绉嶅舰寮忥紝闇€瑕佹敞鎰忓浘鐗囩礌鏉愭斁澶у悗娓呮櫚搴︾殑闂銆?/p>
3锛夋墿灞曞竷灞€
甯冨眬涓嶅彉锛屽唴瀹瑰彲鐏垫椿鎸夌収灞忓箷姣斾緥杩涜澧炲姞鎴栧噺灏戙€佹墿灞曚负澶氳鎴栧鍒楃瓑銆傞鍏堥渶瑕侀€氳繃鏈€灏忓崟浣嶉€夋嫨涓€涓熀鏈昂瀵革紝鐒跺悗浠ュ熀鏈昂瀵哥殑鍊嶆暟鏋勫缓姣忎釜鐩掑瓙妗嗭紝灏变細鍑虹幇涓€涓釜缃戞牸
濡備笅鍥捐姳鐡ｇ殑甯冨眬椤甸潰鎵€绀猴紝鍦ㄧ綉椤垫敹缂╄繃绋嬩腑锛岀粡杩囦竴涓柇鐐瑰氨浼氳嚜鍔ㄥ噺灏戞渶杈圭紭鍏冪礌锛屽叾浠栧厓绱犲熀鏈繚鎸佷笉鍙樸€傛爡鏍煎垪鏁伴殢鐫€娴忚鍣ㄥ搴︾殑鍑忓皯鑰屽噺灏戯紝杈圭紭鍥惧潡鑷姩鎹㈣锛屾垨鑰呮湁鏃朵細婧㈠嚭婊氬姩鏉°€傞噰鐢ㄦ鏂规闇€瑕佸仛鏁版嵁婧愮殑琛ヨ冻锛屼繚璇佸唴瀹瑰睍绀哄悎鐞嗐€?/p>
4锛夊浐瀹氬竷灞€
浠ュ儚绱爌x浣滀负椤甸潰鐨勫熀鏈崟浣嶏紝鍐呭涓嶄細闅忕潃鏈韩绐楀彛瀹藉害杩涜鏀瑰彉锛岀獥鍙ｇ缉灏忓悗鏃跺唴瀹逛細琚伄鎸?/p>
濡備汉浜洪兘鏄骇鍝佺粡鐞嗙綉绔欌€嶏紝鏁翠釜缃戠珯閲囩敤鐨勬槸鍥哄畾甯冨眬锛屽苟娌℃湁杩涜閫傞厤銆傚彲鐢ㄦ€т笉寮猴紝灞忓箷鍒嗚鲸鐜囪繃灏忔椂鍐呭浼氳閬尅
5锛夊垎鏍忓竷灞€
甯冨眬鏀瑰彉锛屽厖鍒嗗埄鐢ㄤ笉鍚岃澶囥€佷笉鍚屽睆骞曞昂瀵哥殑宸紓鍖栵紝閫氳繃鍒嗘爮甯冨眬褰㈠紡閲嶆柊瀵瑰唴瀹瑰睍绀哄仛浣嶇疆鍙樺寲锛岃繘琛屾暣涓睆骞曟洿鍚堢悊鍖栫殑鍒嗛厤銆傛甯冨眬椤甸潰缁撴瀯浜х敓鍙樺寲锛岄渶瑕侀噸鏋刄I妗嗘灦锛屾湁涓€瀹氱殑寮€鍙戞垚鏈€?/p>
6锛夋贩鍚堝竷灞€
寰堝鏃跺€欙紝鍗曚竴鏂瑰紡鐨勫竷灞€鍝嶅簲鏃犳硶婊¤冻鐞嗘兂鏁堟灉锛岄渶瑕佺粨鍚堝绉嶇粍鍚堟柟寮忥紝浣嗗師鍒欎笂灏藉彲鑳芥槸淇濇寔绠€鍗曡交宸э紝鑰屼笖鍚屼竴鏂偣鍐咃紙鍙戠敓甯冨眬鏀瑰彉鐨勪复鐣岀偣绉颁箣涓烘柇鐐癸紝鍚庨潰鍐呭浼氳鍒帮級淇濇寔缁熶竴閫昏緫銆?/p>
鍚﹀垯椤甸潰瀹炵幇澶繃澶嶆潅涔熶細褰卞搷鏁翠綋浣撻獙鍜岄〉闈㈡€ц兘銆備竴鑸€氭爮銆佺瓑鍒嗙粨鏋勭殑甯冨眬閫傚悎閲囩敤寮规€у竷灞€鏂瑰紡锛岄潪绛夊垎鐨勫鏍忕粨鏋勫竷灞€鍒欓渶瑕侀噰鐢ㄦ贩鍚堝竷灞€鐨勫疄鐜版柟寮忋€?/p>
浠nt Design Pro鐨勫搷搴旀柟寮忎负渚嬶紝灏遍噰鐢ㄤ簡娣峰悎甯冨眬锛屽垎鍒繍鐢ㄤ簡鎷変几甯冨眬+鎵╁睍甯冨眬+鍒嗘爮甯冨眬+鍥哄畾甯冨眬
鍝嶅簲绛栫暐灏辨槸褰撹绐楋紙Viewport锛夊彂鐢熷彉鍖栨椂锛屽唴瀹瑰尯鍩熺殑鍏冪礌濡備綍鍘诲搷搴旓紝鍏蜂綋鍒版垜浠綋鍓嶇殑鏍呮牸绯荤粺锛屽氨鏄疌olumns銆丟utters銆丮argins浠ュ強鐢盋olumns璺烥utter缁勬垚鐨勭洅瀛愶紙Box锛夊洓鑰呯殑鍊硷紙涓昏鏄搴︼級濡備綍鍙樺寲锛屼互鍙婂湪杩欑鍙樺寲涔嬩笅鎴戜滑椤甸潰鐨勫竷灞€濡備綍璋冩暣銆?/p>
杩欓噷鎴戜滑鏈変釜姒傚康闇€瑕佸厛浜嗚В涓€涓嬶細
鏂偣锛氭瘡涓绐楀搴︾殑鏈€灏忓€兼槸瑙﹀彂鍝嶅簲鐨勫叧閿€硷紝杩欎釜鍏抽敭鍊煎嵆鏂偣銆傛柇鐐规槸鍏锋湁鐗瑰畾甯冨眬瑕佹眰鐨勯瀹氬睆骞曞昂瀵哥殑鑼冨洿锛屽湪缁欏畾鐨勬柇鐐硅寖鍥村唴锛屽竷灞€浼氭牴鎹睆骞曞ぇ灏忓拰鏂瑰悜杩涜璋冩暣锛岃秴鍑鸿寖鍥村垯鐩稿綋浜庤揪鍒版煇涓复鐣岀偣锛岀晫闈㈠竷灞€浼氬彂鐢熷彉鍖栥€?/p>
浠?Ant Design Pro 鐨勯〉闈㈣繘琛屾媶瑙ｏ紝鐢ㄦ祻瑙堝櫒鎵撳紑涓€涓搷搴斿紡缃戠珯锛屾鏌ュ厓绱狅紝鍙充笂瑙掍細鏄剧ず瑙嗙獥褰撳墠鐨勫垎杈ㄧ巼锛屾參鎱㈢缉灏忚绐楃殑瀹藉害锛屾壘鍒伴〉闈㈠竷灞€鐨勫彉鍖栫偣锛屽氨鏄垜浠笂闈㈣鍒扮殑鏂偣鎴栬€呮鏂偣銆?/p>
浣犱細鍙戠幇瀹冨湪 576銆?68銆?92 鐨勫昂瀵镐腑锛岄〉闈㈠竷灞€鍙戠敓鍙樺寲锛岀劧鍚庢牴鎹睆骞曟柇鐐逛箣闂寸殑椤甸潰甯冨眬锛岄噰鐢ㄥ悜涓嬪吋瀹圭殑閫傞厤鏂瑰紡,鍝嶅簲绛栫暐濡備笅鍥?/p>
闇€瑕佺壒娈婅鏄庣殑鏄紝鍦ㄨ濂楀搷搴旂瓥鐣ヤ腑锛岄〉闈㈡渶灏忓搷搴斿埌576鐨勯〉闈㈠搴︼紝褰撹绐楀埌杈捐繖涓搴︽椂锛屾祻瑙堝櫒浼氶檺鍒惰绐楄繘涓€姝ョ缉灏忥紝鍥犱负褰撻〉闈㈠搴︽瘮瀹冭繕灏忔椂宸茬粡鏃犳硶鏈夋晥灞曠ず鏁版嵁浜嗭紝鎵€浠ヨ繘涓€姝ョ殑缂╂斁鏄鏃犳剰涔夌殑銆?/p>
涓婄瘒涓垜浠凡缁忓畬鎴愪簡鍩哄噯灏哄1440*900px鐨勮璁★紝閭ｄ笅闈㈢瑪鑰呬粛鐒朵互杩欎釜妗堜緥鏁欏ぇ瀹跺浣曡繘琛岄€傞厤銆?/p>
棣栧厛鎴戜滑鍏堟潵鍒嗘瀽涓€涓嬶紝鍐呭鍖哄煙鏍规嵁瀹藉害瀹氫箟涓€鑸兘涓ょ鏂瑰紡
1锛夊唴瀹瑰尯鍩熷畾瀹?/strong>
鍐呭鍖哄煙瀹氬鏄寚鍐呭鍖哄煙鍦ㄦ瘡涓€缁勮绐楀搴﹀尯闂村唴锛岄兘浼氳瀹氫竴涓渶澶у€硷紙Max-with锛夛紝褰撳唴瀹瑰尯鍩熷搴﹀皬浜庢渶澶у€兼椂锛屽尯鍩熷唴鍏冪礌浼氬搷搴旇绐楃殑鍙樺寲锛涜揪鍒版渶澶у€煎悗锛屽唴瀹瑰尯鍩熶笉鍐嶅搷搴旇绐楃殑鍙樺寲锛岃€屾槸瀹藉害淇濇寔璇ユ渶澶у搴﹀€间笉鍙橈紝姝ゆ椂鎴戜滑閫氳繃澧炲姞椤甸潰涓や晶鐨刴argin鍊兼潵鍝嶅簲瑙嗙獥鐨勫彉鍖栥€侳lex Margin灏辨槸搴斿姝ゆ儏鍐电殑鍔ㄦ€侀〉杈硅窛
鈥嶁€?锛夊唴瀹瑰尯鍩熷搴︽祦寮?/strong>
鍐呭鍖哄煙瀹藉害娴佸紡 (fluid-width Container) 鐨勫悗鍙扮郴缁燂紝瀹冪殑鍐呭鍖哄煙 (Container) 璺濈椤甸潰涓や晶鐨勯〉杈硅窛Margin鏄畾鍊硷紝鍥犳瑙嗙獥鏈夊澶у唴瀹瑰尯鍩熷氨灞曠ず澶氬ぇ
妗堜緥鏄乏鍙冲竷灞€锛屽唴瀹瑰尯鏄腑鍚庡彴鐨勫浘琛紝鑰冭檻鍒板叏灞€杩樻湁琛ㄥ崟銆佽鎯呴〉銆佽〃鏍肩瓑璐熻矗椤甸潰锛屽唴瀹瑰尯鍩熸爡鏍间竴鐩磋窡闅忚绐楀彉鍖栵紝澶嶆潅甯冨眬涓嬩笉鑷充簬澶揣鍑戯紝鐢ㄦ埛鑳界湅鍒扮殑鍐呭涔熸洿澶氥€傛墍浠ユ渚嬩腑鎴戜滑閲囩敤鍐呭鍖哄煙鐨勫搴︽祦寮忋€?/p>
纭畾浜嗗唴瀹瑰尯鍩熺殑鍝嶅簲鏂瑰紡鍚庯紝鎴戜滑鍐嶆潵鑰冭檻閲岄潰妯″潡鐨勫搷搴旇鍒欙紝杩欓噷鍙互鍙傝€傾nt Design Pro 鐨勫搷搴旀柟寮忥紝鍐呭妯″潡閲囩敤鎷変几+鎷撳睍+鍒嗘爮缁撳悎鐨勬贩鍚堝竷灞€閫傞厤鏂瑰紡锛屽涓嬪浘鎵€绀?/p>
缁撳悎鍚勪笟鍔℃ā鍧楃殑灞曠ず鏁堟灉锛屽皢灞忓箷鏂偣鍙互鍒掑垎涓?320銆?76銆?68銆?92銆?200锛屽搷搴旂瓥鐣ュ涓嬪浘锛?/p>
涓轰簡鏂逛究鐩磋鐨勫悜寮€鍙戝伐绋嬪笀涓庡洟闃熼噷鐨勫叾瀹冨皬浼欎即娌熼€氾紝鎴戜滑鍙互鎶婅繖涓搷搴旂瓥鐣ュ埗浣滄垚濡備笅鐨勮〃鏍硷紝骞跺湪椤甸潰涓爣娉ㄨ鏄庣浉鍏冲厓绱犵殑鍙樺寲瑙勫緥锛屼緵鑷繁涓庡紑鍙戝弬鑰冦€?/p>
Q1:鏈夎鑰呮瘮杈冪枒鎯戞垜浠璁＄鍩哄噯灏哄鏄浣曞畾鐨?
A1:鎴戜滑涓€鑸垎涓ゅぇ绫绘儏鍐垫潵璁ㄨ杩欎釜闂
鑷爺绯荤粺缁欏叕鍙稿唴閮ㄥ憳宸ヤ娇鐢細鐢变簬鍏徃鎵归噺閲囪喘璁惧鐨勫師鍥狅紝鍏徃鍐呴儴鍛樺伐鐨勫睆骞曞垎杈ㄧ巼寰€寰€浼氭瘮杈冪粺涓€锛岃繖绉嶆儏鍐典笅鎴戜滑闇€瑕佹嬁鍒拌繖涓暟鎹紝鐒跺悗浠ュ畠浣滀负鍩哄噯灏哄寮€濮嬭璁°€傚洜涓鸿櫧鐒跺搷搴斿紡璁捐鐨勭洰鏍囨槸璁╅〉闈㈠湪姣忎釜鍒嗚鲸鐜囦笅閮芥湁鏈€浣崇殑浣撻獙锛屼絾瀹為檯寮€鍙戜腑姣曠珶瀛樺湪鎹熷潖锛岃璁¤繕鍘熷緢闅?00%锛屽洜鑰屽ぇ澶氭暟鎯呭喌涓嬭繕鏄熀浜庡熀鍑嗗昂瀵哥殑璁捐涓庡紑鍙戯紝鍦ㄧ敤鎴风鏄剧ず鏁堟灉鏈€浣炽€佷綋楠屾渶濂姐€?/p>
绯荤粺鏄钩鍙扮骇闈㈠悜鍏ㄧ綉鐢ㄦ埛锛屾垨鑰呰櫧鐒舵槸鍏徃鍐呴儴浣跨敤锛屼絾鏄苟涓嶈兘缁熻鍒板唴閮ㄥ憳宸ュ睆骞曞垎杈ㄧ巼鎯呭喌锛屽氨鍙互浠?440*900浣滀负鍩哄噯灏哄寮€濮嬭璁°€?/p>
鍥藉唴PC绔睆骞曞垎杈ㄧ巼鎺掑悕鍓嶄笁鐨勫垎鏄?920*1080銆?366*768銆?440*900锛涘彲浠ョ湅鍑?920px 鍗犳瘮鏈€澶氾紝浣嗕互瀹冧綔涓哄熀鍦ㄩ潰鍚戝皬灏哄灞忓箷鐨勬椂鍊欏鏁伴兘寰堜笉鍙嬪ソ锛岃€?440鐨勫昂瀵稿疄闄呬笂鏄浜庝腑闂翠綅缃紝濡傛灉浠ュ畠涓哄熀鍑嗚璁★紝鏈€缁堝悜涓婂悜涓嬪搷搴旈€傞厤鍚庯紝鐩稿璇樊鏈€灏忥紝浠庤€岃揪鎴愮敤鎴蜂綋楠岀殑鏈€澶у叕绾︽暟銆?/p>
Q2:涓悗鍙扮郴缁熷繀椤诲仛鎴愬搷搴斿紡鐨勫悧锛?/p>
A2:骞朵笉鏄繀椤荤殑锛屾槸鍚﹁鍋氬搷搴斿紡涓昏鏄牴鎹悗鍙颁骇鍝侀潰鍚戠殑鐢ㄦ埛鏉ュ畾鐨勩€傚鏋滄槸鍏徃鍐呴儴浣跨敤鐨勭郴缁燂紝涓斿憳宸ラ厤澶囩殑妗岄潰璁惧閮芥槸鏈夌粺涓€鐨勫垎杈ㄧ巼锛屽氨鍙互涓嶅仛鍝嶅簲寮忥紱濡傛灉鏄潰鍚戝叏缃戠敤鎴风殑鍚庡彴浜у搧鎴栧叕鍙稿唴閮ㄧ殑妗岄潰璁惧骞舵病鏈夌粺涓€鐨勫垎杈ㄧ巼瑙勬牸锛岄偅涔堝氨闇€瑕佸仛鎴愬搷搴斿紡銆傚綋鐒讹紝瀹為檯涓氬姟鏄惁鍋氬搷搴斿紡杩樻湁鎶€鏈疄鐜般€佹椂闂淬€佷汉鍛樻垚鏈瓑鍚勬柟闈㈠洜绱犵殑鑰冭檻锛屾妧鏈晶鍙互鍏堜笉瀹炵幇锛屼负浜嗗悗鏈熺殑鎷撳睍鎬э紝璁捐渚ч渶瑕佸厛琛岃€冭檻
Q3:濡備綍閫夋嫨鏂偣锛屼负浠€涔堜笉鏄熀浜庤澶囨柇鐐?/p>
A3:鏂偣鐨勮缃竴瀹氭槸鍩轰簬椤甸潰鍏蜂綋鍐呭锛屽苟鍙傝€冪綉绔欑敤鎴风殑璁惧鍒嗚鲸鐜囨暟鎹紝璁捐杩囩▼涓湪涓€瀹氬尯闂村唴鎷夊崌鎴栧帇缂╋紝宸茬粡鏃犳硶鐢ㄧ浉鍚岀殑甯冨眬鍐呭鏃讹紝蹇呴』鏀瑰彉鍐呭灞曠幇鏂瑰紡鏃讹紝鑰屼骇鐢熺殑鍏抽敭灏哄鐨勮妭鐐广€?/p>
灏嗘柇鐐硅缃负涓庢煇浜涘父瑙佽澶囧搴︾浉鍚岋紝椤甸潰灞曠幇鐨勬晥鏋滀笉浣崇殑鍙兘鎬ф瀬楂樸€?/p>
閭ｄ箞瀹屽叏涓嶈€冭檻璁惧鍚楋紵
涓嶆槸鐨勶紝璁惧浠嶇劧寰堥噸瑕侊紝鍙槸涓嶅簲棣栧厛鑰冭檻瀹冧滑銆傚湪涓€寮€濮嬫渶濂芥槸涓嶈鍙€冭檻椤甸潰璁捐鍦ㄧ壒瀹氳澶囦笂鐨勬樉绀烘晥鏋滐紝鑰屾槸搴旇浠庢洿閫氱敤鐨勮闂澶囷紝姣斿鎵嬫満灏哄銆佸钩鏉跨數鑴戝昂瀵稿強妗岄潰鏄剧ず鍣ㄥ昂瀵稿幓鑰冭檻瀹冦€?/p>
鏈枃鐢?@涓旀浖B绔璁鍒樼編鑺?鍘熷垱鍙戝竷浜庝汉浜洪兘鏄骇鍝佺粡鐞嗭紝鏈粡璁稿彲锛岀姝㈣浆杞姐€?/p>
棰樺浘鏉ヨ嚜 Unsplash锛屽熀浜嶤C0鍗忚銆?/p>
瑷€
褰撴垜浠嬁鍒颁竴涓?PC 绔〉闈㈢殑璁捐绋跨殑鏃跺€欙紝寰€寰€浼氬彂鐜伴〉闈㈢殑甯冨眬骞朵笉鏄殢鎰忕殑锛岃€屾槸閬靛惊鐨勪竴瀹氱殑瑙勫緥锛氳涓庤涔嬮棿浼氫互鏌愮鏂瑰紡瀵归綈銆傚浜庤繖鏍风殑璁捐绋匡紝鎴戜滑鍙互浣跨敤鏍呮牸甯冨眬鏉ュ疄鐜般€?/p>
鏃╁湪 Bootstrap 涓€缁熸睙婀栫殑鏃朵唬锛屾爡鏍煎竷灞€鐨勬蹇靛氨宸叉繁鍏ヤ汉蹇冿紝鏁翠釜甯冨眬灏辨槸涓€涓簩缁寸粨鏋勶紝鍖呮嫭鍒楀拰琛岋紝 Bootstrap 浼氭妸灞忓箷鍒嗘垚 12 鍒楋紝杩樻彁渚涗簡涓€浜涢潪甯告柟渚跨殑 CSS 鍚嶈鎴戜滑鏉ユ寚瀹氭瘡鍒楀崰鐨勫搴︾櫨鍒嗘瘮锛屽苟涓旇繕閫氳繃濯掍綋鏌ヨ鍋氫簡涓嶅悓灞忓箷灏哄鐨勯€傚簲銆?/p>
element-ui 涔熷疄鐜颁簡绫讳技 Bootstrap 鐨勬爡鏍煎竷灞€绯荤粺锛岄偅涔堝熀浜?Vue 鎶€鏈爤锛屽畠鏄浣曞疄鐜扮殑鍛紵
闇€姹傚垎鏋?/p>
鍜?Bootstrap 12 鍒嗘爮涓嶅悓鐨勬槸锛宔lement-ui 鐩爣鏄彁渚涚殑鏄洿缁嗙矑搴︾殑 24 鍒嗘爮锛岃繀閫熺畝渚垮湴鍒涘缓甯冨眬锛屽啓娉曞ぇ鑷村涓嬶細
<el-row> <el-col>aaa</el-col> <el-col>bbb</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
杩欏氨鏄簩缁村竷灞€鐨勯洀褰紝鎴戜滑浼氭妸姣忎釜鍒楃殑鍐呭鍐欏湪 <el-col></el-col> 涔嬮棿锛岄櫎姝や箣澶栵紝鎴戜滑杩橀渶瑕佹敮鎸佹帶鍒舵瘡涓?<el-col> 鎵€鍗犵殑瀹藉害鑷敱缁勫悎甯冨眬锛涙敮鎸佸垎鏍忎箣闂村瓨鍦ㄩ棿闅旓紱鏀寔鍋忕Щ鎸囧畾鐨勬爮鏁帮紱鏀寔鍒嗘爮涓嶅悓鐨勫榻愭柟寮忕瓑銆?/p>
浜嗚В浜?element-ui Layout 甯冨眬缁勪欢鐨勯渶姹傚悗锛屾垜浠潵鍒嗘瀽瀹冪殑璁捐鍜屽疄鐜般€?/p>
璁捐鍜屽疄鐜?/p>
缁勪欢鐨勬覆鏌?/p>
鍥為【鍓嶉潰鐨勪緥瀛愶紝浠庡啓娉曚笂鐪嬶紝鎴戜滑闇€瑕佽璁?2 涓粍浠讹紝el-row 鍜?el-col 缁勪欢锛屽垎鍒唬琛ㄨ鍜屽垪锛涗粠 Vue 鐨勮娉曚笂鐪嬶紝杩欎咯缁勪欢閮借鏀寔鎻掓Ы锛堝洜涓哄湪鑷畾涔夌粍浠舵爣绛惧唴閮ㄧ殑鍐呭閮藉垎鍙戝埌缁勪欢鐨?slot 涓簡锛夛紱浠?HTML 鐨勬覆鏌撶粨鏋滀笂鐪嬶紝鎴戜滑甯屾湜妯℃澘浼氭覆鏌撴垚锛?/p>
<div class="el-row"> <div class="el-col">aaa</div> <div class="el-col">bbb</div> </div> <div class="el-row"> ... </div> 澶嶅埗浠ｇ爜
鎯宠揪鍒颁笂杩伴渶姹傦紝缁勪欢鐨勬ā鏉垮彲浠ラ潪甯哥畝鍗曘€?/p>
el-row 缁勪欢妯℃澘浠ｇ爜濡備笅锛?/p>
<div class="el-row"> <slot></slot> </div> 澶嶅埗浠ｇ爜
el-col 缁勪欢浠ｇ爜濡備笅锛?/p>
<div class="el-col"> <slot></slot> </div> 澶嶅埗浠ｇ爜
杩欎釜鏃跺€欙紝鏂伴渶姹傛潵浜嗭紝鎴戝笇鏈?el-row 鍜?el-col 缁勪欢涓嶄粎鑳芥覆鏌撴垚 div锛岃繕鍙互娓叉煋鎴愪换鎰忔垜鎯虫寚瀹氱殑鏍囩銆?閭ｄ箞闄や簡鎴戜滑瑕佹敮鎸佷竴涓?tag 鐨?prop 涔嬪锛屼粎鐢ㄦā鏉挎槸闅句互瀹炵幇浜嗐€?/p>
鎴戜滑鐭ラ亾 Vue 鐨勬ā鏉挎渶缁堜細缂栬瘧鎴?render 鍑芥暟锛孷ue 鐨勭粍浠朵篃鏀寔鐩存帴鎵嬪啓 render 鍑芥暟锛岄偅杩欎釜闇€姹傜敤 render 鍑芥暟瀹炵幇灏遍潪甯哥畝鍗曚簡銆?/p>
el-row 缁勪欢锛?/p>
render(h) {
return h(this.tag, {
class: [
'el-row',
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
el-col 缁勪欢锛?/p>
render(h) {
return h(this.tag, {
class: [
'el-col',
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
鍏朵腑锛宼ag 鏄畾涔夊湪 props 涓殑锛宧 鏄?Vue 鍐呴儴瀹炵幇鐨?$createElement 鍑芥暟锛屽鏋滃 render 鍑芥暟璇硶杩樹笉澶噦鐨勫悓瀛︼紝寤鸿鍘荤湅 Vue 鐨勫畼缃戞枃妗?render 鍑芥暟閮ㄥ垎銆?/p>
浜嗚В浜嗙粍浠舵槸濡備綍娓叉煋涔嬪悗锛屾垜浠潵缁?Layout 缁勪欢鎵╁睍涓€浜?feature 銆?/p>
鍒嗘爮甯冨眬
Layout 甯冨眬鐨勪富瑕佺洰鏍囨槸鏀寔 24 鍒嗘爮锛屽嵆涓€琛岃兘琚垏鎴?24 浠斤紝閭ｄ箞瀵逛簬姣忎竴涓?el-col 锛屾垜浠兂瑕佺煡閬撳畠鐨勫崰姣旓紝鍙渶瑕佹寚瀹氬畠鍦?24 浠戒腑鍒嗛厤鐨勪唤鏁板嵆鍙€?/p>
浜庢槸鎴戜滑缁欏垰鎵嶇殑绀轰緥鍔犱笂涓€浜涢厤缃細
<el-row> <el-col :span="8">aaa</el-col> <el-col :span="16">bbb</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
鏉ョ湅绗竴琛岋紝绗竴鍒?aaa 鍗?8 浠斤紝绗簩鍒?bbb 鍗?16 浠姐€傛€诲叡瀹藉害鏄?24 浠斤紝缁忚繃绠€鍗曠殑鏁板鍏紡璁＄畻锛宎aa 鍗犳€诲搴︾殑 1/3锛岃€?bbb 鍗犳€诲搴︾殑 2/3锛岃繘鑰屾帹瀵煎嚭姣忎竴鍒楁寚瀹?span 浠藉氨鏄崰鎬诲搴︾殑 span/24銆?/p>
榛樿鎯呭喌涓?div 鐨勫搴︽槸 100% 鐙崰涓€琛岀殑锛屼负浜嗚澶氫釜 el-col 鍦ㄤ竴琛屾樉绀猴紝鎴戜滑鍙渶瑕佽姣忎釜 el-col 鐨勫鍗犱竴瀹氱殑鐧惧垎姣旓紝鍗冲疄鐜颁簡鍒嗘爮鏁堟灉銆傝缃笉鍚岀殑瀹藉害鐧惧垎姣斿彧闇€瑕佽缃笉鍚岀殑 CSS 鍗冲彲瀹炵幇锛屾瘮濡傚綋鏌愬垪鍗?12 浠界殑鏃跺€欙紝閭ｄ箞瀹冨搴旂殑 CSS 濡備笅锛?/p>
.el-col-12 {
width: 50%
}
澶嶅埗浠ｇ爜
涓轰簡婊¤冻 24 绉嶆儏鍐碉紝element-ui 浣跨敤浜?sass 鐨勬帶鍒舵寚浠わ紝閰嶅悎鍩烘湰鐨勮绠楀叕寮忥細
.el-col-0 {
display: none;
}
@for $i from 0 through 24 {
.el-col-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
}
澶嶅埗浠ｇ爜
鎵€浠ュ綋鎴戜滑缁?el-col 缁勪欢浼犲叆浜?span 灞炴€х殑鏃跺€欙紝鍙渶瑕佺粰瀵瑰簲鐨勮妭鐐规覆鏌撶敓鎴愬搴旂殑 CSS 鍗冲彲锛屼簬鏄垜浠彲浠ユ墿灞?render 鍑芥暟锛?/p>
render(h) {
let classList=[];
classList.push(`el-col-${this.span}`);
return h(this.tag, {
class: [
'el-col',
classList
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
杩欐牱鍙鎸囧畾 span 灞炴€х殑鍒楀氨浼氭坊鍔?el-col-${span} 鐨勬牱寮忥紝瀹炵幇浜嗗垎鏍忓竷灞€鐨勯渶姹傘€?/p>
鍒嗘爮闂撮殧
瀵逛簬鏍呮牸甯冨眬鏉ヨ锛屽垪涓庡垪涔嬮棿鏈変竴瀹氶棿闅旂┖闅欐槸甯歌鐨勯渶姹傦紝杩欎釜闇€姹傜殑浣滅敤鍩熸槸琛岋紝鎵€浠ユ垜浠簲璇ョ粰 el-row 缁勪欢娣诲姞涓€涓?gutter 鐨勯厤缃紝濡備笅锛?/p>
<el-row :gutter="20"> <el-col :span="8">aaa</el-col> <el-col :span="16">bbb</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
鏈変簡閰嶇疆锛屾帴涓嬫潵濡備綍瀹炵幇闂撮殧鍛紵瀹為檯涓婇潪甯哥畝鍗曪紝鎯宠薄涓€涓嬶紝2 涓垪涔嬮棿鏈?20 鍍忕礌鐨勯棿闅旓紝濡傛灉鎴戜滑姣忓垪鍚勫線涓€杈规敹缂?10 鍍忕礌锛屾槸涓嶆槸鐪嬩笂鍘诲氨鏈?20 鍍忕礌浜嗗憿銆?/p>
鍏堢湅涓€涓?el-col 缁勪欢鐨勫疄鐜帮細
computed: {
gutter() {
let parent=this.$parent;
while (parent && parent.$options.componentName !=='ElRow') {
parent=parent.$parent;
}
return parent ? parent.gutter : 0;
}
},
render(h) {
let classList=[];
classList.push(`el-col-${this.span}`);
let style={};
if (this.gutter) {
style.paddingLeft=this.gutter / 2 + 'px';
style.paddingRight=style.paddingLeft;
}
return h(this.tag, {
class: [
'el-col',
classList
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
杩欓噷浣跨敤浜嗚绠楀睘鎬у幓璁＄畻 gutter锛屽叾瀹炴槸姣旇緝鏈夎叮鐨勶紝瀹冮€氳繃 $parent 寰€澶栧眰鏌ユ壘 el-row锛岃幏鍙栧埌缁勪欢鐨勫疄渚嬶紝鐒跺悗鑾峰彇瀹冪殑 gutter 灞炴€э紝杩欐牱灏卞缓绔嬩簡渚濊禆鍏崇郴锛屼竴鏃?el-row 缁勪欢鐨?gutter 鍙戠敓鍙樺寲锛岃繖涓绠楀睘鎬у啀娆¤璁块棶鐨勬椂鍊欏氨浼氶噸鏂拌绠楋紝鑾峰彇鍒版柊鐨?gutter銆?/p>
鍏跺疄锛屾兂鍦ㄥ瓙缁勪欢鍘昏幏鍙栫鍏堣妭鐐圭殑缁勪欢瀹炰緥锛屾垜鏇存帹鑽愪娇鐢?provide/inject 鐨勬柟寮忓幓鎶婄鍏堣妭鐐圭殑瀹炰緥娉ㄥ叆鍒板瓙缁勪欢涓紝杩欐牱瀛愮粍浠跺彲浠ラ潪甯告柟渚垮湴鎷垮埌绁栧厛鑺傜偣鐨勫疄渚嬶紝姣斿鎴戜滑鍦?el-row 缁勪欢缂栧啓 provide锛?/p>
provide() {
return {
row: this
};
}
澶嶅埗浠ｇ爜
鐒跺悗鍦?el-col 缁勪欢娉ㄥ叆渚濊禆锛?/p>
inject: ['row'] 澶嶅埗浠ｇ爜
杩欐牱鍦?el-col 缁勪欢涓垜浠氨鍙互閫氳繃 this.row 璁块棶鍒?el-row 缁勪欢瀹炰緥浜嗐€?/p>
浣跨敤 provide/inject 鐨勫ソ澶勫湪浜庝笉璁虹粍浠跺眰娆℃湁澶氭繁锛屽瓙瀛欑粍浠跺彲浠ユ柟渚垮湴璁块棶绁栧厛缁勪欢娉ㄥ叆鐨勪緷璧栥€傚綋浣犲湪缂栧啓缁勪欢搴撶殑鏃跺€欙紝閬囧埌宓屽缁勪欢骞朵笖瀛愮粍浠堕渶瑕佽闂埗缁勪欢瀹炰緥鐨勬椂鍊欙紝閬垮厤鐩存帴浣跨敤 this.$parent锛屽敖閲忎娇鐢?provide/inject锛屽洜涓轰竴鏃︿綘鐨勭粍浠跺祵濂楀叧绯诲彂鐢熷彉鍖栵紝this.$parent 鍙兘灏变笉绗﹀悎棰勬湡浜嗭紝鑰?provide/inject 鍗翠笉鍙楀奖鍝嶏紙鍙绁栧厛鍜屽瓙瀛欑殑鍏崇郴涓嶅彉锛夈€?/p>
鍦?render 鍑芥暟涓紝鎴戜滑浼氭牴鎹?gutter 璁＄畻锛岀粰褰撳墠鍒楁坊鍔犱簡 paddingLeft 鍜?paddingRight 鐨勬牱寮忥紝鍊兼槸 gutter 鐨勪竴鍗婏紝杩欐牱灏卞疄鐜颁簡闂撮殧 gutter 鐨勬晥鏋溿€?/p>
閭ｄ箞杩欓噷鑳藉惁鐢?margin 鍛紝绛旀鏄笉鑳斤紝鍥犱负璁剧疆 margin 浼氬崰鐢ㄥ閮ㄧ殑绌洪棿锛屽鑷存瘡鍒楃殑鍗犵敤绌洪棿鍙樺ぇ锛屼細鍑虹幇鎶樿鐨勬儏鍐点€?/p>
render 杩囩▼涔熸槸鏈変紭鍖栫殑绌洪棿锛屽洜涓?style 鏄牴鎹?gutter 璁＄畻鐨勶紝閭ｄ箞鎴戜滑鍙互鎶?style 瀹氫箟鎴愯绠楀睘鎬э紝杩欐牱鍙 gutter 涓嶅彉锛岄偅涔?style 灏卞彲浠ョ洿鎺ユ嬁璁＄畻灞炴€х殑缂撳瓨锛岃€屼笉鐢ㄩ噸鏂拌绠楋紝瀵逛簬 classList 閮ㄥ垎锛屾垜浠悓鏍峰彲浠ヤ娇鐢ㄨ绠楀睘鎬с€傜粍浠?render 杩囩▼鐨勪竴涓師鍒欏氨鏄兘鐢ㄨ绠楀睘鎬у氨鐢ㄨ绠楀睘鎬с€?/p>
鍐嶆潵鐪嬩竴涓?el-row 缁勪欢鐨勫疄鐜帮細
computed: {
style() {
const ret={};
if (this.gutter) {
ret.marginLeft=`-${this.gutter / 2}px`;
ret.marginRight=ret.marginLeft;
}
return ret;
}
},
render(h) {
return h(this.tag, {
class: [
'el-row',
],
style: this.style
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
鐢变簬鎴戜滑鏄€氳繃缁欐瘡鍒楁坊鍔犲乏鍙?padding 鐨勬柟寮忔潵瀹炵幇鍒椾箣闂寸殑闂撮殧锛岄偅涔堝浜庣涓€鍒楀拰鏈€鍚庝竴鍒楋紝宸﹁竟鍜屽彸杈逛篃浼氬鍑烘潵 gutter/2 澶у皬鐨勯棿闅旓紝鏄剧劧鏄笉绗﹀悎棰勬湡鐨勶紝鎵€浠ユ垜浠彲浠ラ€氳繃璁剧疆宸﹀彸璐?margin 鐨勬柟寮忓～琛ュ乏鍙崇殑绌虹櫧锛岃繖鏍峰氨瀹岀編瀹炵幇浜嗗垎鏍忛棿闅旂殑鏁堟灉銆?/p>
鍋忕Щ鎸囧畾鐨勬爮鏁?/p>
濡傚浘鎵€绀猴紝鎴戜滑涔熷彲浠ユ寚瀹氭煇鍒楃殑鍋忕Щ锛岀敱浜庝綔鐢ㄥ煙鏄垪锛屾垜浠簲璇ョ粰 el-col 缁勪欢娣诲姞涓€涓?offset 鐨勯厤缃紝濡備笅锛?/p>
<el-row :gutter="20"> <el-col :offset="8" :span="8">aaa</el-col> <el-col :span="8">bbb</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
鐩磋涓婃垜浠簲璇ョ敤 margin 鏉ュ疄鐜板亸绉伙紝骞朵笖 margin 涔熸槸鏀寔鐧惧垎姣旂殑锛屽洜姝ゅ疄鐜拌繖涓渶姹傚氨鍙樺緱绠€鍗曚簡銆?/p>
鎴戜滑缁х画鎵╁睍 el-col 缁勪欢锛?/p>
render(h) {
let classList=[];
classList.push(`el-col-${this.span}`);
classList.push(`el-col-offset-${this.offset}`);
let style={};
if (this.gutter) {
style.paddingLeft=this.gutter / 2 + 'px';
style.paddingRight=style.paddingLeft;
}
return h(this.tag, {
class: [
'el-col',
classList
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
鍏朵腑 offset 鏄畾涔夊湪 props 涓殑锛屾垜浠牴鎹紶鍏ョ殑 offset 鐢熸垚瀵瑰簲鐨?CSS 娣诲姞鍒?DOM 涓€俥lement-ui 鍚屾牱浣跨敤浜?sass 鐨勬帶鍒舵寚浠わ紝閰嶅悎鍩烘湰鐨勮绠楀叕寮忔潵瀹炵幇杩欎簺 CSS 鐨勫畾涔夛細
@for $i from 0 through 24 {
.el-col-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
}
澶嶅埗浠ｇ爜
瀵逛簬涓嶅悓鍋忕Щ鐨勫垎鏍忔暟锛屼細鏈夊搴旂殑 margin 鐧惧垎姣旓紝灏卞緢濂藉湴瀹炵幇鍒嗘爮鍋忕Щ闇€姹傘€?/p>
瀵归綈鏂瑰紡
褰撲竴琛屽垎鏍忕殑鎬诲崰姣斿拰娌℃湁杈惧埌 24 鐨勬椂鍊欙紝鎴戜滑鏄彲浠ュ埄鐢?flex 甯冨眬鏉ュ鍒嗘爮鍋氱伒娲荤殑瀵归綈銆?/p>
瀵逛簬涓嶅悓鐨勫榻愭柟寮?flex 甯冨眬鎻愪緵浜?justify-content 灞炴€э紝鎵€浠ュ浜庤繖涓渶姹傦紝鎴戜滑鍙互瀵?flex 甯冨眬鍋氫竴灞傚皝瑁呭嵆鍙疄鐜般€?/p>
鐢变簬瀵归綈鏂瑰紡鐨勪綔鐢ㄥ煙鏄锛屾墍浠ユ垜浠簲璇ョ粰 el-row 缁勪欢娣诲姞 type 鍜?justify 鐨勯厤缃紝濡備笅锛?/p>
<el-row type="flex" justify="center"> <el-col :span="8">aaa</el-col> <el-col :span="8">bbb</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
鐢变簬鎴戜滑鏄 flex 甯冨眬鐨勫皝瑁咃紝鎴戜滑鍙渶瑕佹牴鎹紶鍏ョ殑杩欎簺 props 鍘荤敓鎴愬搴旂殑 CSS锛屽湪 CSS 涓畾涔?flex 鐨勫竷灞€灞炴€у嵆鍙€?/p>
鎴戜滑缁х画鎵╁睍 el-row 缁勪欢锛?/p>
render(h) {
return h(this.tag, {
class: [
'el-row',
this.justify !=='start' ? `is-justify-${this.justify}` : '',
{ 'el-row--flex': this.type==='flex' }
],
style: this.style
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
鍏朵腑 type 鍜?justify 鏄畾涔夊湪 props 涓殑锛屾垜浠牴鎹畠浠紶鍏ョ殑鍊肩敓鎴愬搴旂殑 CSS 娣诲姞鍒?DOM 涓紝鎺ョ潃鎴戜滑闇€瑕佸畾涔夊搴旂殑 CSS 鏍峰紡锛?/p>
@include b(row) {
position: relative;
box-sizing: border-box;
@include utils-clearfix;
@include m(flex) {
display: flex;
&:before,
&:after {
display: none;
}
@include when(justify-center) {
justify-content: center;
}
@include when(justify-end) {
justify-content: flex-end;
}
@include when(justify-space-between) {
justify-content: space-between;
}
@include when(justify-space-around) {
justify-content: space-around;
}
}
}
澶嶅埗浠ｇ爜
element-ui 鍦ㄧ紪鍐?sass 鐨勬椂鍊欎富瑕侀伒寰殑鏄?BEM 鐨勫懡鍚嶈鍒欙紝骞朵笖缂栧啓浜嗗緢澶氳嚜瀹氫箟 @mixin 鏉ラ厤鍚堟牱寮忓悕鐨勫畾涔夈€?/p>
杩欓噷鎴戜滑鏉ヨ姳鐐规椂闂存潵瀛︿範涓€涓嬪畠浠紝element-ui 鐨勮嚜瀹氫箟 @mixin 瀹氫箟鍦?pacakages/theme-chalk/src/mixins/ 鐩綍涓紝鎴戝苟涓嶄細璇︾粏瑙ｉ噴杩欓噷闈㈢殑鍏抽敭瀛楋紝濡傛灉浣犲 sass 杩樹笉鐔熸倝锛屾垜寤鸿鍦ㄥ涔犺繖閮ㄥ垎鍐呭鐨勬椂鍊欓厤鍚?sass 鐨勫畼缃戞枃妗ｇ湅銆?/p>
mixins/config.scss 涓畾涔変簡涓€浜涘叏灞€鍙橀噺锛?/p>
$namespace: 'el'; $element-separator: '__'; $modifier-separator: '--'; $state-prefix: 'is-'; 澶嶅埗浠ｇ爜
mixins/mixins.scss 涓畾涔変簡 BEM 鐨勮嚜瀹氫箟 @mixin锛屽厛鏉ョ湅涓€涓嬪畾涔夌粍浠舵牱寮忕殑 @mixin b锛?/p>
@mixin b($block) {
$B: $namespace+'-'+$block !global;
.#{$B} {
@content;
}
}
澶嶅埗浠ｇ爜
杩欎釜 @mixin 寰堝ソ鐞嗚В锛?B 鏄唴閮ㄥ畾涔夌殑鍙橀噺锛屽畠鐨勫€奸€氳繃 $namespace+'-'+$block 璁＄畻寰楀埌锛屾敞鎰忚繖閲屾湁涓€涓?!global 鍏抽敭瀛楋紝瀹冭〃绀烘妸杩欎釜灞€閮ㄥ彉閲忓彉鎴愬叏灞€鐨勶紝鎰忓懗鐫€浣犱篃鍙互鍦ㄥ叾瀹?@mixin 涓紩鐢ㄥ畠銆?/p>
閫氳繃 @include 鎴戜滑灏卞彲浠ュ幓寮曠敤杩欎釜 @mixin锛岀粨鍚堟垜浠殑 case 鏉ョ湅锛?/p>
@include b(row) {
// xxx content
}
澶嶅埗浠ｇ爜
浼氱紪璇戞垚锛?/p>
.el-row {
// xxx content
}
澶嶅埗浠ｇ爜
鍐嶆潵鐪嬭〃绀轰慨楗扮鐨?@mixin m锛?/p>
@mixin m($modifier) {
$selector: &;
$currentSelector: "";
@each $unit in $modifier {
$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
}
@at-root {
#{$currentSelector} {
@content;
}
}
}
澶嶅埗浠ｇ爜
杩欓噷鏄厑璁镐紶鍏ョ殑 $modifier 鏈夊涓紝鎵€浠ュ唴閮ㄧ敤浜?@each锛?amp; 琛ㄧず鐖堕€夋嫨鍣紝$selector 鍜?$currentSelector 鏄唴閮ㄥ畾涔夌殑 2 涓眬閮ㄥ彉閲忥紝缁撳悎鎴戜滑鐨?case 鏉ョ湅锛?/p>
@mixin b(row) {
@include m(flex) {
// xxx content
}
}
澶嶅埗浠ｇ爜
浼氱紪璇戞垚锛?/p>
.el-row--flex {
// xxx content
}
澶嶅埗浠ｇ爜
鏈夊悓瀛﹀彲鑳戒細鐤戦棶锛岄毦閬撲笉鏄細
.el-row {
.el-row--flex {
// xxx content
}
}
澶嶅埗浠ｇ爜
鍏跺疄骞朵笉鏄紝鍥犱负鎴戜滑鍦ㄨ @mixin 鐨勫唴閮ㄤ娇鐢ㄤ簡 @at-root 鎸囦护锛屽畠浼氭妸鏍峰紡瑙勫垯瀹氫箟鍦ㄦ牴鐩綍涓嬶紝鑰屼笉鏄祵濂楀湪鍏剁埗閫夋嫨鍣ㄤ笅銆?/p>
鏈€鍚庢潵鐪嬩竴涓嬭〃绀哄悓绾ф牱寮忕殑 @mixin when锛?/p>
@mixin when($state) {
@at-root {
&.#{$state-prefix + $state} {
@content;
}
}
}
澶嶅埗浠ｇ爜
杩欎釜 @mixin 涔熷緢濂界悊瑙ｏ紝缁撳悎鎴戜滑鐨?case 鏉ョ湅锛?/p>
@mixin b(row) {
@include m(flex) {
@include when(justify-center) {
justify-content: center;
}
}
}
澶嶅埗浠ｇ爜
浼氱紪璇戞垚锛?/p>
.el-row--flex.is-justify-center {
justify-content: center;
}
澶嶅埗浠ｇ爜
鍏充簬 BEM 鐨?@mixin锛屽父鐢ㄧ殑杩樻湁 @mixin e锛岀敤浜庡畾涔夌粍浠跺唴閮ㄤ竴浜涘瓙鍏冪礌鏍峰紡鐨勶紝鎰熷叴瓒ｇ殑鍚屽鍙互鑷鍘荤湅銆?/p>
鍐嶅洖鍒版垜浠殑 el-row 缁勪欢鐨勬牱寮忥紝鎴戜滑瀹氫箟浜嗗嚑绉峟lex 甯冨眬鐨勫榻愭柟寮忥紝鐒跺悗閫氳繃浼犲叆涓嶅悓鐨?justify 鏉ョ敓鎴愬搴旂殑鏍峰紡锛岃繖鏍锋垜浠氨寰堝ソ鍦板疄鐜颁簡鐏垫椿瀵归綈鍒嗘爮鐨勯渶姹傘€?/p>
鍝嶅簲寮忓竷灞€
element-ui 鍙傜収浜?Bootstrap 鐨勫搷搴斿紡璁捐锛岄璁句簡浜斾釜鍝嶅簲灏哄锛歺s銆乻m銆乵d銆乴g 鍜?xl銆?/p>
鍏佽鎴戜滑鍦ㄤ笉鍚岀殑灞忓箷灏哄涓嬶紝璁剧疆涓嶅悓鐨勫垎鏍忛厤缃紝鐢变簬浣滅敤鍩熸槸鍒楋紝鎵€浠ユ垜浠簲璇ョ粰 el-col 缁勪欢娣诲姞 xs xs銆乻m銆乵d銆乴g 鍜?xl 鐨勯厤缃紝濡備笅锛?/p>
<el-row type="flex" justify="center"> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">aaa</el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">bbb</el-col> <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">ccc</el-col> <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">ddd</el-col> </el-row> <el-row> ... </el-row> 澶嶅埗浠ｇ爜
鍚岀悊锛屾垜浠粛鐒舵槸閫氳繃杩欎簺浼犲叆鐨?props 鍘荤敓鎴愬搴旂殑 CSS锛屽湪 CSS 涓埄鐢ㄥ獟浣撴煡璇㈠幓瀹炵幇鍝嶅簲寮忋€?/p>
鎴戜滑缁х画鎵╁睍 el-col 缁勪欢锛?/p>
render(h) {
let classList=[];
classList.push(`el-col-${this.span}`);
classList.push(`el-col-offset-${this.offset}`);
['xs', 'sm', 'md', 'lg', 'xl'].forEach(size=> {
classList.push(`el-col-${size}-${this[size]}`);
});
let style={};
if (this.gutter) {
style.paddingLeft=this.gutter / 2 + 'px';
style.paddingRight=style.paddingLeft;
}
return h(this.tag, {
class: [
'el-col',
classList
]
}, this.$slots.default);
}
澶嶅埗浠ｇ爜
鍏朵腑锛寈s銆乻m銆乵d銆乴g 鍜?xl 鏄畾涔夊湪 props 涓殑锛屽疄闄呬笂 element-ui 婧愮爜杩樺厑璁镐紶鍏ヤ竴涓璞★紝鍙互閰嶇疆 span 鍜?offset锛屼絾杩欓儴鍒嗕唬鐮佹垜灏变笉浠嬬粛浜嗭紝鏃犻潪灏辨槸瀵瑰璞＄殑瑙ｆ瀽锛屾坊鍔犲搴旂殑鏍峰紡銆?/p>
鎴戜滑鏉ョ湅涓€涓嬪搴旂殑 CSS 鏍峰紡锛屼互 xs 涓轰緥锛?/p>
@include res(xs) {
.el-col-xs-0 {
display: none;
}
@for $i from 0 through 24 {
.el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
}
}
澶嶅埗浠ｇ爜
杩欓噷鍙堝畾涔変簡琛ㄧず鍝嶅簲寮忕殑 @mixin res锛屾垜浠潵鐪嬩竴涓嬪畠鐨勫疄鐜帮細
@mixin res($key, $map: $--breakpoints) {
// 寰幆鏂偣Map锛屽鏋滃瓨鍦ㄥ垯杩斿洖
@if map-has-key($map, $key) {
@media only screen and #{inspect(map-get($map, $key))} {
@content;
}
} @else {
@warn "Undefeined points: `#{$map}`";
}
}
澶嶅埗浠ｇ爜
杩欎釜 @mixns 涓昏鏄煡鐪?$map 涓槸鍚︽湁 $key锛屽鏋滄湁鐨勮瘽鍒欏畾涔変竴鏉″獟浣撴煡璇㈣鍒欙紝濡傛灉娌℃湁鍒欐姏鍑鸿鍛娿€?/p>
$map 鍙傛暟鐨勯粯璁ゅ€兼槸 $--breakpoints锛屽畾涔夊湪 pacakges/theme-chalk/src/common/var.scss 涓細
$--sm: 768px !default; $--md: 992px !default; $--lg: 1200px !default; $--xl: 1920px !default; $--breakpoints: ( 'xs' : (max-width: $--sm - 1), 'sm' : (min-width: $--sm), 'md' : (min-width: $--md), 'lg' : (min-width: $--lg), 'xl' : (min-width: $--xl) ); 澶嶅埗浠ｇ爜
缁撳悎鎴戜滑鐨?case 鏉ョ湅锛?/p>
@include res(xs) {
.el-col-xs-0 {
display: none;
}
@for $i from 0 through 24 {
.el-col-xs-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.el-col-xs-offset-#{$i} {
margin-left: (1 / 24 * $i * 100) * 1%;
}
}
}
澶嶅埗浠ｇ爜
浼氱紪璇戞垚锛?/p>
@media only screen and (max-width: 767px) {
.el-col-xs-0 {
display: none;
}
.el-col-xs-1 {
width: 4.16667%
}
.el-col-xs-offset-1 {
margin-left: 4.16667%
}
// 鍚庨潰寰幆鐨勭粨鏋滃お闀匡紝灏变笉璐翠簡
}
澶嶅埗浠ｇ爜
鍏跺畠灏哄鍐呴儴鐨勬牱寮忓畾涔夎鍒欎篃鏄被浼硷紝杩欐牱鎴戜滑灏遍€氳繃濯掍綋鏌ヨ瀹氫箟浜嗗悇涓睆骞曞昂瀵镐笅鐨勬牱寮忚鍒欎簡銆傞€氳繃浼犲叆 xs銆乻m 杩欎簺灞炴€х殑鍊间笉鍚岋紝浠庤€岀敓鎴愪笉鍚屾牱寮忥紝杩欐牱鍦ㄤ笉鍚岀殑灞忓箷灏哄涓嬶紝鍙互鍋氬埌鍒嗘爮鐨勫崰瀹戒笉鍚岋紝寰堝ソ鍦版弧瓒充簡鍝嶅簲寮忛渶姹傘€?/p>
鍩轰簬鏂偣鐨勯殣钘忕被
Element 棰濆鎻愪緵浜嗕竴绯诲垪绫诲悕锛岀敤浜庡湪鏌愪簺鏉′欢涓嬮殣钘忓厓绱狅紝杩欎簺绫诲悕鍙互娣诲姞鍦ㄤ换浣?DOM 鍏冪礌鎴栬嚜瀹氫箟缁勪欢涓娿€?/p>
鎴戜滑鍙互閫氳繃寮曞叆鍗曠嫭鐨?display.css锛?/p>
import 'element-ui/lib/theme-chalk/display.css'; 澶嶅埗浠ｇ爜
瀹冨寘鍚殑绫诲悕鍙婂叾鍚箟濡備笅锛?/p>
鎴戜滑鏉ョ湅涓€涓嬪畠鐨勫疄鐜帮紝鐪嬩竴涓?display.scss锛?/p>
.hidden {
@each $break-point-name, $value in $--breakpoints-spec {
&-#{$break-point-name} {
@include res($break-point-name, $--breakpoints-spec) {
display: none !important;
}
}
}
}
澶嶅埗浠ｇ爜
瀹炵幇寰堢畝鍗曪紝瀵?$--breakpoints-spec 閬嶅巻锛岀敓鎴愬搴旂殑 CSS 瑙勫垯锛?--breakpoints-spec 瀹氫箟鍦?pacakges/theme-chalk/src/common/var.scss 涓細
$--breakpoints-spec: (
'xs-only' : (max-width: $--sm - 1),
'sm-and-up' : (min-width: $--sm),
'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
'sm-and-down': (max-width: $--md - 1),
'md-and-up' : (min-width: $--md),
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
'md-and-down': (max-width: $--lg - 1),
'lg-and-up' : (min-width: $--lg),
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
'lg-and-down': (max-width: $--xl - 1),
'xl-only' : (min-width: $--xl),
);
澶嶅埗浠ｇ爜
鎴戜滑浠?xs-only 涓轰緥锛岀紪璇戝悗鐢熸垚鐨?CSS 瑙勫垯濡備笅锛?/p>
.hidden-xs-only {
@media only screen and (max-width:767px) {
display: none !important;
}
}
澶嶅埗浠ｇ爜
鏈川涓婅繕鏄埄鐢ㄥ獟浣撴煡璇㈠畾涔変簡杩欎簺 CSS 瑙勫垯锛屽疄鐜颁簡鍦ㄦ煇浜涘睆骞曞昂瀵镐笅闅愯棌鐨勫姛鑳姐€?/p>
鎬荤粨
鍏跺疄 Layout 甯冨眬杩樻敮鎸佷簡鍏跺畠涓€浜涚壒鎬э紝鎴戜笉涓€涓€鍒椾妇浜嗭紝鎰熷叴瓒ｇ殑鍚屽鍙互鑷鍘荤湅銆侺ayout 甯冨眬缁勪欢鍏呭垎鍒╃敤浜嗘暟鎹┍鍔ㄧ殑鎬濇兂锛岄€氳繃鏁版嵁鍘荤敓鎴愬搴旂殑 CSS锛屾湰璐ㄤ笂杩樻槸閫氳繃 CSS 婊¤冻鍚勭鐏垫椿鐨勫竷灞€銆?/p>
瀛︿範瀹岃繖绡囨枃绔狅紝浣犲簲璇ュ交搴曞紕鎳?element-ui Layout 甯冨眬缁勪欢鐨勫疄鐜板師鐞嗭紝骞朵笖瀵?sass 鐨?@mixin 浠ュ強鐩稿叧浣跨敤鍒扮殑鐗规€ф湁鎵€浜嗚В锛屽缁勪欢瀹炵幇杩囩▼涓彲浠ヤ紭鍖栫殑閮ㄥ垎锛屽簲璇ユ湁鑷繁鐨勬€濊€冦€?/p>
鎶婁笉浼氱殑涓滆タ瀛︿細浜嗭紝閭ｄ箞浣犲氨杩涙浜嗭紝濡傛灉浣犺寰楄繖绫绘枃绔犳湁甯姪锛屼篃娆㈣繋鎶婂畠鎺ㄨ崘缁欎綘韬竟鐨勫皬浼欎即銆?/p>
t Designer涓湁寰堝UI鐣岄潰缁勪欢锛屾瘡绉嶇粍浠剁浉瀵瑰簲鏈夊彲璁剧疆鐨勫睘鎬э紝鏈瘒鍗氭枃鏉ヨ鎴戜滑绠€鍗曚簡瑙ｄ竴涓嬪惂~
鍦≦t Designer涓紝鎻愪緵浜嗗叓澶х被鐣岄潰鍙鍖栫粍浠跺垎鍒负锛氬竷灞€缁勪欢锛圠ayouts锛夈€佸垎闅旂粍浠讹紙Spacers锛夈€佹寜閽粍浠讹紙Buttons锛夈€佽〃椤硅鍥撅紙Item Views锛夈€佽〃椤圭粍浠讹紙Item Widgets锛夈€佸鍣ㄧ粍浠讹紙Containers锛夈€佽緭鍏ョ粍浠讹紙Input Widgets锛夈€佹樉绀虹粍浠讹紙Display Widgets锛夛紝鍦≦t Designer鐨勫簲鐢ㄧ晫闈㈣璁℃椂锛屽彲浠ュ皢鍚勭鍔熻兘鐨勭粍浠舵嫋鎷藉埌绐楀彛涓婅繘琛屽簲鐢ㄧ殑鍙鍖栫晫闈㈣璁★紝鑰屾瘡绉嶇粍浠跺張鍙互鎸囧畾涓嶅悓鐨勫睘鎬с€?/span>
甯冨眬缁勪欢鍖呮嫭锛歏ertical Layout锛堟按骞冲竷灞€锛夈€丠orizontal Layout锛堝瀭鐩村竷灞€锛夈€丟rid Layout锛堢綉鏍煎竷灞€锛夈€丗orm Layout锛堣〃鍗曞竷灞€锛夈€?/span>
鍒嗛殧缁勪欢鍖呮嫭锛欻orizontal Spacer锛堟按骞冲垎闅旓級銆乂ertical Spacer锛堝瀭鐩村垎闅旓級銆?/span>
鎸夐挳缁勪欢鍖呮嫭锛歅ush Button锛堟寜閽級銆乀ool Button锛堝伐鍏锋寜閽級銆丷adio Button锛堝崟閫夋锛夈€丆heck Box锛堝閫夋锛夈€丆ommand Link Button锛堝懡浠ら摼鎺ユ寜閽級銆丏ialog Button Box锛堥€夋嫨鎸夐挳锛夈€?/span>
琛ㄩ」瑙嗗浘鍖呮嫭锛歀ist View锛堝垪琛ㄨ鍥撅級銆乀ree View锛堟爲鐘惰鍥撅級銆乀able View锛堣〃鏍艰鍥撅級銆丆olumn View锛堝垪琛ㄨ鍥撅級銆乁ndo View锛堟挙閿€瑙嗗浘锛夈€?/span>
琛ㄩ」缁勪欢鍖呮嫭锛歀ist Widget锛堝垪琛ㄨ〃椤癸級銆乀ree Widget锛堟爲鐘惰〃椤癸級銆乀able Widget锛堣〃鏍艰〃椤癸級銆?/span>
瀹瑰櫒缁勪欢鍖呮嫭锛欸roup Box锛堢粍鍚堟锛屽彲浠ュ湪鍐呴儴娣诲姞鍐呭锛屽苟淇敼鏍囬澶达級銆丼croll Area锛堝甫婊戝姩鏉＄殑妗嗭級銆乀ool Box锛堟娊灞夊紡妗嗭級銆乀ab Widget锛堟爣绛惧紡妗嗭級銆丼tacked Widget锛堟爤寮忥紝闇€瑕佷俊鍙峰惎鍔級銆丗rame锛堝甫杈规鐨勫竷灞€锛夈€乄idget锛堜笉甯﹁竟妗嗙殑甯冨眬锛夈€丮DI Area锛堝垎鏍忔樉绀猴級銆丏ock Widget锛堟诞鍔ㄧ獥鍙ｏ級銆丵AxWidget锛堝彧鍙互鍦╓indows鐜浣跨敤锛夈€?/span>
杈撳叆缁勪欢鍖呮嫭锛欳ombo Box锛堜笅鎷夐€夋锛夈€丗ont Combo Box锛堜笅鎷夊瓧浣撴锛夈€丩ine Edit锛堣缂栬緫鍖猴級銆乀ext Edit锛堟枃鏈紪杈戝尯锛屽彧鍙互鏌ョ湅鏂囧瓧銆佸浘鐗囧拰鍔ㄧ敾锛夈€丳lain Text Edit锛堟枃瀛楃紪杈戞锛夈€丼pin Box锛堣皟鏁存暟瀛楁锛夈€丏ouble Spin Box锛堟诞鐐瑰瀷鏁板瓧璋冩暣妗嗭級銆乀ime Edit锛堟椂闂达級銆丏ata Edit锛堟棩鏈燂級銆丏ata/Time Edit锛堟椂闂村拰鏃ユ湡锛夈€丏ial锛堢綏鐩橈級銆丠orizontal Scroll Bar锛堟按骞虫粴鍔ㄦ潯锛夈€乂ertical Scroll Bar锛堝瀭鐩存粴鍔ㄦ潯锛夈€丠orizontal Slider锛堟按骞虫粦鍔ㄦ潯锛夈€乂ertical Slider锛堝瀭鐩存粦鍔ㄦ潯锛夈€並ey Sequence Edit锛堝揩鎹锋柟寮忥級銆?/span>
鏄剧ず缁勪欢鍖呮嫭锛歀abel锛堟爣绛剧粍浠讹紝鍙煡鐪嬫枃鏈€佺綉椤点€佸浘鐗囧拰鍔ㄧ敾绛夛級銆乀ext Browser锛堟枃鏈锛夈€丟raphics View锛堢粯鍥惧伐鍏凤級銆丆alendar Widget锛堟棩鍘嗭級銆丩CD Number锛圠CD 鏁扮爜绠★級銆丳rogress Bar锛堣繘搴︽潯锛夈€丠orizontal Line锛堟按骞冲垎鍓茬嚎锛夈€乂ertical Line锛堝瀭鐩村垎鍓茬嚎锛夈€丱penGL Widget锛圤penGL锛圤pen Graphics Library锛屽紑鏀惧浘褰㈠簱锛夊浘褰㈡覆鏌撶殑閮ㄤ欢锛屽彲浠ュ湪PyQt鍜孮t鐨勫簲鐢ㄤ腑鏄剧ず鍥惧舰锛堝寘鎷?D鍜?D鍥惧舰锛夛級銆丵QuickWidget锛堝姞杞絈ML鏂囦欢锛夈€?/span>
绗簩閮ㄥ垎鏈夎緝澶氬唴瀹瑰紩鐢ㄣ€佸涔犺鏂囩珷锛欴esigner缁勪欢灞炴€х紪杈戠晫闈腑QWidget绫荤浉鍏冲睘鎬ц瑙ｏ紝寰堝璇︾粏鐭ヨ瘑鐐瑰彲浠ュ弬鐓ц鍗氭枃銆?/span>
鍦≦t Designer涓殑姣忕缁勪欢灞炴€х紪杈戦儴鍒嗗彲浠ヨ繘琛岃缃紝濡備笅鍥炬墍绀猴細
姣忕缁勪欢鐨勫睘鎬т細鏈夋墍涓嶅悓涔嬪锛岃繖閲屼互QWidget绐楀彛涓轰緥锛岀畝鍗曡亰鑱婂叾灞炴€э紝濡備笅鎵€绀猴細
璁╂垜浠竴璧风湅鐪嬪惂~
鍙互鐪嬪埌锛屾渶椤跺眰鐨勮妭鐐逛负缁勪欢瀵瑰簲鐨勭埗绫伙紙Form锛夛紝浠庝笂寰€涓嬫帓鍒楃殑鑺傜偣锛屽熀鏈寜鐓х埗绫诲湪涓婏紝瀛愮被鍦ㄤ笅鐨勬柟寮忔帓鍒楋紝寰堝ソ鐨勪綋鐜颁簡绫荤殑缁ф壙鍏崇郴浠ュ強鐩稿叧灞炴€ф槸鍝釜绫绘彁渚涚殑銆?/span>
enabled灞炴€?/span>
enabled灞炴€х敤浜庤〃绀虹粍浠舵槸鍚﹀彲鐢紝涓€涓粍浠剁殑閮ㄤ欢鍙互鎺ユ敹鍜屽鐞嗛紶鏍囧拰閿洏浜嬩欢锛屽綋缁勪欢涓嶅彲鐢ㄦ椂鍒欐棤娉曟帴鏀跺拰澶勭悊榧犳爣鍜岄敭鐩樹簨浠躲€?/span>
enabled灞炴€х己鐪佸€间负True锛屾湁浜涚粍浠跺湪琚鐢ㄦ椂浼氫互涓嶅悓鐨勬柟寮忔樉绀鸿嚜宸便€備緥濡傦紝鎸夐挳鍙兘浼氬皢鍏舵爣绛炬樉绀虹伆鑹层€?/span>
鎺у埗缁勪欢澶у皬鐨勫睘鎬ф湁锛歡eometry 銆乻izePolicy銆乵inimumSize銆乵aximumSize銆乻izeIncrement鍜宐aseSize锛岀敤浜庢帶鍒剁粍浠剁殑鍒濆澶у皬浠ュ強鍔ㄦ€佽皟鏁村ぇ灏忕殑鎺у埗銆傚睘鎬ч厤缃晫闈㈢殑geometry瀹氫箟浜嗙粍浠剁殑鍒濆澶у皬锛屽叾浠栧睘鎬ч兘涓庣粍浠跺ぇ灏忚皟鏁存椂鎺у埗缁勪欢鐨勫ぇ灏忕浉鍏炽€?/span>
geometry灞炴€?/span>
geometry灞炴€т繚瀛樼粍浠剁浉瀵逛簬鍏剁埗绾у璞＄殑浣嶇疆鍜屽ぇ灏忥紝Qt瀹為檯涓婃槸浠ヤ竴涓暱鏂瑰舰鏉ヨ〃绀虹粍浠剁殑浣嶇疆鍜屽ぇ灏忕殑锛屽寘鎷乏涓婅鐨勫潗鏍囦綅缃€侀暱鍜屽銆?/span>
sizePolicy灞炴€?/span>
sizePolicy灞炴€х敤浜庤鏄庣粍浠跺湪甯冨眬绠＄悊涓殑缂╂斁鏂瑰紡锛屽綋閮ㄤ欢娌℃湁鍦ㄥ竷灞€绠＄悊鍣ㄤ腑鏃讹紝璇ヨ缃棤鏁堛€?/span>
sizePolicy灞炴€х敱鍥涗釜鍊肩粍鎴愶紝鍒嗗埆鏄按骞崇瓥鐣ャ€佸瀭鐩寸瓥鐣ャ€佹按骞充几灞曞拰鍨傜洿浼稿睍銆?/span>
瀹炶返鍙弬瑙侊細Python-PyQt5寮€鍙戝涔犵瑪璁?浜?锛歀ayout锛堝竷灞€锛?/span>
minimumSize灞炴€?/span>
mimimumSize灞炴€ц〃绀虹粍浠惰兘琚缉灏忓埌鐨勬渶灏忓昂瀵革紝鍗曚綅涓哄儚绱狅紝缂╁皬鍒拌灏哄鍚庝笉鑳藉啀杩涗竴姝ョ缉灏忎簡銆傚鏋滅粍浠跺湪甯冨眬绠＄悊鍣ㄤ腑锛屼笖甯冨眬绠＄悊鍣ㄤ篃璁剧疆浜嗘渶灏忓昂瀵革紝鍒欓儴浠舵湰韬殑鏈€灏忓昂瀵镐互閮ㄤ欢鐨刴imimumSize涓哄噯锛屽竷灞€绠＄悊鍣ㄨ缃殑涓嶈捣浣滅敤銆?/span>
maximumSize灞炴€?/span>
maximumSize灞炴€ц〃绀虹粍浠惰兘琚斁澶у埌鐨勬渶澶у昂瀵革紝鏀惧ぇ鍒拌灏哄鍚庝笉鑳藉啀杩涗竴姝ユ斁澶т簡銆傜粍浠剁殑缂虹渷鏈€澶у€间负锛氾紙16777215锛?6777215锛夈€?/span>
sizeIncrement灞炴€?/span>
sizeIncrement灞炴€ц〃绀虹粍浠惰皟鏁村ぇ灏忔椂鐨勬瘡娆″彉鍖栫殑澧為噺澶у皬锛堝崟浣嶏細鍍忕礌锛夌殑鍩烘暟锛屽疄闄呰皟鏁村ぇ灏忚绠楀叕寮忓涓嬶細 width=baseSize().width() + i * sizeIncrement().width() height=baseSize().height() + j * sizeIncrement().height()
鍏朵腑i锛宩涓洪潪璐熸暣鏁般€?/span>
baseSize灞炴€?/span>
baseSize灞炴€ф槸缁勪欢鐨勫熀纭€澶у皬锛堝崟浣嶏細鍍忕礌锛夛紝濡傛灉缁勪欢璁惧畾浜唖izeIncrement锛岃灞炴€х敤浜庡湪璋冩暣缁勪欢灏哄鏃惰绠楃粍浠跺簲璇ヨ皟鏁村埌鐨勫悎閫傚€硷紝杩欎釜灞炴€х己鐪佸€兼槸锛?,0锛夈€?/span>
palette灞炴€?/span>
palette灞炴€ф槸璋冭壊鏉夸綔鐢紝绠＄悊鐫€鎺т欢鍜岀獥浣撶殑鎵€鏈夐鑹诧紝鍙敤浜庣鐞嗘帶浠剁殑澶栬鏄剧ず浠ュ強璁剧疆缁勬垚銆?/span>
font灞炴€?/span>
font灞炴€т腑鍙互璁剧疆缁勪欢鐨勫瓧浣撳睘鎬э紝鍖呮嫭瀛椾綋鐨勫瓧浣撶皣锛團amily锛夈€佸ぇ灏忥紙Size锛夈€佹槸鍚︾矖浣擄紙Bold锛夈€佹槸鍚︽枩浣擄紙Italic锛夈€佹槸鍚﹀甫涓嬪垝绾匡紙Underline锛夈€佹槸鍚﹀甫鍒犻櫎绾匡紙Strikeout锛夌瓑銆?/span>
cursor灞炴€?/span>
cursor灞炴€т繚瀛樼粍浠剁殑榧犳爣鍏夋爣褰㈢姸锛屽綋榧犳爣浣嶄簬璇ョ粍浠朵笂鏃跺氨浼氬憟鐜拌灞炴€ц缃殑鍏夋爣褰㈢姸锛屽彲鍙栧€肩殑鑼冨洿鍙婂惈涔夊涓嬪浘鎵€绀猴細
mouseTracking灞炴€?/span>
mouseTracking灞炴€х敤浜庝繚瀛樻槸鍚﹀惎鐢ㄩ紶鏍囪窡韪紝缂虹渷鎯呭喌鏄笉鍚敤鐨勩€備笉鍚敤鐨勬儏鍐典笅锛屽搴旈儴浠跺彧鎺ユ敹鍦ㄩ紶鏍囩Щ鍔ㄥ悓鏃惰嚦灏戜竴涓紶鏍囨寜閿寜涓嬫椂鐨勯紶鏍囩Щ鍔ㄤ簨浠讹紝鍚敤榧犳爣璺熻釜鐨勬儏鍐典笅锛屼换浣曢紶鏍囩Щ鍔ㄤ簨浠堕儴浠堕兘浼氭帴鏀躲€?/span>
tabletTracking灞炴€?/span>
tabletTracking灞炴€т繚瀛樻槸鍚﹀惎鐢ㄧ粍浠剁殑骞虫澘璺熻釜锛岀己鐪佹槸涓嶈捣鐢ㄧ殑銆備笉鍚敤骞虫澘璺熻釜鐨勬儏鍐典笅锛岄儴浠朵粎鎺ユ敹瑙︽帶绗斾笌骞虫澘鎺ヨЕ鎴栬嚦灏戞湁涓Е鎺х瑪鎸夐敭鎸変笅鏃剁殑瑙︽帶绗旂Щ鍔ㄤ簨浠躲€?濡傛灉缁勪欢鍚敤浜嗗钩鏉胯窡韪姛鑳斤紝閮ㄤ欢鑳芥帴鏀惰Е鎺х瑪闈犺繎浣嗘湭鐪熸鎺ヨЕ骞虫澘鏃剁殑瑙︽帶绗旂Щ鍔ㄤ簨浠讹紝杩欏彲浠ョ敤浜庣洃瑙嗘搷浣滀綅缃互鍙婇儴浠剁殑杈呭姪鎿嶄綔鍔熻兘锛堝鏃嬭浆鍜屽€炬枩锛夛紝骞朵负鍥惧舰鐣岄潰鎻愪緵杩欎簺鎿嶄綔鐨勪俊鎭帴鍙ｃ€?/span>
focusPolicy灞炴€?/span>
focusPolicy灞炴€у彲浠ヨ缃粍浠剁殑鐒︾偣绛栫暐銆傝缃弬鏁拌鏄庡涓嬫墍绀猴細
contextMenuPolicy灞炴€?/span>
contextMenuPolicy灞炴€ф槸缁勪欢鐨勫揩鎹疯彍鍗曠瓥鐣ワ紝蹇嵎鑿滃崟閫氳繃鍦ㄩ儴浠朵笂鐐瑰嚮榧犳爣鍙抽敭瑙﹀彂銆傝缃弬鏁拌鏄庡涓嬫墍绀猴細
acceptDrops灞炴€?/span>
acceptDrops灞炴€ц〃绀哄綋鍓嶇粍浠舵槸鍚︽帴鍙楅紶鏍囨嫋鏀句簨浠讹紝榧犳爣鎷栨斁搴旇鏄笌榧犳爣鎷栨嫿缁撳悎鍦ㄤ竴璧风殑锛屽湪Qt Designer涓彲浠ラ€氳繃灞炴€cceptDrops璁剧疆閮ㄤ欢鏄惁鎺ュ彈榧犳爣鎷栨斁浜嬩欢銆傚鏋滈儴浠舵帴鍙楁嫋鏀撅紝鍒欏湪榧犳爣鎷栨斁鏃讹紝鎷栨斁浜嬩欢浼氬彂閫佺粰榧犳爣褰撳墠鍏夋爣涓嬫帴鍙楁嫋鏀剧殑绗竴涓儴浠躲€?/span>
濡傛灉缁勪欢璁剧疆浜哸cceptDrops灞炴€т负True锛屽垯灏辨槸閫氱煡绯荤粺璇ョ粍浠跺彲鎺ュ彈榧犳爣鎷栨斁浜嬩欢銆?/span>
windowTitel灞炴€?/span>
windowTitle灞炴€ф槸瀵圭獥鍙ｆ爣棰樿繘琛岃缃€?/span>
windowIcon灞炴€?/span>
windowIcon灞炴€ф槸瀵圭獥鍙ｅ浘鏍囪繘琛岃缃€?/span>
windowOpacity灞炴€?/span>
windowOpacity灞炴€т负娴偣鏁帮紝琛ㄧず缁勪欢閫忔槑搴︼紝涓?瀹屽叏涓嶉€忔槑锛屼负0瀹屽叏閫忔槑锛岀己鐪佹槸1銆?/span>
toolTip灞炴€?/span>
toolTip灞炴€ц缃粍浠剁殑toolTip鎻愮ず淇℃伅锛宼oolTip鎻愮ず淇℃伅鍦ㄩ紶鏍囨斁鍒版帶浠朵笂浼氭诞鍔ㄥ嚭涓€涓皬妗嗘樉绀烘彁绀轰俊鎭€?/span>
toolTipDuration灞炴€?/span>
toolTipDuration灞炴€ф帶鍒秚oolTip鎻愮ず淇℃伅鏄剧ず鐨勬椂闀匡紝鍗曚綅鏄绉掞紝濡傛灉璁剧疆涓?1锛屽垯鏄剧ず鏃堕暱鏍规嵁toolTip鍐呭鐨勯暱搴︽潵璁＄畻銆?/span>
statusTip灞炴€?/span>
statusTip灞炴€т繚瀛榮tatusTip鎻愮ず淇℃伅锛宻tatusTip鎻愮ず淇℃伅鍦ㄩ紶鏍囨斁鍒版帶浠朵笂鏃跺湪绐楀彛鐨勭姸鎬佹爮鏄剧ず鎻愮ず淇℃伅锛屽鏋滅獥鍙ｆ棤鐘舵€佹爮鍒欎笉鏄剧ず銆俿tatusTip灞炴€х己鐪佸€间负绌哄瓧绗︿覆銆?/span>
whatsThis灞炴€?/span>
whatsThis灞炴€т繚瀛樼粍浠剁殑甯姪淇℃伅銆倃hatsThis鐨勫府鍔╀俊鎭竴鑸湪缁勪欢鑾峰緱鐒︾偣鍚庢寜Shift+F1寮瑰嚭鏄剧ず锛屽鏋滆繖涓揩鎹烽敭琚埆鐨勫姛鑳藉崰鐢紝鍒檞hatsThis鐨勫府鍔╀俊鎭彲鑳芥棤娉曞睍绀恒€傛湁浜涘璇濈獥鎻愪緵涓€涓甫闂彿鐨勬寜閽彲浠ョ偣鍑绘樉绀簑hatsThis鐨勫府鍔╀俊鎭€倃hatsThis灞炴€х己鐪佸€间负绌哄瓧绗︿覆銆?/span>
accessibleName灞炴€?/span>
accessibleName灞炴€ф槸杈呭姪闃呰涓樉绀虹殑缁勪欢鐨勫悕绉帮紝鐢ㄤ簬娈嬬柧浜鸿緟鍔╅槄璇汇€傚浜庡ぇ澶氭暟灏忛儴浠讹紝鏃犻渶璁剧疆姝ゅ睘鎬э紝鍥犱负Qt浼氳皟鐢ㄩ儴浠剁浉鍏冲睘鎬ф樉绀猴紝濡傛寜閽皢鏄剧ず鎸夐挳鐨勬枃鏈紝浣嗗綋灏忛儴浠朵笉鎻愪緵浠讳綍鏂囨湰鏃讹紝璁剧疆姝ゅ睘鎬у緢閲嶈銆備緥濡傦紝鍙寘鍚浘鏍囩殑鎸夐挳闇€瑕佸皢姝ゅ睘鎬ц缃负涓庡睆骞曢槄璇诲櫒涓€璧蜂娇鐢ㄣ€傛灞炴€ч粯璁や负绌恒€?/span>
accessibleDescription灞炴€?/span>
accessibleDescription灞炴€т繚瀛樿緟鍔╂妧鏈墍鐪嬪埌鐨勯儴浠舵弿杩帮紝鐢ㄤ簬娈嬬柧浜鸿緟鍔╅槄璇汇€傛槸瀵筧ccessibleName灞炴€х殑琛ュ厖璇存槑銆傛灞炴€ч粯璁や负绌恒€?/span>
layoutDirection灞炴€?/span>
layoutDirection灞炴€т繚瀛樼殑鏄粍浠剁殑甯冨眬鏂瑰悜锛屾湁涓変釜鍙栧€硷細
autoFillBackground灞炴€?/span>
autoFillBackground灞炴€у彲浠ョ‘璁ょ粍浠惰儗鏅槸鍚﹁嚜鍔ㄥ～鍏呫€?/span>
styleSheet灞炴€?/span>
styleSheet灞炴€ф槸瀹氫箟缁勪欢澶栬鐨勫睘鎬ф牱寮忚〃锛屽湪Qt涓璼tyleSheet鏍峰紡琛ㄦ槸绫讳技浜巋tml鐨刢ss鏍峰紡涓€鏍风殑鏂规硶锛屽彧鏄笓闂ㄤ负Qt涓殑閮ㄤ欢寮€鍙戠殑銆俿tyleSheet鐨勫畾涔夎娉曚篃鏄被浼糃SS锛屽苟涓旀槸璺ㄥ钩鍙版敮鎸佺殑銆?/span>
locale灞炴€?/span>
locale灞炴€х敤浜庤缃瑷€鐜锛屽寘鎷瑷€鍜屽浗瀹躲€傚鏋滀竴涓儴浠舵病鏈夎缃瑷€鐜锛屽垯浣跨敤鐖跺璞＄殑璇█鐜鎴栬€呴粯璁よ瑷€鐜锛堝鏋滈儴浠舵槸椤跺眰閮ㄤ欢锛夈€?/span>
windowFilePath灞炴€?/span>
windowFilePath灞炴€т粎瀵圭獥鍙ｅ璞℃湁鏁堬紝鐢ㄤ簬鍏宠仈涓€涓獥鍙ｅ拰瀵瑰簲鐨勬枃浠跺強璺緞銆?褰撶獥鍙ｆ病鏈夎缃爣棰樺睘鎬х殑鎯呭喌涓嬶紝鍒欑獥鍙ｆ爣棰樺睍绀哄睍绀簑indowFilePath瀵瑰簲鐨勬枃浠跺悕鐨勪俊鎭紙璺緞淇℃伅涓嶅睍绀猴級锛屽鏋滀簩鑰呴兘璁剧疆锛屽垯浼樺厛浣跨敤绐楀彛鏍囬灞炴€х殑璁剧疆浣滀负鏍囬銆?/span>
璇ュ睘鎬х己鐪佷负绌猴紝杩欎釜鍔熻兘鍦ㄧ獥鍙ｆ墦寮€鏂囦欢杩涜鎿嶄綔鏃跺彲浠ヤ娇鐢ㄦ潵鏍囪鎵撳紑鐨勬枃浠躲€?/span>
inputMethodHints灞炴€?/span>
inputMethodHints灞炴€у彧瀵硅緭鍏ョ粍浠舵湁鏁堬紝杈撳叆娉曚娇鐢ㄥ畠鏉ユ绱㈡湁鍏宠緭鍏ユ硶搴斿浣曟搷浣滅殑鎻愮ず锛屼緥濡傦紝濡傛灉璁剧疆浜嗗彧鍏佽杈撳叆鏁板瓧鐨勬爣蹇楋紝鍒欒緭鍏ユ硶鍙兘浼氭洿鏀瑰叾鍙缁勪欢锛屼互鍙嶆槧鍙兘杈撳叆鏁板瓧銆傜浉鍏冲彇鍊煎強鍚箟濡備笅锛?/span>
windowModality灞炴€?/span>
windowModality灞炴€у彧瀵圭獥鍙ｅ璞℃湁鏁堬紝淇濆瓨鐨勬槸鍝簺绫诲瀷鐨勭獥鍙ｈ妯″紡绐楀彛闃诲銆傛ā寮忕獥鍙ｉ槻姝㈠叾浠栫獥鍙ｄ腑鐨勯儴浠惰幏鍙栬緭鍏ャ€傛灞炴€х殑鍊兼帶鍒跺搴旂獥鍙ｅ彲瑙佹椂闃诲鍝簺绫诲瀷鐨勭獥鍙ｈ幏鍙栬緭鍏ャ€傚湪妯″紡绐楀彛鍙鏃舵洿鏀规灞炴€ф棤鏁堛€傜浉鍏冲彇鍊煎強鍚箟濡備笅锛?/span>
*请认真填写需求信息，我们会在24小时内与您取得联系。
