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.
There are following components included:
Actions
ActionsButton
ActionsLabel
ActionsGroup
Name | Type | Default | Description |
---|---|---|---|
backdrop | boolean | true | Enables Action Sheet backdrop (dark semi transparent layer behind) |
opened | boolean | false | Allows to open/close Action Sheet and set its initial state |
onBackdropClick | function(e) | Click handler on backdrop element |
Name | Type | Default | Description |
---|---|---|---|
bold | boolean | false | Makes button text bold |
colors | object | Object with Tailwind CSS colors classes | |
colors.activeBg | string | 'active:bg-neutral-200 dark:active:bg-neutral-700' | Clicked fill button bg color |
colors.bg | string | 'bg-white dark:bg-neutral-800' | Full button bg color |
colors.text | string | 'text-primary' | Button text color |
fontSizeIos | string | 'text-xl' | Button text font size in iOS theme |
fontSizeMaterial | string | 'text-base' | Button text font size in Material theme |
hairlines | boolean | true | Renders button outer hairlines (borders) |
href | string | Link's | |
touchRipple | boolean | true | Enables touch ripple effect in Material theme |
onClick | function(e) |
|
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.activeBg | string | 'active:bg-neutral-200 dark:active:bg-neutral-700' | Clicked fill button bg color |
colors.bg | string | 'bg-white dark:bg-neutral-800' | Full button bg color |
colors.text | string | 'text-black text-opacity-55 dark:text-white dark:text-opacity-55' | Button text color |
fontSizeIos | string | 'text-sm' | Button text font size in iOS theme |
fontSizeMaterial | string | 'text-base' | Button text font size in Material theme |
hairlines | boolean | true | Renders button outer hairlines (borders) |
Name | Type | Default | Description |
---|---|---|---|
hairlines | boolean | true | Renders group outer hairlines (borders) (in Material theme only) |
<script>import {Page,Navbar,NavbarBackLink,BlockTitle,Block,Button,Actions,ActionsButton,ActionsLabel,ActionsGroup,} from 'konsta/svelte';let actionsOneOpened = false;let actionsTwoOpened = false;</script><Page><Navbar title="Action Sheet" /><Block strong class="space-y-4"><p>Action Sheet is a slide-up pane for presenting the user with a set ofalternatives for how to proceed with a given task.</p></Block><BlockTitle>Open Action Sheet</BlockTitle><Block strong class="flex space-x-4"><Button onClick={() => (actionsOneOpened = true)}>One group</Button><Button onClick={() => (actionsTwoOpened = true)}>Two groups</Button></Block><Actionsopened={actionsOneOpened}onBackdropClick={() => (actionsOneOpened = false)}><ActionsGroup><ActionsLabel>Do something</ActionsLabel><ActionsButton onClick={() => (actionsOneOpened = false)} bold>Button 1</ActionsButton><ActionsButton onClick={() => (actionsOneOpened = false)}>Button 2</ActionsButton><ActionsButtononClick={() => (actionsOneOpened = false)}colors={{ text: 'text-red-500' }}>Cancel</ActionsButton></ActionsGroup></Actions><Actionsopened={actionsTwoOpened}onBackdropClick={() => (actionsTwoOpened = false)}><ActionsGroup><ActionsLabel>Do something</ActionsLabel><ActionsButton onClick={() => (actionsTwoOpened = false)} bold>Button 1</ActionsButton><ActionsButton onClick={() => (actionsTwoOpened = false)}>Button 2</ActionsButton></ActionsGroup><ActionsGroup><ActionsButtononClick={() => (actionsTwoOpened = false)}colors={{ text: 'text-red-500' }}>Cancel</ActionsButton></ActionsGroup></Actions></Page>