对于Mudblazor组件MudSelect，如何获得选择的值以在中心对齐？

发布于 2025-01-19 12:45:38 字数 1270 浏览 0 评论 0原文

我有一个非常简单的下拉菜单，一个 MudSelect，它工作得很好。当您列出选项时，它们在中间对齐很好，但我不知道如何使所选值在中间对齐。如果我在 MudSelect 本身上设置 Style="text-align: center" ，所选值仍会向左对齐。这在宽屏设备上看起来不太好。

    <MudSelect @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter">
        <MudSelectItem T="int" Value="1" Style="text-align: center"/>
        <MudSelectItem T="int" Value="2" Style="text-align: center"/>
        <MudSelectItem T="int" Value="3" Style="text-align: center"/>
        <MudSelectItem T="int" Value="4" Style="text-align: center"/>
        <MudSelectItem T="int" Value="5" Style="text-align: center"/>
        <MudSelectItem T="int" Value="6" Style="text-align: center"/>
        <MudSelectItem T="int" Value="7" Style="text-align: center"/>
        <MudSelectItem T="int" Value="8" Style="text-align: center"/>
        <MudSelectItem T="int" Value="9" Style="text-align: center"/>
        <MudSelectItem T="int" Value="10" Style="text-align: center"/>
    </MudSelect>

有谁知道如何在该组件的中心对齐所选值？我已经通读了 API 文档，但我仍然不明白该怎么做（而且我的 CCS 技能有限）。

原文

I have a very simple drop down, a MudSelect, which is working fine. When you list the choices they align fine in the middle, but I do not know how to get the selected value to align in the middle. If I set Style="text-align: center" on the MudSelect itself, the selected value is still aligned to the left. This does not look very nice on a wide device.

    <MudSelect @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter">
        <MudSelectItem T="int" Value="1" Style="text-align: center"/>
        <MudSelectItem T="int" Value="2" Style="text-align: center"/>
        <MudSelectItem T="int" Value="3" Style="text-align: center"/>
        <MudSelectItem T="int" Value="4" Style="text-align: center"/>
        <MudSelectItem T="int" Value="5" Style="text-align: center"/>
        <MudSelectItem T="int" Value="6" Style="text-align: center"/>
        <MudSelectItem T="int" Value="7" Style="text-align: center"/>
        <MudSelectItem T="int" Value="8" Style="text-align: center"/>
        <MudSelectItem T="int" Value="9" Style="text-align: center"/>
        <MudSelectItem T="int" Value="10" Style="text-align: center"/>
    </MudSelect>

Does anyone know how to align the selected value in the center for this component? I have read through the API documentation, but I still don't understand how to do it (and my CCS skills are limited).

分享到QQ

分享到微博

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

发布评论

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

清晰传感 2025-01-26 12:45:38

添加一个针对 MudSelect 组件内的 input 标签的 CSS 类，并通过该类指定文本对齐方式。

示例

以下是代码的修改版本：

<style>
    .center-mud-dropdown input {
        text-align: center;
    }
</style>

<MudSelect class="center-mud-dropdown" @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter" Style="text-align: center">
    <MudSelectItem T="int" Value="1" Style="text-align: center"/>
    <MudSelectItem T="int" Value="2" Style="text-align: center"/>
    <MudSelectItem T="int" Value="3" Style="text-align: center"/>
    <MudSelectItem T="int" Value="4" Style="text-align: center"/>
    <MudSelectItem T="int" Value="5" Style="text-align: center"/>
    <MudSelectItem T="int" Value="6" Style="text-align: center"/>
    <MudSelectItem T="int" Value="7" Style="text-align: center"/>
    <MudSelectItem T="int" Value="8" Style="text-align: center"/>
    <MudSelectItem T="int" Value="9" Style="text-align: center"/>
    <MudSelectItem T="int" Value="10" Style="text-align: center"/>
</MudSelect>

@code {
    private int NumberOfRounds { get; set; }
}

https://try.mudblazor.com/snippet/QaGcYIPIhHGGYjhU

Add a CSS class that targets the input tag inside your MudSelect component and assign the text alignment through there.

Example

Here's a modified version of your code:

<style>
    .center-mud-dropdown input {
        text-align: center;
    }
</style>

<MudSelect class="center-mud-dropdown" @bind-Value="NumberOfRounds" T="int" Variant="Variant.Outlined" AnchorOrigin="Origin.CenterCenter" Style="text-align: center">
    <MudSelectItem T="int" Value="1" Style="text-align: center"/>
    <MudSelectItem T="int" Value="2" Style="text-align: center"/>
    <MudSelectItem T="int" Value="3" Style="text-align: center"/>
    <MudSelectItem T="int" Value="4" Style="text-align: center"/>
    <MudSelectItem T="int" Value="5" Style="text-align: center"/>
    <MudSelectItem T="int" Value="6" Style="text-align: center"/>
    <MudSelectItem T="int" Value="7" Style="text-align: center"/>
    <MudSelectItem T="int" Value="8" Style="text-align: center"/>
    <MudSelectItem T="int" Value="9" Style="text-align: center"/>
    <MudSelectItem T="int" Value="10" Style="text-align: center"/>
</MudSelect>

@code {
    private int NumberOfRounds { get; set; }
}

https://try.mudblazor.com/snippet/QaGcYIPIhHGGYjhU

回复收藏 0 原文

~没有更多了~