Accordion

在手风琴框架中堆叠的展开器，以弹簧动效开合。

示例可交互

Accordion — Avalonia UIKit

Live demo unavailable

<Border Classes="accordion" Width="360" HorizontalAlignment="Left">
  <StackPanel Classes="accordion">
    <Expander Header="Is it accessible?" Content="Yes. It adheres to the WAI-ARIA design pattern." IsExpanded="True" />
    <Expander Header="Is it styled?" Content="Yes. It comes with default styles that match the other components." />
    <Expander Header="Is it animated?" Content="Yes. It opens and closes with a spring." />
  </StackPanel>
</Border>

用法

一个 Expander 就是一个手风琴条目：内容上方是一个中等字重的标题行，带一个 12px 的弱化色折角箭头（展开时朝上，禁用时消失），整体位于手风琴背景之上。把这些条目放进 StackPanel Classes="accordion" 中堆叠，它会为除最后一个之外的每个条目加一条 1px 分隔线；再套一层 Border Classes="accordion" 作为它们外围的卡片。开合时内容以自然高度在 UIKit.Spring.Control 上展开，并从底部裁剪；中途切换会保留速度。各条目独立展开，标题行没有悬停外观，也没有焦点环。条目的尺寸：xsmall、small、large（默认为 medium）。

uikit:Accordion 自身持有一组 Expander，并保证同一时刻只展开一项。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<WrapPanel ItemSpacing="16" LineSpacing="16">
  <Border Classes="accordion" Width="280">
    <StackPanel Classes="accordion">
      <Expander Classes="xsmall" Header="Extra small" Content="Yes, it is." IsExpanded="True" />
      <Expander Classes="xsmall" Header="Is it styled?" Content="Yes, by the theme." />
    </StackPanel>
  </Border>
  <Border Classes="accordion" Width="280">
    <StackPanel Classes="accordion">
      <Expander Classes="small" Header="Small" Content="Yes, it is." IsExpanded="True" />
      <Expander Classes="small" Header="Is it styled?" Content="Yes, by the theme." />
    </StackPanel>
  </Border>
  <Border Classes="accordion" Width="280">
    <StackPanel Classes="accordion">
      <Expander Header="Medium" Content="Yes, it is." IsExpanded="True" />
      <Expander Header="Is it styled?" Content="Yes, by the theme." />
    </StackPanel>
  </Border>
  <Border Classes="accordion" Width="280">
    <StackPanel Classes="accordion">
      <Expander Classes="large" Header="Large" Content="Yes, it is." IsExpanded="True" />
      <Expander Classes="large" Header="Is it styled?" Content="Yes, by the theme." />
    </StackPanel>
  </Border>
</WrapPanel>

去掉 Border 后，条目仍保留分隔线，但没有外框；最后一项为禁用状态。

无边框可交互

Live demo unavailable

<StackPanel Classes="accordion" Width="360" HorizontalAlignment="Left">
  <Expander Header="Is it accessible?" Content="Yes. It adheres to the WAI-ARIA design pattern." IsExpanded="True" />
  <Expander Header="Is it styled?" Content="Yes. It comes with default styles that match the other components." />
  <Expander Header="Is it disabled?" Content="This item cannot be opened." IsEnabled="False" />
</StackPanel>

标题可以是任意内容：这里是一个水平 StackPanel 中的图标和标签。

图标可交互

Live demo unavailable

<Border Classes="accordion" Width="360" HorizontalAlignment="Left">
  <StackPanel Classes="accordion">
    <Expander Content="Manage your account details and preferences." IsExpanded="True">
      <Expander.Header>
        <StackPanel Orientation="Horizontal" Spacing="8">
          <PathIcon Data="{StaticResource UIKit.Icon.User}" Width="16" Height="16" />
          <TextBlock Text="Account" VerticalAlignment="Center" />
        </StackPanel>
      </Expander.Header>
    </Expander>
    <Expander Content="Choose which events send you a notification.">
      <Expander.Header>
        <StackPanel Orientation="Horizontal" Spacing="8">
          <PathIcon Data="{StaticResource UIKit.Icon.Bell}" Width="16" Height="16" />
          <TextBlock Text="Notifications" VerticalAlignment="Center" />
        </StackPanel>
      </Expander.Header>
    </Expander>
    <Expander Content="Browse the files in your workspace.">
      <Expander.Header>
        <StackPanel Orientation="Horizontal" Spacing="8">
          <PathIcon Data="{StaticResource UIKit.Icon.Folder}" Width="16" Height="16" />
          <TextBlock Text="Files" VerticalAlignment="Center" />
        </StackPanel>
      </Expander.Header>
    </Expander>
  </StackPanel>
</Border>

Accordion

#用法

#示例

用法

示例