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
boldbooleanfalse

Makes button text bold

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-neutral-200 dark:active:bg-neutral-700'

Clicked fill button bg color

colors.bgstring'bg-white dark:bg-neutral-800'

Full button bg color

colors.textstring'text-primary'

Button text color

componentstring'button'

Component's HTML Element

fontSizeIosstring'text-xl'

Button text font size in iOS theme

fontSizeMaterialstring'text-base'

Button text font size in Material theme

hairlinesbooleantrue

Renders button outer hairlines (borders)

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.activeBgstring'active:bg-neutral-200 dark:active:bg-neutral-700'

Clicked fill button bg color

colors.bgstring'bg-white dark:bg-neutral-800'

Full button bg color

colors.textstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'

Button text color

componentstring'div'

Component's HTML Element

fontSizeIosstring'text-sm'

Button text font size in iOS theme

fontSizeMaterialstring'text-base'

Button text font size in Material theme

hairlinesbooleantrue

Renders button outer hairlines (borders)

ActionsGroup Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

hairlinesbooleantrue

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

Examples

ActionSheet.vue
<template>
<k-page>
<k-navbar title="ActionSheet" />
<k-block strong 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 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
:colors="{ text: 'text-red-500' }"
@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
:colors="{ text: 'text-red-500' }"
@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.
2021 © Konsta UI by nolimits4web.