Action Sheet Svelte Component

Action Sheet Components
Actions Props
ActionsButton Props
ActionsLabel Props
ActionsGroup Props
Examples

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

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

ActionsButton Props

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 `href` attribute, when specified will also be rendered as `<a>` element
touchRipple	boolean	true	Enables touch ripple effect in Material theme
onClick	function(e)		`click` event handler

ActionsLabel Props

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)

ActionsGroup Props

Name	Type	Default	Description
hairlines	boolean	true	Renders group outer hairlines (borders) (in Material theme only)

Examples

ActionSheet.svelte

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

  <Actions
    opened={actionsOneOpened}
    onBackdropClick={() => (actionsOneOpened = false)}
  >
    <ActionsGroup>
      <ActionsLabel>Do something</ActionsLabel>
      <ActionsButton onClick={() => (actionsOneOpened = false)} bold>
        Button 1
      </ActionsButton>
      <ActionsButton onClick={() => (actionsOneOpened = false)}>
        Button 2
      </ActionsButton>
      <ActionsButton
        onClick={() => (actionsOneOpened = false)}
        colors={{ text: 'text-red-500' }}
      >
        Cancel
      </ActionsButton>
    </ActionsGroup>
  </Actions>

  <Actions
    opened={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>
      <ActionsButton
        onClick={() => (actionsTwoOpened = false)}
        colors={{ text: 'text-red-500' }}
      >
        Cancel
      </ActionsButton>
    </ActionsGroup>
  </Actions>
</Page>