整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
杈戝璇細鏍呮牸鏄槸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小時內與您取得聯系。
