英文:
How to define proportions in MudBlazor stack?
问题
我复制了一个包含3个纸张元素的MudBlazor堆栈示例，并更改它们的大小比例，使最后一个更长：
<MudStack Row="true">
<MudPaper Class="px-1">Item 1</MudPaper>
<MudPaper Class="px-1">Item 2</MudPaper>
<MudPaper Class="px-10">Item 3</MudPaper>
</MudStack>
但我在这方面有两个问题：
- 即使对于这个简单的代码，最后一个项目也不是其他项目的10倍长，虽然它更长，但不多，
- 当我尝试将其他组件如
MudSelect或MudTextField用作堆栈元素时，它不起作用。大小在元素之间均匀分布
那么如何一般表达"使第K个元素比第L个元素宽/高N倍"的概念呢？
假设可以使用堆栈来实现。
英文:
I copied a stack example with 3 paper elements from MudBlazor and change their size proportions so the last one is longer:
<MudStack Row="true">
<MudPaper Class="px-1">Item 1</MudPaper>
<MudPaper Class="px-1">Item 2</MudPaper>
<MudPaper Class="px-10">Item 3</MudPaper>
</MudStack>
But I have two problems with this:
- even for this simple code the last item is not 10 times longer than any of the other items, it is longer, but not much,
- when I try to use other components like
MudSelectorMudTextFieldas stack elements it does not work. The size is evenly distributed between elements
So how to express in general the notion "make Kth element N times wider/higher than Lth one"?
Assuming it is doable using stack.
答案1
得分: 1
px-1 是CSS实用类，其中p表示填充（padding），x表示x轴。填充不能用于实现您所需的行为，因为它仅与内容和其边框相关。
要设置组件的宽度和高度，您需要通过使用组件的元素的width/height属性来更改，可以使用组件的Style属性，或者对于一些组件，例如MudPaper，Width/Height被公开为参数供您使用。虽然您仍然可以简单地为这些组件使用Style属性。
<MudStack Row="true">
<MudPaper Class="px-1" Width="@($"{_width}px")">Item 1</MudPaper>
<MudPaper Class="px-1" Width="@($"{_width*2}px")">Item 2</MudPaper>
<MudPaper Class="px-1" Width="@($"{_width*10}px")">Item 3</MudPaper>
</MudStack>
<MudStack Row="false">
<MudTextField Style="@($"width:{_width}px")" @bind-Value="TextValue" Label="1x" Variant="Variant.Text"></MudTextField>
<MudTextField Style="@($"width:{_width*2}px")" @bind-Value="TextValue" Label="2x" Variant="Variant.Text"></MudTextField>
<MudTextField Style="@($"width:{_width*3}px")" @bind-Value="TextValue" Label="3x" Variant="Variant.Text"></MudTextField>
</MudStack>
@code{
int _width = 200;
public string TextValue { get; set; }
}
英文:
px-1 is CSS Utility class where p is for padding and x is for the x-axis. And padding can't be used to achieve your desired behavior as it is only relative to the content and it's borders.
To set the width and height of components you will need to change the width/height attributes of the component's elements by either using the Style property of the component or for some components like MudPaper, the Width/Height are exposed as parameters for you to use. Although you can still also simply use the Style property for these aswell.
<MudStack Row="true">
<MudPaper Class="px-1" Width="@($"{_width}px")">Item 1</MudPaper>
<MudPaper Class="px-1" Width="@($"{_width*2}px")">Item 2</MudPaper>
<MudPaper Class="px-1" Width="@($"{_width*10}px")">Item 3</MudPaper>
</MudStack>
<MudStack Row="false">
<MudTextField Style="@($"width:{_width}px")" @bind-Value="TextValue" Label="1x" Variant="Variant.Text"></MudTextField>
<MudTextField Style="@($"width:{_width*2}px")" @bind-Value="TextValue" Label="2x" Variant="Variant.Text"></MudTextField>
<MudTextField Style="@($"width:{_width*3}px")" @bind-Value="TextValue" Label="3x" Variant="Variant.Text"></MudTextField>
</MudStack>
@code{
int _width = 200;
public string TextValue { get; set; }
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论