Action Sheet Vue Component

Action Sheet is a slide-up pane for presenting the user with a set of alternatives for how to proceed with a given task.

You can also use action sheets to prompt the user to confirm a potentially dangerous action.

The action sheet contains an optional title and one or more buttons, each of which corresponds to an action to take.

Action Sheet Components

There are following components included:

  • Actions
  • ActionsButton
  • ActionsLabel
  • ActionsGroup

Actions Props

NameTypeDefaultDescription
backdropbooleantrue

Enables Action Sheet backdrop (dark semi transparent layer behind)

componentstring'div'

Component's HTML Element

openedbooleanfalse

Allows to open/close Action Sheet and set its initial state

Actions Events

NameTypeDescription
backdropclickfunction(e)

Click handler on backdrop element

ActionsButton Props

NameTypeDefaultDescription
boldbooleanundefined

Makes button text bold. Overwrites boldIos and boldMaterial

boldIosbooleanfalse

Makes button text bold in iOS theme

boldMaterialbooleanfalse

Makes button text bold in Material theme

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-neutral-200 dark:active:bg-neutral-700'
colors.activeBgMaterialstring''
colors.bgIosstring'bg-white dark:bg-neutral-800'
colors.bgMaterialstring'bg-md-light-surface-3 dark:bg-md-dark-surface-3'
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
componentstring'button'

Component's HTML Element

dividersbooleanundefined

Renders button outer hairlines (borders). If not specified, will be enabled for iOS theme

fontSizeIosstring'text-xl'

Button text font size in iOS theme

fontSizeMaterialstring'text-base'

Button text font size in Material theme

hrefstring

Link's href attribute, when specified will also be rendered as <a> element

touchRipplebooleantrue

Enables touch ripple effect in Material theme

ActionsLabel Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-neutral-800'
colors.bgMaterialstring'bg-md-light-surface-3 dark:bg-md-dark-surface-3'
colors.textIosstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'div'

Component's HTML Element

dividersbooleanundefined

Renders button outer hairlines (borders). If not specified, will be enabled in iOS theme

fontSizeIosstring'text-sm'

Button text font size in iOS theme

fontSizeMaterialstring'text-sm'

Button text font size in Material theme

ActionsGroup Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

dividersbooleantrue

Renders group outer hairlines (borders). (in Material theme only)

Examples

ActionSheet.vue
<template>
<k-page>
<k-navbar title="ActionSheet" />
<k-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>
</k-block>
<k-block-title>Open Action Sheet</k-block-title>
<k-block strong inset class="flex space-x-4">
<k-button @click="() => (actionsOneOpened = true)">One group</k-button>
<k-button @click="() => (actionsTwoOpened = true)">Two groups</k-button>
</k-block>
<k-actions
:opened="actionsOneOpened"
@backdropclick="() => (actionsOneOpened = false)"
>
<k-actions-group>
<k-actions-label>Do something</k-actions-label>
<k-actions-button bold @click="() => (actionsOneOpened = false)">
Button 1
</k-actions-button>
<k-actions-button @click="() => (actionsOneOpened = false)">
Button 2
</k-actions-button>
<k-actions-button @click="() => (actionsOneOpened = false)">
Cancel
</k-actions-button>
</k-actions-group>
</k-actions>
<k-actions
:opened="actionsTwoOpened"
@backdropclick="() => (actionsTwoOpened = false)"
>
<k-actions-group>
<k-actions-label>Do something</k-actions-label>
<k-actions-button bold @click="() => (actionsTwoOpened = false)">
Button 1
</k-actions-button>
<k-actions-button @click="() => (actionsTwoOpened = false)">
Button 2
</k-actions-button>
</k-actions-group>
<k-actions-group>
<k-actions-button @click="() => (actionsTwoOpened = false)">
Cancel
</k-actions-button>
</k-actions-group>
</k-actions>
</k-page>
</template>
<script>
import {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kBlock,
kButton,
kActions,
kActionsButton,
kActionsLabel,
kActionsGroup,
} from 'konsta/vue';
import { ref } from 'vue';
export default {
components: {
kPage,
kNavbar,
kNavbarBackLink,
kBlockTitle,
kBlock,
kButton,
kActions,
kActionsButton,
kActionsLabel,
kActionsGroup,
},
setup() {
const actionsOneOpened = ref(false);
const actionsTwoOpened = ref(false);
return {
actionsOneOpened,
actionsTwoOpened,
};
},
};
</script>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.