BottomFixedArea

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import { Button } from '../Button'
import { FaTrashIcon } from '../Icon'
import { BottomFixedArea } from './BottomFixedArea'
export default {
title: 'Navigation(ナビゲーション)/BottomFixedArea',
component: BottomFixedArea,
}
export const _BottomFixedArea: Story = () => {
return (
<BottomFixedArea
description="This is description."
primaryButton={<Button variant="primary">Primary Button</Button>}
secondaryButton={<Button>Secondary Button</Button>}
tertiaryLinks={[
{ text: 'Tertiary_1', icon: FaTrashIcon, onClick: action('click_1') },
{ text: 'Tertiary_2', icon: FaTrashIcon, onClick: action('click_2') },
{ text: 'Tertiary_3', icon: FaTrashIcon, onClick: action('click_3') },
{
text: <span>Tertiary_4</span>,
icon: FaTrashIcon,
onClick: action('click_4'),
},
]}
/>
)
}
_BottomFixedArea.storyName = 'BottomFixedArea'
処理中

Props

NameRequiredTypeDescription
description-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalこの領域の説明
primaryButton-FunctionComponentElement<BaseProps & ElementProps & RefAttributes<HTMLButtonElement>>, FunctionComponentElement<BaseProps & ElementProps & RefAttributes<HTMLAnchorElement>>, FunctionComponentElement<BaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>>, FunctionComponentElement<BaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps>>表示する `Button` または `AnchorButton` (`variant="primary"` である必要がある)
secondaryButton-FunctionComponentElement<BaseProps & ElementProps & RefAttributes<HTMLButtonElement>>, FunctionComponentElement<BaseProps & ElementProps & RefAttributes<HTMLAnchorElement>>, FunctionComponentElement<BaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>>, FunctionComponentElement<BaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps>>表示する `Button` または `AnchorButton` (`variant="secondary"` である必要がある)
tertiaryLinks-(Props & ElementProps)[]表示する tertialy link のプロパティの配列
zIndex-numberコンポーネントに適用する z-index 値
className-stringコンポーネントに適用するクラス名