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

<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>

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>
  );
}

PreviousApp NextBadge

Last updated 7 months ago

<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>

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> ); }