x-accordion

[sandor]

Would be very handy to have something like this. Specially if you have long control lists in a menu-tab (right or left) and you are able to expand and collapse some of the menu groups.

Inspiration:

https://getuikit.com/docs/accordion

[jarek-foksa]

The macOS skin should make it look like the accordions in Pages.app or Numbers.app. The Material skin should follow https://material.io/guidelines/components/expansion-panels.html

[sandor]

Would be best choice. In the macOS you can assign a widget on the right side (I think for the most important function for this collapsible) – would you make it like that? Or strictly separate the Header from the rest?

[jarek-foksa]

Yeah, the accordion would consist from the header area which is always visible and the main area which is shown when user clicks the header. For example:

<x-accordion>
  <!-- Accordion header (always visible) -->
  <header>
    <x-box>
      <x-label>Margin</x-label>
      <x-input value="0" style="align-self: flex-end;"></x-input>
    </x-box>
  </header>

  <!-- Accordion main area (visible only when accordion is expanded) -->
  <main>
    <x-box vertical>
      <x-label>Margin left</x-label>
      <x-input value="0"></x-input>
    </x-box>

    <x-box vertical>
      <x-label>Margin right</x-label>
      <x-input value="0"></x-input>
    </x-box>
  </main>
</x-accordion>