Hakumi :: Rails ViewComponents

Basic

Cascade selection box for selecting province/city/district.

Please select

Code

<%
  options = [
    {
      value: 'spain',
      label: 'Spain',
      children: [
        {
          value: 'madrid',
          label: 'Madrid',
          children: [
            {
              value: 'salamanca',
              label: 'Salamanca',
            },
          ],
        },
      ],
    },
    {
      value: 'france',
      label: 'France',
      children: [
        {
          value: 'paris',
          label: 'Paris',
          children: [
            {
              value: 'montmartre',
              label: 'Montmartre',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render Hakumi::Cascader::Component.new(options: options, placeholder: "Please select") %>

Default Value

Specifies default value by an array.

Please select

Code

<%
  options = [
    {
      value: 'spain',
      label: 'Spain',
      children: [
        {
          value: 'madrid',
          label: 'Madrid',
          children: [
            {
              value: 'salamanca',
              label: 'Salamanca',
            },
          ],
        },
      ],
    },
    {
      value: 'france',
      label: 'France',
      children: [
        {
          value: 'paris',
          label: 'Paris',
          children: [
            {
              value: 'montmartre',
              label: 'Montmartre',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render Hakumi::Cascader::Component.new(
  options: options,
  value: ['spain', 'madrid', 'salamanca'],
  placeholder: "Please select"
) %>

Hover trigger

Hover to expand sub menu, click to select option.

Hover to select

Code

<%
  options = [
    {
      value: 'portugal',
      label: 'Portugal',
      children: [
        {
          value: 'lisbon',
          label: 'Lisbon',
          children: [
            {
              value: 'alfama',
              label: 'Alfama',
            },
          ],
        },
      ],
    },
    {
      value: 'netherlands',
      label: 'Netherlands',
      children: [
        {
          value: 'amsterdam',
          label: 'Amsterdam',
          children: [
            {
              value: 'jordaan',
              label: 'Jordaan',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render Hakumi::Cascader::Component.new(
  options: options,
  expand_trigger: :hover,
  placeholder: "Hover to select"
) %>

Change on select

Allows the selection of only parent options.

Select any level

Code

<%
  options = [
    {
      value: 'italy',
      label: 'Italy',
      children: [
        {
          value: 'tuscany',
          label: 'Tuscany',
          children: [
            {
              value: 'florence',
              label: 'Florence',
            },
          ],
        },
      ],
    },
    {
      value: 'germany',
      label: 'Germany',
      children: [
        {
          value: 'bavaria',
          label: 'Bavaria',
          children: [
            {
              value: 'munich',
              label: 'Munich',
            },
          ],
        },
      ],
    },
  ]
%>

<%= render Hakumi::Cascader::Component.new(
  options: options,
  change_on_select: true,
  placeholder: "Select any level"
) %>

Cascader API

Prop	Type	Default	Description
`options`	`Array`	`[]`	The data options of cascade
`value`	`Array`	`[]`	The selected value
`placeholder`	`String`	`'Select'`	Input placeholder
`size`	`String`	`middle`	The input size
`disabled`	`Boolean`	`false`	Whether disabled select
`allow_clear`	`Boolean`	`true`	Whether allow clear
`expand_trigger`	`String`	`'click'`	'click' or 'hover'
`change_on_select`	`Boolean`	`false`	Select parent allowed

JavaScript API (element.hakumiCascader)

Prop	Type	Default	Description
`getValue()`	`Function`	`-`	Returns the current value path array.
`setValue(path)`	`Function`	`-`	Programmatically set the selected path (e.g., ['spain','madrid','salamanca']).
`getLabel()`	`Function`	`-`	Returns the current label path joined by ' / '.
`open()`	`Function`	`-`	Opens the cascader menus.
`close()`	`Function`	`-`	Closes the cascader menus.
`clear()`	`Function`	`-`	Clears the selection.
`isOpen()`	`Function`	`-`	Returns true if the dropdown is open.