戰(zhàn)用法)
Argon React Native 組件詳解一Button 按鈕的 7 種顏色變體實(shí)戰(zhàn)用法【免費(fèi)下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-nativeArgon React Native 是一套基于 React Native 與 galio-framework 構(gòu)建的完整開源移動端 UI 模板內(nèi)置了超過 200 種組件變體。其中的 Button 按鈕組件通過一個簡單的color屬性就能切換default、primary、secondary、info、error、success、warning 這 7 種顏色變體幾乎覆蓋了電商、社交、工具類 App 的全部操作場景。本文面向新手用最少的代碼帶你快速上手 Argon React Native 的 Button 按鈕學(xué)會 7 種顏色變體的實(shí)戰(zhàn)用法并能在真實(shí)頁面中直接套用。?什么是 Argon React Native 的 Button 按鈕組件Argon React Native 項目在components/Button.js中對 galio-framework 的Button做了二次封裝形成自己的主題化按鈕。它默認(rèn)給按鈕加上 Argon 風(fēng)格的柔和陰影、12px 加粗文字并把顏色統(tǒng)一收斂到主題文件constants/Theme.js中。你不需要關(guān)心陰影參數(shù)怎么寫只需要關(guān)心業(yè)務(wù)邏輯——這正是它開箱即用的設(shè)計初衷。Argon React Native 按鈕 7 種顏色變體速查表7 種顏色變體的色值全部定義在constants/Theme.js的COLORS對象里源碼通過argonTheme.COLORS[color.toUpperCase()]自動映射所以使用上非常統(tǒng)一顏色變體對應(yīng)屬性值色值典型使用場景默認(rèn)default#172B4D深藏青通用操作、列表項按鈕主色primary#5E72E4靛藍(lán)紫登錄、注冊、提交訂單等核心 CTA次色secondary#F7FAFC淺灰白輔助按鈕、淺色背景上的操作信息info#11CDEF亮青詳情、了解更多、提示類入口成功success#2DCE89翠綠保存、確認(rèn)、支付成功反饋警告warning#FB6340橙色待處理、風(fēng)險提示類操作錯誤error#F5365C玫紅刪除、退出、危險操作最基礎(chǔ)的用法如何快速創(chuàng)建一個按鈕在screens/Elements.js中可以看到最標(biāo)準(zhǔn)的演示寫法先引入封裝好的組件再通過color屬性指定顏色變體即可。import { Button } from ../components; Button colorprimaryPRIMARY/Button Button colorinfoINFO/Button Button colorsuccessSUCCESS/Button不寫color時默認(rèn)就是default深藏青按鈕也就是 Elements 頁面里 PRIMARY 那枚按鈕的實(shí)際效果。一行代碼切換顏色是不是比手寫樣式簡單太多了7 種顏色變體的實(shí)戰(zhàn)應(yīng)用場景按鈕顏色在 UI 設(shè)計中是有語義的用對了顏色用戶一眼就能看懂操作的性質(zhì)primary 主按鈕頁面上最重要的操作建議只放一個主按鈕例如注冊頁的CREATE ACCOUNT按鈕見screens/Register.js用靛藍(lán)紫突出核心轉(zhuǎn)化點(diǎn)。secondary 次按鈕適合淺色輔助操作比如引導(dǎo)頁的Get Started按鈕見screens/Onboarding.js。注意淺色背景上要搭配深色文字項目里通過textStyle{{ color: black }}實(shí)現(xiàn)。success 成功按鈕保存、確認(rèn)收貨、充值成功這類正向閉環(huán)操作翠綠色能給用戶即時的安心感。warning 警告按鈕用于需要留個心眼的操作比如提醒續(xù)費(fèi)、待審核狀態(tài)橙色自帶提示屬性。error 錯誤按鈕刪除、注銷、強(qiáng)制退出等不可逆或高風(fēng)險操作紅色是業(yè)界通用的危險信號。info 信息按鈕查看詳情、跳轉(zhuǎn)文檔等中性信息型入口亮青色活潑又不搶主操作的風(fēng)頭。default 默認(rèn)按鈕最百搭適合表單內(nèi)輔助選項、列表行操作等低頻按鈕。調(diào)整按鈕形態(tài)small 與 shadowless 屬性除了顏色Button 還內(nèi)置了small和shadowless兩個實(shí)用屬性small一鍵將按鈕壓縮到 75×28 的緊湊尺寸適合表格行、篩選欄里的小按鈕。在screens/Elements.js中DELETE、SAVE FOR LATER兩個按鈕就是典型的小按鈕用法。shadowless去掉默認(rèn)陰影適合背景本身已有層次感或需要極簡風(fēng)格的場景。Button small colordefaultDELETE/Button Button shadowless colorprimaryFLAT/Button如何自定義按鈕顏色不局限于 7 種如果你覺得 7 種顏色不夠用Button 的color屬性同樣支持直接傳入任意十六進(jìn)制色值。源碼中的映射邏輯是先查主題色查不到就用你給的值因此自由度很高Button color#9C26B0自定義紫色按鈕/Button想全局調(diào)整 7 種變體的色值也只需修改constants/Theme.js里對應(yīng)的COLORS常量全 App 的按鈕顏色會同步更新非常適合品牌換膚需求。真實(shí)頁面中的按鈕組合案例把多種顏色變體組合起來頁面層次會非常清晰引導(dǎo)頁screens/Onboarding.js一枚secondary淺色Get Started按鈕配合深色文字干凈利落。注冊頁screens/Register.js主按鈕用primary強(qiáng)調(diào)創(chuàng)建賬號同時用一枚透明文字按鈕承載Privacy Policy這類次要鏈接。Elements 組件展示頁screens/Elements.js一次性展示了全部 7 種顏色變體是新手調(diào)試和學(xué)習(xí)的最佳參考頁面。相關(guān)源碼路徑速覽按鈕封裝源碼components/Button.js7 種顏色的定義constants/Theme.js全部顏色變體展示screens/Elements.js引導(dǎo)頁按鈕實(shí)戰(zhàn)screens/Onboarding.js注冊頁按鈕實(shí)戰(zhàn)screens/Register.js結(jié)語Argon React Native 的 Button 按鈕把顏色即語義貫徹到了極致7 種顏色變體配合small、shadowless等屬性足以應(yīng)對絕大多數(shù)業(yè)務(wù)場景。下一篇文章我們將繼續(xù)拆解 Input 輸入框組件歡迎持續(xù)關(guān)注本系列【免費(fèi)下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-native創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Argon React Native 組件詳解（一）：Button 按鈕的 7 種顏色變體實(shí)戰(zhàn)用法
Argon React Native 組件詳解一Button 按鈕的 7 種顏色變體實(shí)戰(zhàn)用法【免費(fèi)下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-nativeArgon React Native 是一套基于 React Native 與 galio-framework 構(gòu)建的完整開源移動端 UI 模板內(nèi)置了超過 200 種組件變體。其中的 Button 按鈕組件通過一個簡單的color屬性就能切換default、primary、secondary、info、error、success、warning 這 7 種顏色變體幾乎覆蓋了電商、社交、工具類 App 的全部操作場景。本文面向新手用最少的代碼帶你快速上手 Argon React Native 的 Button 按鈕學(xué)會 7 種顏色變體的實(shí)戰(zhàn)用法并能在真實(shí)頁面中直接套用。?什么是 Argon React Native 的 Button 按鈕組件Argon React Native 項目在components/Button.js中對 galio-framework 的Button做了二次封裝形成自己的主題化按鈕。它默認(rèn)給按鈕加上 Argon 風(fēng)格的柔和陰影、12px 加粗文字并把顏色統(tǒng)一收斂到主題文件constants/Theme.js中。你不需要關(guān)心陰影參數(shù)怎么寫只需要關(guān)心業(yè)務(wù)邏輯——這正是它開箱即用的設(shè)計初衷。Argon React Native 按鈕 7 種顏色變體速查表7 種顏色變體的色值全部定義在constants/Theme.js的COLORS對象里源碼通過argonTheme.COLORS[color.toUpperCase()]自動映射所以使用上非常統(tǒng)一顏色變體對應(yīng)屬性值色值典型使用場景默認(rèn)default#172B4D深藏青通用操作、列表項按鈕主色primary#5E72E4靛藍(lán)紫登錄、注冊、提交訂單等核心 CTA次色secondary#F7FAFC淺灰白輔助按鈕、淺色背景上的操作信息info#11CDEF亮青詳情、了解更多、提示類入口成功success#2DCE89翠綠保存、確認(rèn)、支付成功反饋警告warning#FB6340橙色待處理、風(fēng)險提示類操作錯誤error#F5365C玫紅刪除、退出、危險操作最基礎(chǔ)的用法如何快速創(chuàng)建一個按鈕在screens/Elements.js中可以看到最標(biāo)準(zhǔn)的演示寫法先引入封裝好的組件再通過color屬性指定顏色變體即可。import { Button } from ../components; Button colorprimaryPRIMARY/Button Button colorinfoINFO/Button Button colorsuccessSUCCESS/Button不寫color時默認(rèn)就是default深藏青按鈕也就是 Elements 頁面里 PRIMARY 那枚按鈕的實(shí)際效果。一行代碼切換顏色是不是比手寫樣式簡單太多了7 種顏色變體的實(shí)戰(zhàn)應(yīng)用場景按鈕顏色在 UI 設(shè)計中是有語義的用對了顏色用戶一眼就能看懂操作的性質(zhì)primary 主按鈕頁面上最重要的操作建議只放一個主按鈕例如注冊頁的CREATE ACCOUNT按鈕見screens/Register.js用靛藍(lán)紫突出核心轉(zhuǎn)化點(diǎn)。secondary 次按鈕適合淺色輔助操作比如引導(dǎo)頁的Get Started按鈕見screens/Onboarding.js。注意淺色背景上要搭配深色文字項目里通過textStyle{{ color: black }}實(shí)現(xiàn)。success 成功按鈕保存、確認(rèn)收貨、充值成功這類正向閉環(huán)操作翠綠色能給用戶即時的安心感。warning 警告按鈕用于需要留個心眼的操作比如提醒續(xù)費(fèi)、待審核狀態(tài)橙色自帶提示屬性。error 錯誤按鈕刪除、注銷、強(qiáng)制退出等不可逆或高風(fēng)險操作紅色是業(yè)界通用的危險信號。info 信息按鈕查看詳情、跳轉(zhuǎn)文檔等中性信息型入口亮青色活潑又不搶主操作的風(fēng)頭。default 默認(rèn)按鈕最百搭適合表單內(nèi)輔助選項、列表行操作等低頻按鈕。調(diào)整按鈕形態(tài)small 與 shadowless 屬性除了顏色Button 還內(nèi)置了small和shadowless兩個實(shí)用屬性small一鍵將按鈕壓縮到 75×28 的緊湊尺寸適合表格行、篩選欄里的小按鈕。在screens/Elements.js中DELETE、SAVE FOR LATER兩個按鈕就是典型的小按鈕用法。shadowless去掉默認(rèn)陰影適合背景本身已有層次感或需要極簡風(fēng)格的場景。Button small colordefaultDELETE/Button Button shadowless colorprimaryFLAT/Button如何自定義按鈕顏色不局限于 7 種如果你覺得 7 種顏色不夠用Button 的color屬性同樣支持直接傳入任意十六進(jìn)制色值。源碼中的映射邏輯是先查主題色查不到就用你給的值因此自由度很高Button color#9C26B0自定義紫色按鈕/Button想全局調(diào)整 7 種變體的色值也只需修改constants/Theme.js里對應(yīng)的COLORS常量全 App 的按鈕顏色會同步更新非常適合品牌換膚需求。真實(shí)頁面中的按鈕組合案例把多種顏色變體組合起來頁面層次會非常清晰引導(dǎo)頁screens/Onboarding.js一枚secondary淺色Get Started按鈕配合深色文字干凈利落。注冊頁screens/Register.js主按鈕用primary強(qiáng)調(diào)創(chuàng)建賬號同時用一枚透明文字按鈕承載Privacy Policy這類次要鏈接。Elements 組件展示頁screens/Elements.js一次性展示了全部 7 種顏色變體是新手調(diào)試和學(xué)習(xí)的最佳參考頁面。相關(guān)源碼路徑速覽按鈕封裝源碼components/Button.js7 種顏色的定義constants/Theme.js全部顏色變體展示screens/Elements.js引導(dǎo)頁按鈕實(shí)戰(zhàn)screens/Onboarding.js注冊頁按鈕實(shí)戰(zhàn)screens/Register.js結(jié)語Argon React Native 的 Button 按鈕把顏色即語義貫徹到了極致7 種顏色變體配合small、shadowless等屬性足以應(yīng)對絕大多數(shù)業(yè)務(wù)場景。下一篇文章我們將繼續(xù)拆解 Input 輸入框組件歡迎持續(xù)關(guān)注本系列【免費(fèi)下載鏈接】argon-react-nativeArgon React Native項目地址: https://gitcode.com/gh_mirrors/ar/argon-react-native創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考