MudBlazor 组件大小和布局

Question

在 Mudblazor 网站 ( https://mudblazor.com/components/select#variants ) 上的示例代码中，没有指定大小或布局，它们只是整齐地排列在一起。当我实现代码时，它使选择框占页面宽度的 100%，并将它们放置在彼此的顶部而不是彼此相邻。您将如何设置组件的大小和布局/位置？我希望两个选择框并排，复选框和按钮居中。

    <MudSelect T="MailboxUser" Placeholder="Select Forward From Mailbox" Variant="Variant.Outlined" Label="Forward From" @bind-Value="@SelectedForwardFrom" AnchorOrigin="Origin.BottomCenter" Dense="true" FullWidth="false">
        @foreach (var user in SortedUsers)
        {
            <MudSelectItem Value="@user" >@user.DisplayName (@user.PrimarySmtpAddress)</MudSelectItem>
        }
    </MudSelect>

    <MudSelect T="MailboxUser" Placeholder="Select Forward To Mailbox" Variant="Variant.Outlined" Label="Forward To" @bind-Value="@SelectedForwardTo" AnchorOrigin="Origin.BottomCenter" Dense="true" FullWidth="false">
        @foreach (var user in SortedUsers)
        {
            <MudSelectItem Value="@user">@user.DisplayName (@user.PrimarySmtpAddress)</MudSelectItem>
        }
    </MudSelect>
    <MudCheckBox @bind-Checked="@SendToBoth" Color="Color.Primary" Label="Deliver To Both Mailboxes"></MudCheckBox>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="HandleSetForwardAction">Set Forward</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="HandleRefreshAction">Refresh</MudButton>

Answer 1

我认为您正在寻找的是表单输入的网格。

在 MudBlazor 中，这是 MudGrid。我的旅行机器上没有安装 MudBlazor，因此这里有一些我直接从此处提取的示例代码 - https://www.mudblazor.com/components/autocomplete#usage。

、xs、sm... 控制不同屏幕宽度下的格式，以便您可以在小屏幕上将行折叠为列。你需要阅读相关内容。

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value1" SearchFunc="@Search1"
                         ResetValueOnEmptyText="@resetValueOnEmptyText"
                         CoerceText="@coerceText" CoerceValue="@coerceValue" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value2" SearchFunc="@Search2"
                         ResetValueOnEmptyText="@resetValueOnEmptyText"
                         CoerceText="@coerceText" CoerceValue="@coerceValue"
                         AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary" />
    </MudItem>
    <MudItem xs="12" md="12">
        <MudText Class="mb-n3" Typo="Typo.body2">
            <MudChip>@(value1 ?? "Not selected")</MudChip><MudChip>@(value2 ?? "Not selected")</MudChip>
        </MudText>
    </MudItem>
    <MudItem xs="12" md="12" class="flex-column">
        <MudSwitch @bind-Checked="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch>
        <MudSwitch @bind-Checked="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch>
        <MudSwitch @bind-Checked="coerceValue" Color="Color.Tertiary">Coerce Value to Text (if not found)</MudSwitch>
    </MudItem>
</MudGrid>