Action Sheet React 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

onBackdropClickfunction(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.jsx
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 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 className="flex space-x-4">
<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)}
colors={{ text: 'text-red-500' }}
>
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)}
colors={{ text: 'text-red-500' }}
>
Cancel
</ActionsButton>
</ActionsGroup>
</Actions>
</Page>
);
}
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.