Light Dark System

Button Menu

<zn-button-menu> | ZnButtonMenu
Since 1.0 experimental

Automatically hides buttons in a menu when the screen is too small.

Cancel Something sdf Another One 

<zn-button-menu limit="4">
  <zn-button id="trigger-something" color="error" primary>Cancel</zn-button>
  <zn-confirm type="error"
              trigger="trigger-something"
              caption="Cancel Action"
              content="Are you sure you want to cancel this action">
  </zn-confirm>

  <zn-button primary color="error" icon="house">Something sdf</zn-button>
  <zn-button id="trigger-anotherone" color="warning"  icon="house">Another One</zn-button>
  <zn-confirm type="error"
              trigger="trigger-anotherone"
              caption="Another Action"
              content="Are you sure you?">
  </zn-confirm>
</zn-button-menu>

Examples

Button Limit

You can limit the number of buttons that are shown in the menu. The rest will be hidden in a dropdown.

Something sdf sd fdf fsdsfdf fd fdsfdf d dfsf 

<zn-button-menu limit="2">
  <zn-button primary>Something sdf</zn-button>
  <zn-button >sd</zn-button>
  <zn-button secondary>fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button >fd</zn-button>
  <zn-button category="edit">fdsfdf</zn-button>
  <zn-button primary category="edit">d</zn-button>
  <zn-button secondary category="view">dfsf</zn-button>
</zn-button-menu>

Button Max (1)

Primary Secondary Default Default 2 

<zn-button-menu max-level="1">
  <zn-button primary>Primary</zn-button>
  <zn-button secondary>Secondary</zn-button>
  <zn-button>Default</zn-button>
  <zn-button>Default 2</zn-button>
</zn-button-menu>

Button Max (2)

Primary Secondary Default Default 2 

<zn-button-menu max-level="2">
  <zn-button primary>Primary</zn-button>
  <zn-button secondary>Secondary</zn-button>
  <zn-button>Default</zn-button>
  <zn-button>Default 2</zn-button>
</zn-button-menu>

Button Max (3)

Primary Secondary Default Default 2 

<zn-button-menu max-level="3">
  <zn-button primary>Primary</zn-button>
  <zn-button secondary>Secondary</zn-button>
  <zn-button>Default</zn-button>
  <zn-button>Default 2</zn-button>
</zn-button-menu>

Button Max (2) - No Primary / Secondary

Default Default 2 

<zn-button-menu max-level="2">
  <zn-button>Default</zn-button>
  <zn-button>Default 2</zn-button>
</zn-button-menu>

Max Width

Below is an example of a button menu with a maximum width of 200px. The menu will not exceed this width, even if the buttons inside it are wider.

Something sdf sd fdf fsdsfdf fd fdsfdf d dfsf 

<zn-button-menu max-width="300">
  <zn-button primary>Something sdf</zn-button>
  <zn-button >sd</zn-button>
  <zn-button secondary>fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button >fd</zn-button>
  <zn-button category="edit">fdsfdf</zn-button>
  <zn-button primary category="edit">d</zn-button>
  <zn-button secondary category="view">dfsf</zn-button>
</zn-button-menu>

No Gap

Something sdf sd fdf fsdsfdf fd fdsfdf d dfsf 

<zn-button-menu no-gap max-width="200">
  <zn-button primary>Something sdf</zn-button>
  <zn-button >sd</zn-button>
  <zn-button secondary>fdf</zn-button>
  <zn-button secondary>fsdsfdf</zn-button>
  <zn-button >fd</zn-button>
  <zn-button category="edit">fdsfdf</zn-button>
  <zn-button primary category="edit">d</zn-button>
  <zn-button secondary category="view">dfsf</zn-button>
</zn-button-menu>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/button-menu/button-menu.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.0/dist/components/button-menu/button-menu.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/button-menu/button-menu.js';

Slots

Name Description
(default) The default slot.

Learn more about using slots.