Accordion
一次只保持一项展开的手风琴,即 uikit:Accordion。
示例可交互
Live demo unavailable
<uikit: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 animated?" Content="Yes. Opening one item closes the others, each on a spring." />
</uikit:Accordion>用法
uikit:Accordion 自身容纳各个 Expander,外观与 Accordion 一致:它绘制相同的分隔符与卡片(IsBordered="False" 会去掉卡片),并且一次只保持一项展开。无论是点击还是在代码中展开某项,其他项都会以弹簧动画关闭;Multiple="True" 允许各项独立展开。点击标题会触发 ToggleClick,其 OpenIndices 是点击后处于展开状态的各项。其尺寸类(xsmall、small、large)会应用到每一项,IsEnabled="False" 会禁用它们。
示例
Multiple="True" 与 IsBordered="False",使用 small。
Live demo unavailable
<uikit:Accordion Classes="small" Multiple="True" IsBordered="False" Width="360" HorizontalAlignment="Left">
<Expander Header="Shipping" Content="Free over $50, two to four days." IsExpanded="True" />
<Expander Header="Returns" Content="Within 30 days, in the original box." IsExpanded="True" />
<Expander Header="Warranty" Content="One year on parts and labour." />
</uikit:Accordion>