在切换器周围添加轮廓

发布于 2025-01-09 13:12:54 字数 939 浏览 0 评论 0原文

我使用以下组件包 https://www.npmjs.com/package/react-开关选择器为了让它看起来像这样

到目前为止，我已经完成了以下操作，但仍然缺少边框。如何在切换

<SwitchSelector
    onChange={onChange}
    options={[
        { label: 'Milestone', value: 'Milestone' },
        { label: 'Activity', value: 'Activity' },
        ]}
    initialSelectedIndex={0}
    fontColor={'#767676'}
    backgroundColor={'#FFFFFF'}
    wrapperBorderRadius={30}
    selectedFontColor={'#526FD6'}
    selectedBackgroundColor={'#EEF1FB'}
    optionBorderRadius={30}
/>

我的结果

时添加边框轮廓并且轮廓的过渡与突出显示相匹配

原文

I using the following component package https://www.npmjs.com/package/react-switch-selector
To make it look like such

So far I have done the below but still missing border. How can I add the border outline and that the transition of outline matches the highlight when switching

<SwitchSelector
    onChange={onChange}
    options={[
        { label: 'Milestone', value: 'Milestone' },
        { label: 'Activity', value: 'Activity' },
        ]}
    initialSelectedIndex={0}
    fontColor={'#767676'}
    backgroundColor={'#FFFFFF'}
    wrapperBorderRadius={30}
    selectedFontColor={'#526FD6'}
    selectedBackgroundColor={'#EEF1FB'}
    optionBorderRadius={30}
/>

My outcome

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

晚风撩人 2025-01-16 13:12:55

我不知道这是否是正确的方法，但我结束了，但除了 @amir-naeem 的解决方案之外，还添加了以下内容，

selectedBackgroundColor={'#EEF1FB; outline: solid thin; border-radius: inherit; outline-color: #526FD6;'}

因此直接在 prop 中传递 CSS

I don't know if it's the right way but what I ended but doing in addition to @amir-naeem 's solution was add the below

selectedBackgroundColor={'#EEF1FB; outline: solid thin; border-radius: inherit; outline-color: #526FD6;'}

so passing CSS directly in prop

回复收藏 0 原文

沫离伤花 2025-01-16 13:12:54

我添加了 border 和 selectionIndicatorMargin 属性，它应该可以解决您的问题。

<SwitchSelector 
      onChange={onChange} 
      options={[ { label: 'Milestone', value: 'Milestone' }, { label: 'Activity', value: 'Activity' }, ]} 
      initialSelectedIndex={0} 
      fontColor={ '#767676'} 
      backgroundColor={ '#FFFFFF'} 
      wrapperBorderRadius={30} 
      selectedFontColor={'#526FD6'} 
      selectedBackgroundColor={ '#EEF1FB'} 
      optionBorderRadius={30} 
      border={ '1px solid #f7f7f7'} 
      selectionIndicatorMargin={0} 
/>

I have added border and selectionIndicatorMargin Props it should fix your issue.

<SwitchSelector 
      onChange={onChange} 
      options={[ { label: 'Milestone', value: 'Milestone' }, { label: 'Activity', value: 'Activity' }, ]} 
      initialSelectedIndex={0} 
      fontColor={ '#767676'} 
      backgroundColor={ '#FFFFFF'} 
      wrapperBorderRadius={30} 
      selectedFontColor={'#526FD6'} 
      selectedBackgroundColor={ '#EEF1FB'} 
      optionBorderRadius={30} 
      border={ '1px solid #f7f7f7'} 
      selectionIndicatorMargin={0} 
/>

回复收藏 0 原文

~没有更多了~