Action Sheet

Actions Props

Name	Type	Default	Description
backdrop	boolean	true	Enables Action Sheet backdrop (dark semi transparent layer behind)
component	string	'div'	Component's HTML Element
opened	boolean	false	Allows to open/close Action Sheet and set its initial state
onBackdropClick	function(e)		Click handler on backdrop element

ActionsButton Props

Name	Type	Default	Description
bold	boolean	undefined	Makes button text bold. Overwrites boldIos and boldMaterial
boldIos	boolean	false	Makes button text bold in iOS theme
boldMaterial	boolean	false	Makes button text bold in Material theme
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-neutral-200 dark:active:bg-neutral-700'
colors.activeBgMaterial	string	''
colors.bgIos	string	'bg-white dark:bg-neutral-800'
colors.bgMaterial	string	'bg-md-light-surface-3 dark:bg-md-dark-surface-3'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	string	'button'	Component's HTML Element
dividers	boolean	undefined	Renders button outer hairlines (borders). If not specified, will be enabled for iOS theme
fontSizeIos	string	'text-xl'	Button text font size in iOS theme
fontSizeMaterial	string	'text-base'	Button text font size in Material theme
href	string		Link's href attribute, when specified will also be rendered as <a> element
touchRipple	boolean	true	Enables touch ripple effect in Material theme

ActionsLabel Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-white dark:bg-neutral-800'
colors.bgMaterial	string	'bg-md-light-surface-3 dark:bg-md-dark-surface-3'
colors.textIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'div'	Component's HTML Element
dividers	boolean	undefined	Renders button outer hairlines (borders). If not specified, will be enabled in iOS theme
fontSizeIos	string	'text-sm'	Button text font size in iOS theme
fontSizeMaterial	string	'text-sm'	Button text font size in Material theme

ActionsGroup Props

Name	Type	Default	Description
component	string	'div'	Component's HTML Element
dividers	boolean	true	Renders group outer hairlines (borders). (in Material theme only)

Examples

Vue

<template>
  <i-page>
    <i-navbar title="ActionSheet" />

    <i-block strong inset class="space-y-4">
      <p>
        Action Sheet is a slide-up pane for presenting the user with a set of
        alternatives for how to proceed with a given task.
      </p>
    </i-block>
    <i-block-title>Open Action Sheet</i-block-title>
    <i-block strong inset class="flex space-x-4 rtl:space-x-reverse">
      <i-button @click="() => (actionsOneOpened = true)">One group</i-button>
      <i-button @click="() => (actionsTwoOpened = true)">Two groups</i-button>
    </i-block>

    <i-actions
      :opened="actionsOneOpened"
      @backdropclick="() => (actionsOneOpened = false)"
    >
      <i-actions-group>
        <i-actions-label>Do something</i-actions-label>
        <i-actions-button bold @click="() => (actionsOneOpened = false)">
          Button 1
        </i-actions-button>
        <i-actions-button @click="() => (actionsOneOpened = false)">
          Button 2
        </i-actions-button>
        <i-actions-button @click="() => (actionsOneOpened = false)">
          Cancel
        </i-actions-button>
      </i-actions-group>
    </i-actions>

    <i-actions
      :opened="actionsTwoOpened"
      @backdropclick="() => (actionsTwoOpened = false)"
    >
      <i-actions-group>
        <i-actions-label>Do something</i-actions-label>
        <i-actions-button bold @click="() => (actionsTwoOpened = false)">
          Button 1
        </i-actions-button>
        <i-actions-button @click="() => (actionsTwoOpened = false)">
          Button 2
        </i-actions-button>
      </i-actions-group>
      <i-actions-group>
        <i-actions-button @click="() => (actionsTwoOpened = false)">
          Cancel
        </i-actions-button>
      </i-actions-group>
    </i-actions>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlockTitle,
    iBlock,
    iButton,
    iActions,
    iActionsButton,
    iActionsLabel,
    iActionsGroup,
  } from 'ina-ui/vue';
  import { ref } from 'vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlockTitle,
      iBlock,
      iButton,
      iActions,
      iActionsButton,
      iActionsLabel,
      iActionsGroup,
    },
    setup() {
      const actionsOneOpened = ref(false);
      const actionsTwoOpened = ref(false);

      return {
        actionsOneOpened,
        actionsTwoOpened,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
  Actions,
  ActionsGroup,
  ActionsLabel,
  ActionsButton,
} from 'konsta/react';

export default function ActionSheetPage() {
  const isPreview = document.location.href.includes('examplePreview');

  const [actionsOneOpened, setActionsOneOpened] = useState(false);
  const [actionsTwoOpened, setActionsTwoOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Action Sheet"
        />
      <Block strong inset className="space-y-4">
        <p>
          Action Sheet is a slide-up pane for presenting the user with a set of
          alternatives for how to proceed with a given task.
        </p>
      </Block>
      <BlockTitle>Open Action Sheet</BlockTitle>
      <Block strong inset className="flex space-x-4 rtl:space-x-reverse">
        <Button onClick={() => setActionsOneOpened(true)}>One group</Button>
        <Button onClick={() => setActionsTwoOpened(true)}>Two groups</Button>
      </Block>

      <Actions
        opened={actionsOneOpened}
        onBackdropClick={() => setActionsOneOpened(false)}
      >
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton onClick={() => setActionsOneOpened(false)} bold>
            Button 1
          </ActionsButton>
          <ActionsButton onClick={() => setActionsOneOpened(false)}>
            Button 2
          </ActionsButton>
          <ActionsButton onClick={() => setActionsOneOpened(false)}>
            Cancel
          </ActionsButton>
        </ActionsGroup>
      </Actions>

      <Actions
        opened={actionsTwoOpened}
        onBackdropClick={() => setActionsTwoOpened(false)}
      >
        <ActionsGroup>
          <ActionsLabel>Do something</ActionsLabel>
          <ActionsButton onClick={() => setActionsTwoOpened(false)} bold>
            Button 1
          </ActionsButton>
          <ActionsButton onClick={() => setActionsTwoOpened(false)}>
            Button 2
          </ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton onClick={() => setActionsTwoOpened(false)}>
            Cancel
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </Page>
  );
}