From 093afd3be27ea5e9692839845b69bd56e2405518 Mon Sep 17 00:00:00 2001 From: Riku <risaku@163.com> Date: 星期二, 13 八月 2024 23:49:45 +0800 Subject: [PATCH] 204.8.13 --- miniprogram_npm/tdesign-miniprogram/button/README.md | 140 ++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 128 insertions(+), 12 deletions(-) diff --git a/miniprogram_npm/tdesign-miniprogram/button/README.md b/miniprogram_npm/tdesign-miniprogram/button/README.md index 937e340..3b35bff 100644 --- a/miniprogram_npm/tdesign-miniprogram/button/README.md +++ b/miniprogram_npm/tdesign-miniprogram/button/README.md @@ -18,45 +18,52 @@ ## 浠g爜婕旂ず +<a href="https://developers.weixin.qq.com/s/F1cSo7mm75SS" title="鍦ㄥ紑鍙戣�呭伐鍏蜂腑棰勮鏁堟灉" target="_blank" rel="noopener noreferrer"> 鍦ㄥ紑鍙戣�呭伐鍏蜂腑棰勮鏁堟灉 </a> + +<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" > +<p>Tips: 璇风‘淇濆紑鍙戣�呭伐鍏蜂负鎵撳紑鐘舵�併�傚鍏ュ紑鍙戣�呭伐鍏峰悗锛屼緷娆℃墽琛岋細npm i > 鏋勫缓npm鍖� > 鍕鹃�� "灏咼S缂栬瘧鎴怑S5"</p> +</blockquote> + + ### 01 缁勪欢绫诲瀷 -鍩虹鎸夐挳 +#### 鍩虹鎸夐挳 {{ base }} -鍥炬爣鎸夐挳 +#### 鍥炬爣鎸夐挳 {{ icon-btn }} -骞界伒鎸夐挳 +#### 骞界伒鎸夐挳 {{ ghost-btn }} -缁勫悎鎸夐挳 +#### 缁勫悎鎸夐挳 {{ group-btn }} -閫氭爮鎸夐挳 +#### 閫氭爮鎸夐挳 {{ block-btn }} ### 02 缁勪欢鐘舵�� -鎸夐挳绂佺敤鎬� +#### 鎸夐挳绂佺敤鎬� {{ disabled }} ### 03 缁勪欢鏍峰紡 -鎸夐挳灏哄 +#### 鎸夐挳灏哄 {{ size }} -鎸夐挳褰㈢姸 +#### 鎸夐挳褰㈢姸 {{ shape }} -鎸夐挳涓婚 +#### 鎸夐挳涓婚 {{ theme }} @@ -65,14 +72,14 @@ 鍚嶇О | 绫诲瀷 | 榛樿鍊� | 璇存槑 | 蹇呬紶 -- | -- | -- | -- | -- +t-id | String | - | 鎸夐挳鏍囩id | N block | Boolean | false | 鏄惁涓哄潡绾у厓绱� | N content | String / Slot | - | 鎸夐挳鍐呭 | N custom-dataset | Object | - | 鑷畾涔� dataset锛屽彲閫氳繃 event.currentTarget.dataset.custom 鑾峰彇銆俆S 绫诲瀷锛歚any` | N disabled | Boolean | false | 绂佺敤鐘舵�� | N -external-classes | Array | - | 缁勪欢绫诲悕銆俙['t-class', 't-class-icon', 't-class-loading']` | N ghost | Boolean | false | 鏄惁涓哄菇鐏垫寜閽紙闀傜┖鎸夐挳锛� | N icon | String / Object | - | 鍥炬爣鍚嶇О銆傚�间负瀛楃涓茶〃绀哄浘鏍囧悕绉帮紝鍊间负 `Object` 绫诲瀷锛岃〃绀洪�忎紶鑷� `icon`銆� | N -loading | Boolean | false | 鏄惁鏄剧ず涓哄姞杞界姸鎬� | N +loading | Boolean | false | 鏄惁鏄剧ず涓哄姞杞界姸鎬侊紝skyline妯″紡涓嬫殏涓嶆敮鎸佽灞炴�� | N loading-props | Object | - | 閫忎紶鑷� Loading 缁勪欢銆俆S 绫诲瀷锛歚LoadingProps`锛孾Loading API Documents](./loading?tab=api)銆俒璇︾粏绫诲瀷瀹氫箟](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N shape | String | rectangle | 鎸夐挳褰㈢姸锛屾湁 4 绉嶏細闀挎柟褰€�佹鏂瑰舰銆佸渾瑙掗暱鏂瑰舰銆佸渾褰€�傚彲閫夐」锛歳ectangle/square/round/circle | N size | String | medium | 缁勪欢灏哄銆傚彲閫夐」锛歟xtra-small/small/medium/large銆俆S 绫诲瀷锛歚SizeEnum` | N @@ -80,7 +87,7 @@ theme | String | default | 缁勪欢椋庢牸锛屼緷娆′负鍝佺墝鑹层�佸嵄闄╄壊銆傚彲閫夐」锛歞efault/primary/danger/light | N type | String | - | 鍚屽皬绋嬪簭鐨� formType銆傚彲閫夐」锛歴ubmit/reset | N variant | String | base | 鎸夐挳褰㈠紡锛屽熀纭�銆佺嚎妗嗐�佹枃瀛椼�傚彲閫夐」锛歜ase/outline/dashed/text | N -open-type | String | - | 寰俊寮�鏀捐兘鍔涖��<br />鍏蜂綋閲婁箟锛�<br />`contact` 鎵撳紑瀹㈡湇浼氳瘽锛屽鏋滅敤鎴峰湪浼氳瘽涓偣鍑绘秷鎭崱鐗囧悗杩斿洖灏忕▼搴忥紝鍙互浠� bindcontact 鍥炶皟涓幏寰楀叿浣撲俊鎭紝<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">鍏蜂綋璇存槑</a> 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`share` 瑙﹀彂鐢ㄦ埛杞彂锛屼娇鐢ㄥ墠寤鸿鍏堥槄璇�<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#浣跨敤鎸囧紩">浣跨敤鎸囧紩</a>锛�<br />`getPhoneNumber` 鑾峰彇鐢ㄦ埛鎵嬫満鍙凤紝鍙互浠� bindgetphonenumber 鍥炶皟涓幏鍙栧埌鐢ㄦ埛淇℃伅锛�<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">鍏蜂綋璇存槑</a> 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`getUserInfo` 鑾峰彇鐢ㄦ埛淇℃伅锛屽彲浠ヤ粠 bindgetuserinfo 鍥炶皟涓幏鍙栧埌鐢ㄦ埛淇℃伅 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`launchApp` 鎵撳紑APP锛屽彲浠ラ�氳繃 app-parameter 灞炴�ц瀹氬悜 APP 浼犵殑鍙傛暟<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">鍏蜂綋璇存槑</a>锛�<br />`openSetting` 鎵撳紑鎺堟潈璁剧疆椤碉紱<br />`feedback` 鎵撳紑鈥滄剰瑙佸弽棣堚�濋〉闈紝鐢ㄦ埛鍙彁浜ゅ弽棣堝唴瀹瑰苟涓婁紶<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">鏃ュ織</a>锛屽紑鍙戣�呭彲浠ョ櫥褰�<a href="https://mp.weixin.qq.com/">灏忕▼搴忕鐞嗗悗鍙�</a>鍚庤繘鍏ュ乏渚ц彍鍗曗�滃鏈嶅弽棣堚�濋〉闈㈣幏鍙栧埌鍙嶉鍐呭锛�<br />`chooseAvatar` 鑾峰彇鐢ㄦ埛澶村儚锛屽彲浠ヤ粠 bindchooseavatar 鍥炶皟涓幏鍙栧埌澶村儚淇℃伅銆�<br />[灏忕▼搴忓畼鏂规枃妗(https://developers.weixin.qq.com/miniprogram/dev/component/button.html)銆傚彲閫夐」锛歝ontact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N +open-type | String | - | 寰俊寮�鏀捐兘鍔涖��<br />鍏蜂綋閲婁箟锛�<br />`contact` 鎵撳紑瀹㈡湇浼氳瘽锛屽鏋滅敤鎴峰湪浼氳瘽涓偣鍑绘秷鎭崱鐗囧悗杩斿洖灏忕▼搴忥紝鍙互浠� bindcontact 鍥炶皟涓幏寰楀叿浣撲俊鎭紝<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">鍏蜂綋璇存槑</a> 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`share` 瑙﹀彂鐢ㄦ埛杞彂锛屼娇鐢ㄥ墠寤鸿鍏堥槄璇�<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#浣跨敤鎸囧紩">浣跨敤鎸囧紩</a>锛�<br />`getPhoneNumber` 鑾峰彇鐢ㄦ埛鎵嬫満鍙凤紝鍙互浠� bindgetphonenumber 鍥炶皟涓幏鍙栧埌鐢ㄦ埛淇℃伅锛�<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">鍏蜂綋璇存槑</a> 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`getUserInfo` 鑾峰彇鐢ㄦ埛淇℃伅锛屽彲浠ヤ粠 bindgetuserinfo 鍥炶皟涓幏鍙栧埌鐢ㄦ埛淇℃伅 锛�*灏忕▼搴忔彃浠朵腑涓嶈兘浣跨敤*锛夛紱<br />`launchApp` 鎵撳紑APP锛屽彲浠ラ�氳繃 app-parameter 灞炴�ц瀹氬悜 APP 浼犵殑鍙傛暟<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">鍏蜂綋璇存槑</a>锛�<br />`openSetting` 鎵撳紑鎺堟潈璁剧疆椤碉紱<br />`feedback` 鎵撳紑鈥滄剰瑙佸弽棣堚�濋〉闈紝鐢ㄦ埛鍙彁浜ゅ弽棣堝唴瀹瑰苟涓婁紶<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">鏃ュ織</a>锛屽紑鍙戣�呭彲浠ョ櫥褰�<a href="https://mp.weixin.qq.com/">灏忕▼搴忕鐞嗗悗鍙�</a>鍚庤繘鍏ュ乏渚ц彍鍗曗�滃鏈嶅弽棣堚�濋〉闈㈣幏鍙栧埌鍙嶉鍐呭锛�<br />`chooseAvatar` 鑾峰彇鐢ㄦ埛澶村儚锛屽彲浠ヤ粠 bindchooseavatar 鍥炶皟涓幏鍙栧埌澶村儚淇℃伅锛�<br />`agreePrivacyAuthorization`鐢ㄦ埛鍚屾剰闅愮鍗忚鎸夐挳銆傜敤鎴风偣鍑讳竴娆℃鎸夐挳鍚庯紝鎵�鏈夐殣绉佹帴鍙e彲浠ユ甯歌皟鐢ㄣ�傚彲閫氳繃`bindagreeprivacyauthorization`鐩戝惉鐢ㄦ埛鍚屾剰闅愮鍗忚浜嬩欢銆傞殣绉佸悎瑙勫紑鍙戞寚鍗楄鎯呭彲瑙併��<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html">灏忕▼搴忛殣绉佸崗璁紑鍙戞寚鍗�</a>銆嬨��<br />[灏忕▼搴忓畼鏂规枃妗(https://developers.weixin.qq.com/miniprogram/dev/component/button.html)銆傚彲閫夐」锛歝ontact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar/agreePrivacyAuthorization | N hover-class | String | '' | 鎸囧畾鎸夐挳鎸変笅鍘荤殑鏍峰紡绫伙紝鎸夐挳涓嶄负鍔犺浇鎴栫鐢ㄧ姸鎬佹椂鏈夋晥銆傚綋 `hover-class="none"` 鏃讹紝娌℃湁鐐瑰嚮鎬佹晥鏋� | N hover-stop-propagation | Boolean | false | 鎸囧畾鏄惁闃绘鏈妭鐐圭殑绁栧厛鑺傜偣鍑虹幇鐐瑰嚮鎬� | N hover-start-time | Number | 20 | 鎸変綇鍚庡涔呭嚭鐜扮偣鍑绘�侊紝鍗曚綅姣 | N @@ -99,9 +106,118 @@ bindopensetting | Eventhandle | - | 鍦ㄦ墦寮�鎺堟潈璁剧疆椤靛悗鍥炶皟锛宱pen-type=openSetting鏃舵湁鏁� | N bindlaunchapp | Eventhandle | - | 鎵撳紑 APP 鎴愬姛鐨勫洖璋冿紝open-type=launchApp鏃舵湁鏁� | N bindchooseavatar | Eventhandle | - | 鑾峰彇鐢ㄦ埛澶村儚鍥炶皟锛宱pen-type=chooseAvatar鏃舵湁鏁� | N +bindagreeprivacyauthorization | Eventhandle | - | 鐢ㄦ埛鍚屾剰闅愮鍗忚浜嬩欢鍥炶皟锛宱pen-type=agreePrivacyAuthorization鏃舵湁鏁� | N ### Button Events 鍚嶇О | 鍙傛暟 | 鎻忚堪 -- | -- | -- tap | `event` | 鐐瑰嚮鎸夐挳锛屽綋鎸夐挳涓嶄负鍔犺浇鎴栫鐢ㄧ姸鎬佹椂瑙﹀彂 + +### Button 澶栭儴鏍峰紡绫� +绫诲悕 | 璇存槑 +-- | -- +t-class | 鏍硅妭鐐规牱寮忕被 +t-class-icon | 鍥炬爣鏍峰紡绫� +t-class-loading | 鍔犺浇鏍峰紡绫� + +### CSS 鍙橀噺 +缁勪欢鎻愪緵浜嗕笅鍒� CSS 鍙橀噺锛屽彲鐢ㄤ簬鑷畾涔夋牱寮忋�� +鍚嶇О | 榛樿鍊� | 鎻忚堪 +-- | -- | -- +--td-button-border-radius | @radius-default | - +--td-button-border-width | 4rpx | - +--td-button-danger-active-bg-color | @error-color-7 | - +--td-button-danger-active-border-color | @error-color-7 | - +--td-button-danger-bg-color | @error-color | - +--td-button-danger-border-color | @error-color | - +--td-button-danger-color | @font-white-1 | - +--td-button-danger-dashed-border-color | @button-danger-dashed-color | - +--td-button-danger-dashed-color | @error-color | - +--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - +--td-button-danger-disabled-bg | @error-color-3 | - +--td-button-danger-disabled-border-color | @error-color-3 | - +--td-button-danger-disabled-color | @font-white-1 | - +--td-button-danger-outline-active-bg-color | @bg-color-container-active | - +--td-button-danger-outline-active-border-color | @error-color-7 | - +--td-button-danger-outline-border-color | @button-danger-outline-color | - +--td-button-danger-outline-color | @error-color | - +--td-button-danger-outline-disabled-color | @error-color-3 | - +--td-button-danger-text-active-bg-color | @bg-color-container-active | - +--td-button-danger-text-color | @error-color | - +--td-button-danger-text-disabled-color | @button-danger-disabled-color | - +--td-button-default-active-bg-color | @bg-color-component-active | - +--td-button-default-active-border-color | @bg-color-component-active | - +--td-button-default-bg-color | @bg-color-component | - +--td-button-default-border-color | @bg-color-component | - +--td-button-default-color | @font-gray-1 | - +--td-button-default-disabled-bg | @bg-color-component-disabled | - +--td-button-default-disabled-border-color | @bg-color-component-disabled | - +--td-button-default-disabled-color | @font-gray-4 | - +--td-button-default-outline-active-bg-color | @bg-color-container-active | - +--td-button-default-outline-active-border-color | @component-border | - +--td-button-default-outline-border-color | @component-border | - +--td-button-default-outline-color | @font-gray-1 | - +--td-button-default-outline-disabled-color | @component-border | - +--td-button-default-text-active-bg-color | @bg-color-container-active | - +--td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-height | 56rpx | - +--td-button-extra-small-icon-font-size | 36rpx | - +--td-button-extra-small-padding-horizontal | 16rpx | - +--td-button-font-weight | 600 | - +--td-button-ghost-border-color | @button-ghost-color | - +--td-button-ghost-color | @bg-color-container | - +--td-button-ghost-danger-border-color | @error-color | - +--td-button-ghost-danger-color | @error-color | - +--td-button-ghost-disabled-color | rgba(255, 255, 255, 0.35) | - +--td-button-ghost-primary-border-color | @brand-color | - +--td-button-ghost-primary-color | @brand-color | - +--td-button-icon-border-radius | 8rpx | - +--td-button-icon-spacer | @spacer | - +--td-button-large-font-size | @font-size-m | - +--td-button-large-height | 96rpx | - +--td-button-large-icon-font-size | 48rpx | - +--td-button-large-padding-horizontal | 40rpx | - +--td-button-light-active-bg-color | @brand-color-light-active | - +--td-button-light-active-border-color | @brand-color-light-active | - +--td-button-light-bg-color | @brand-color-light | - +--td-button-light-border-color | @brand-color-light | - +--td-button-light-color | @brand-color | - +--td-button-light-disabled-bg | @brand-color-light | - +--td-button-light-disabled-border-color | @brand-color-light | - +--td-button-light-disabled-color | @brand-color-disabled | - +--td-button-light-outline-active-bg-color | @brand-color-light-active | - +--td-button-light-outline-active-border-color | @brand-color-active | - +--td-button-light-outline-bg-color | @brand-color-light | - +--td-button-light-outline-border-color | @button-light-outline-color | - +--td-button-light-outline-color | @brand-color | - +--td-button-light-outline-disabled-color | @brand-color-disabled | - +--td-button-light-text-active-bg-color | @bg-color-container-active | - +--td-button-light-text-color | @brand-color | - +--td-button-medium-font-size | @font-size-m | - +--td-button-medium-height | 80rpx | - +--td-button-medium-icon-font-size | 40rpx | - +--td-button-medium-padding-horizontal | 32rpx | - +--td-button-primary-active-bg-color | @brand-color-active | - +--td-button-primary-active-border-color | @brand-color-active | - +--td-button-primary-bg-color | @brand-color | - +--td-button-primary-border-color | @brand-color | - +--td-button-primary-color | @font-white-1 | - +--td-button-primary-dashed-border-color | @button-primary-dashed-color | - +--td-button-primary-dashed-color | @brand-color | - +--td-button-primary-dashed-disabled-color | @brand-color-disabled | - +--td-button-primary-disabled-bg | @brand-color-disabled | - +--td-button-primary-disabled-border-color | @brand-color-disabled | - +--td-button-primary-disabled-color | @font-white-1 | - +--td-button-primary-outline-active-bg-color | @bg-color-container-active | - +--td-button-primary-outline-active-border-color | @brand-color-active | - +--td-button-primary-outline-border-color | @button-primary-outline-color | - +--td-button-primary-outline-color | @brand-color | - +--td-button-primary-outline-disabled-color | @brand-color-disabled | - +--td-button-primary-text-active-bg-color | @bg-color-container-active | - +--td-button-primary-text-color | @brand-color | - +--td-button-primary-text-disabled-color | @brand-color-disabled | - +--td-button-small-font-size | @font-size-base | - +--td-button-small-height | 64rpx | - +--td-button-small-icon-font-size | 36rpx | - +--td-button-small-padding-horizontal | 24rpx | - -- Gitblit v1.9.3