小编Sha*_*huv的帖子

我有一个 CSS 问题，对于这个论坛来说可能太具体了，但我想也许其他人也会从中受益。我有一个设置了最大高度的元素，其中有两个附加元素，如下所示：

代码示例：

<div class="container">
  <div class="inner-element">...</div>
  <div class="inner-element">...</div>
</div>

两个内部元素的内容具有未知的高度，可以在运行时更改。我想要以下行为：

1. 如果内容的总和小于 max-height，则它们应该各自具有内容的高度，并且外部元素不应高于其内容：

2. 如果内容之和大于 max-height 并且两者都超过一半，则每个内容都应获得 max-height 的一半：

3. 如果内容之和大于 max-height 但其中一个元素的内容小于 50%，则较小的元素应具有其内容的高度，而较大的元素应填充剩余空间：

我觉得纯 CSS 应该可以做到这一点，但我无法找到一种方法来做到这一点。有人有什么想法吗？...

考虑下面的类：

class Person {
  name: string = 'Shachar';
  age: number = 22;
  
  printPerson() {
    console.log(`name: ${this.name}, age: ${this.age}`);
  }
}

有没有办法获得一个具有此类实例“拥有”的属性的接口？在此示例中，我只需要属性name和age，因为printPerson最终将成为任何实例原型的一部分，而不是自己的属性。

需要明确输入“姓名”和“年龄”的解决方案是不可接受的，因为该类可能有许多属性，而我只想将它们写入一次。

不确定这个问题是否适合这个论坛，但我找不到其他地方。

我们的设计团队基于流畅的 ui 库构建了他们的设计系统，如此处所述。他们从这里下载了设计。

不幸的是，我们的工程团队正在使用 Angular，因此我们自然而然地选择了 Web组件，但令我们惊讶的是，该库完全不同——不同的组件集、功能，当然还有完全不同的设计。

我认为所有的 Fluentui 平台都应该是相同设计的实现/接口。为什么情况并非如此？我缺少什么？

有没有一种方法可以在 Angular 中使用此处描述的设计？（除了在我的 Angular 项目中实际使用 React 库）。

感谢您的帮助，如果这个问题不适合本论坛，我们深表歉意。

例子：

<ListBox Name="List" 
             ItemsSource="{Binding Items}" 
             SelectedIndex="{Binding SelectedIndex}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <DockPanel >
                    <Button DockPanel.Dock="Left" Content="Show" Command="{Binding ShowCommand}" CommandParameter="{Binding}"/>
                    <TextBlock Text="{Binding }"/>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

单击按钮什么也不做。我试图将命令绑定到 外面的按钮DataTemplate并且它起作用了。我还尝试将按钮注册DataTemplate到 a 中Click_event，这确实有效。

为什么该命令在 DataTemplate 中不起作用？

下面是我在应用程序中用于按钮的样式.现在Border,"Background"当用户用鼠标左键单击按钮时,我正在尝试更改具有名称的元素的背景颜色.

我怎么做？

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="#6e6964" BorderThickness="1" CornerRadius="1" Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True">
                    <Border BorderBrush="White" BorderThickness="1" CornerRadius="1" SnapsToDevicePixels="True">
                        <Border Padding="12,4,12,4" SnapsToDevicePixels="True" Name="Background">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#f1f1f1" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0" Color="#edf8fb"/>
                                    <GradientStop Offset="1" Color="#e2edf0"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

（我正在使用严格的空检查）

我有以下箭头函数，具有重载类型：

    type INumberConverter = {
      (value: number): number;
      (value: null): null;
    };
    const decimalToPercent: INumberConverter = (value: number | null): number | null => {
      if (!value) {
        return null;
      }
      return value * 100;
    };

根据我对其他问题的理解（在对类方法使用粗箭头语法时，我可以使用 TypeScript 重载吗？）这应该是有效的。我总是收到以下错误：

TS2322: Type '(value: number | null) => number | null' is not assignable to type 'INumberConverter'.   Type 'number | null' is not assignable to type 'number'.     Type 'null' is not assignable to type 'number'

如果我定期编写此函数（使用function关键字）：

    function …