✨ feat(下拉菜单): 下拉菜单组件50%
This commit is contained in:
xuan
@@ -24,7 +24,7 @@ function hex2rgb(hex) {
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
}
|
||||
|
||||
export type IconNames = 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
export type IconNames = 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
@@ -36,7 +36,7 @@ type PropsType = {
|
||||
|
||||
const IconFont:FC<PropsType> = ({
|
||||
name,
|
||||
size = 18,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
@@ -82,7 +82,43 @@ const IconFont:FC<PropsType> = ({
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-zhankai */}
|
||||
{/* icon-zhankai1 */}
|
||||
|
||||
{ name === 'icon-zhankai1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi1 */}
|
||||
|
||||
{ name === 'icon-shouqi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 69.818182l698.181818 907.636363H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouhou1 */}
|
||||
|
||||
{ name === 'icon-shouhou1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M563.584 256C694.144 256 800 361.84 800 492.416v23.168C800 646.144 694.16 752 563.584 752H256l72.64-65.92A235.728 235.728 0 0 1 256 515.6v-23.168C256 361.856 361.84 256 492.416 256h71.168z m-109.76 198.4a49.52 49.52 0 0 0-49.456 49.6c0 27.392 22.144 49.6 49.44 49.6a49.52 49.52 0 0 0 49.472-49.6c0-27.392-22.144-49.6-49.456-49.6z m148.352 0a49.52 49.52 0 0 0-49.44 49.6c0 27.392 22.128 49.6 49.44 49.6a49.52 49.52 0 0 0 49.456-49.6c0-27.392-22.144-49.6-49.44-49.6z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' opacity='.95' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-cangku1 */}
|
||||
|
||||
{ name === 'icon-cangku1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M565.6 251.968l2.96 2.64 2.432 2.352 231.664 233.248c11.632 11.712 11.68 27.536 3.952 43.904a20 20 0 0 1-16 11.344l-2.08 0.112H754.4V738.56a43.424 43.424 0 0 1-38.56 43.152l-2.72 0.224-2.096 0.048H313.2a43.408 43.408 0 0 1-43.312-40.784l-0.08-2.64-0.016-193.024h-34.032a20 20 0 0 1-16.208-8.256l-1.152-1.792-0.752-1.456c-7.024-14.992-8.176-28.96 0.24-41.056l1.824-2.4 1.792-1.936 230.368-231.952a83.824 83.824 0 0 1 113.712-4.736zM576.976 592h-129.984a25.008 25.008 0 0 0 0 50h130a25.008 25.008 0 0 0 0-50z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-saoma */}
|
||||
|
||||
{ name === 'icon-saoma' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(89,102,247)'}' /%3E%3Cpath d='M302 592v130h129.984l0.016 40h-150c-11.04 0-20-8.96-20-20V592h40z m460 0v150c0 11.04-8.96 20-20 20H592v-40h130V592h40z m0-100v40h-500v-40h500z m-20-230c11.04 0 20 8.96 20 20V432h-40v-130H592v-40h150z m-310 0v40h-130V432h-40v-150c0-11.04 8.96-20 20-20H432z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-dizhi1 */}
|
||||
|
||||
{ name === 'icon-dizhi1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-huodaofukuan */}
|
||||
|
||||
{ name === 'icon-huodaofukuan' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M224 400m32 0l512 0q32 0 32 32l0 304q0 32-32 32l-512 0q-32 0-32-32l0-304q0-32 32-32Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M320.48 240h383.04a32 32 0 0 1 26.048 13.408l52.368 73.28A16 16 0 0 1 768.912 352H255.088a16 16 0 0 1-13.024-25.296l52.368-73.296A32 32 0 0 1 320.464 240z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M461.728 485.008l1.36 1.248L512 535.168l48.912-48.912a21.328 21.328 0 0 1 31.424 28.8l-1.248 1.36L563.488 544h23.184a21.328 21.328 0 0 1 0 42.672l-53.344-0.016v32h53.344a21.328 21.328 0 1 1 0 42.672h-53.344v21.344a21.328 21.328 0 1 1-42.656 0l-0.016-21.344h-53.328a21.328 21.328 0 1 1 0-42.656l53.328-0.016v-32h-53.328a21.328 21.328 0 0 1 0-42.656h23.168l-27.584-27.584a21.328 21.328 0 0 1 28.816-31.408z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(74,127,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yufukuan1 */}
|
||||
|
||||
{ name === 'icon-yufukuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M762 422c11.04 0 20 8.96 20 20v300c0 11.04-8.96 20-20 20h-500c-11.04 0-20-8.96-20-20v-300c0-11.04 8.96-20 20-20h500zM512 622H352a10 10 0 0 0-10 10v20c0 5.52 4.48 10 10 10h160c5.52 0 10-4.48 10-10V632a10 10 0 0 0-10-10z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M404.96 223.872l322.384 119.36a20 20 0 0 1-6.944 38.768H325.392a20 20 0 0 1-17.632-29.44l63.04-117.792c5.808-10.848 21.12-15.728 34.16-10.896z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' opacity='.7' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-yue */}
|
||||
|
||||
{ name === 'icon-yue' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(252,168,70)'}' /%3E%3Cpath d='M772 402c5.52 0 10 4.48 10 10V752c0 5.52-4.48 10-10 10H252A10 10 0 0 1 242 752V412c0-5.52 4.48-10 10-10h520z m-185.856 85.856a20 20 0 0 0-28.288 0L512 533.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V672a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H532v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M262 292m10 0l480 0q10 0 10 10l0 40q0 10-10 10l-480 0q-10 0-10-10l0-40q0-10 10-10Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zidingyi */}
|
||||
|
||||
{ name === 'icon-zidingyi' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M497.12 695.84l-115.824 60.88a32 32 0 0 1-46.432-33.744l22.128-128.96a32 32 0 0 0-9.216-28.32l-93.68-91.328a32 32 0 0 1 17.728-54.576l129.488-18.816a32 32 0 0 0 24.08-17.504l57.92-117.328a32 32 0 0 1 57.376 0l57.92 117.328a32 32 0 0 0 24.08 17.504l129.488 18.816a32 32 0 0 1 17.728 54.576l-93.68 91.328a32 32 0 0 0-9.216 28.32l22.128 128.96a32 32 0 0 1-46.432 33.744l-115.808-60.896a32 32 0 0 0-29.792 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-jinetiaozheng */}
|
||||
|
||||
{ name === 'icon-jinetiaozheng' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M768 304a32 32 0 0 1 32 32v352a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V336a32 32 0 0 1 32-32h512z m-309.856 119.856a20 20 0 0 0-28.288 0L384 469.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V608a20 20 0 0 0 40 0v-20h50a20 20 0 0 0 0-40H404v-30h50a20 20 0 0 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008zM560 448h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z m0 112h160a16 16 0 0 1 16 16v16a16 16 0 0 1-16 16H560a16 16 0 0 1-16-16v-16a16 16 0 0 1 16-16z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tuikuan1 */}
|
||||
|
||||
{ name === 'icon-tuikuan1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}' /%3E%3Cpath d='M752 416a32 32 0 0 1 32 32v288a32 32 0 0 1-32 32H272a32 32 0 0 1-32-32V448a32 32 0 0 1 32-32h480z m-165.856 87.856a20 20 0 0 0-28.288 0L512 549.728l-45.856-45.872-1.28-1.168a20 20 0 0 0-27.008 29.44l25.872 25.872h-21.728a20 20 0 0 0 0 40h50v30h-50a20 20 0 0 0 0 40h50V688a20 20 0 1 0 40 0v-20h50a20 20 0 1 0 0-40H532v-30h50a20 20 0 1 0 0-40h-21.744l25.888-25.856 1.168-1.28a20 20 0 0 0-1.168-27.008z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}' /%3E%3Cpath d='M354.128 253.168a24 24 0 0 1 31.6 36.048l-1.856 1.616-26.816 21.168H720a24 24 0 0 1 23.888 21.696L744 336a24 24 0 0 1-21.696 23.888L720 360H288c-22.032 0-32.08-26.896-16.528-41.424l1.648-1.408 81.008-64z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai */}
|
||||
|
||||
{ name === 'icon-zhankai' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M492.586667 668.138667c9.962667 9.941333 25.642667 10.666667 36.416 2.133333l2.389333-2.133333 232.746667-232.746667a27.434667 27.434667 0 0 0-36.394667-40.917333l-2.389333 2.133333-213.397334 213.333333-213.312-213.333333a27.434667 27.434667 0 0 0-36.394666-2.133333l-2.389334 2.133333a27.434667 27.434667 0 0 0-2.133333 36.394667l2.133333 2.389333 232.746667 232.746667z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.8' /%3E%3C/svg%3E${quot}); width: ${svgSize}px; height: ${svgSize}px; `, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi */}
|
||||
|
||||
Reference in New Issue
Block a user