英文:
How to set a border-bottom with radius in all corners on DxTabPage when the menu item is actived?
问题
I'm using DevExpress and Blazor with tailwind to build a nav menu. Following the UX standards I need set a border-bottom below menu item when is actived. The image below is a example:
I tried use this css:
.dxbl-tabs > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs > ul > li > .dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active {
font-weight: 600 !important;
background-color: transparent !important;
color: inherit !important;
border: none !important;
border-radius: 2px !important;
border-bottom: solid 2px white !important;
}
But the result was radius only bottom corners, and when I up the border-radius the result is this:
How can I set the CSS to have the border-bottom with 2px and all corners rounded, as in the first image?
This is a component that I'm using: DevExpress Blazor DxTabPage
And this is a code on the razor page:
<div class="flex-initial">
<DxTabs CssClass="border-none bg-transparent text-white text-[19.28px] min-w-[110%] active:font-[600]" @bind-ActiveTabIndex="@ActiveTabIndex">
<DxTabPage Text="Global Production Schedule"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
<DxTabPage Text="Base Models"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
<DxTabPage Text="Edition Models"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
</DxTabs>
</div>
Note: The provided CSS and HTML code are as per your request and have not been translated.
英文:
I'm using DevExpress and Blazor with tailwind to build a nav menu. Following the UX standards I need set a border-bottom below menu item when is actived. The image below is a example:
I tried use this css:
.dxbl-tabs > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs > ul > li > .dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active {
font-weight: 600 !important;
background-color: transparent !important;
color: inherit !important;
border: none !important;
border-radius: 2px !important;
border-bottom: solid 2px white !important;
}
But the result was radius only bottom corners, and when I up the border-radius the resul is this:
How I can set the css to have the border-bottom with 2px and the all corners rounded, as in first image?
This is a component that I'm using: https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTabPage
And this is a code on razor page:
<div class="flex-initial">
<DxTabs CssClass="border-none bg-transparent text-white text-[19.28px] min-w-[110%] active:font-[600]" @bind-ActiveTabIndex="@ActiveTabIndex">
<DxTabPage Text="Global Production Schedule"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
<DxTabPage Text="Base Models"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
<DxTabPage Text="Edition Models"
CssClass="custom-font-menu-item mx-[6px] px-0 pb-[3px] pt-0 font-medium before:font-[600] hover:font-[600] active:font-[600]" />
</DxTabs>
</div>
答案1
得分: 1
这不是一条边框，你需要在文本下方使用一个组合元素（不只是在 div 下方的边框），一个底部的图像边框，或者在文本下方使用 SVG。
如果你想使用边框（组合元素），你可以使用以下方法：
https://play.tailwindcss.com/lM1Sc6eod3
这是一个完全圆角的带有黑色背景的 div 组合边框。
英文:
that is not a border per say, you need either a composed element (not just border under your div) below the text, a image border at the bottom, or a svg below the text.
If you want to use border (composed element) you can that with the following:
https://play.tailwindcss.com/lM1Sc6eod3
which is a fully rounded border div with a black bg.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论