Stepper

由线条连接的数字或图标步骤，并高亮当前步骤。

示例可交互

Stepper — Avalonia UIKit

Live demo unavailable

<uikit:Stepper SelectedIndex="1" Width="480" HorizontalAlignment="Left">
  <uikit:StepperItem Content="Order Details" />
  <uikit:StepperItem Content="Shipping" />
  <uikit:StepperItem Content="Finish" />
</uikit:Stepper>

用法

uikit:Stepper 排布 uikit:StepperItem：每一项是一个指示器（带步骤序号的圆形，或它的 Icon），项的内容作为标签，另有连到下一步骤的线。直到 SelectedIndex 的步骤都会打勾并显示主色，已通过的步骤之后的线也会变为主色。点击某一步骤的指示器或标签会选中它（SelectedIndex 双向绑定），除非步进器处于禁用状态。Orientation="Vertical" 让步骤向下排列，标签位于指示器旁；CentersSteps="True" 让每个步骤占据相等的宽度，指示器与标签居中。

样式类	指示器、线、标签
`xsmall`	8px 无数字的圆点、1.5px、12px
`small`	18px、2px、12px
默认	24px、2px、14px
`large`	32px、3px、14px

示例

项上的 Icon 会替代其序号。

图标可交互

Live demo unavailable

<uikit:Stepper SelectedIndex="1" Width="480" HorizontalAlignment="Left">
  <uikit:StepperItem Content="Order Details" Icon="{StaticResource UIKit.Icon.Calendar}" />
  <uikit:StepperItem Content="Shipping" Icon="{StaticResource UIKit.Icon.Inbox}" />
  <uikit:StepperItem Content="Finish" Icon="{StaticResource UIKit.Icon.Info}" />
</uikit:Stepper>

四种尺寸。

尺寸可交互

Live demo unavailable

<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:Stepper Classes="xsmall" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper Classes="small" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper Classes="large" SelectedIndex="1" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
</StackPanel>

CentersSteps="True" 与 Orientation="Vertical"。

布局可交互

Live demo unavailable

<StackPanel Spacing="24" HorizontalAlignment="Left">
  <uikit:Stepper SelectedIndex="1" CentersSteps="True" Width="480">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
  <uikit:Stepper SelectedIndex="1" Orientation="Vertical" Width="240" Height="200">
    <uikit:StepperItem Content="Order Details" />
    <uikit:StepperItem Content="Shipping" />
    <uikit:StepperItem Content="Finish" />
  </uikit:Stepper>
</StackPanel>

Stepper

#用法

#示例

用法

示例