CompactInformationPanel

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import React from 'react'
import styled from 'styled-components'
import { CompactInformationPanel } from '.'
export default {
title: 'Data Display(データ表示)/CompactInformationPanel',
component: CompactInformationPanel,
}
export const Default: Story = () => (
<CompactInformationPanel>
<Message>
CompactInformationPanel
は画面内の操作を進めるにあたってユーザーに伝えるべきメッセージを表示する領域です。
<br />
InformationPanel とは異なり、パネルを閉じることはできません。
</Message>
</CompactInformationPanel>
)
export const Type: Story = () => (
<Wrapper>
<CompactInformationPanel type="info">
<Message>これは [type=info] の CompactInformationPanel です。</Message>
<Message>type を省略した場合も [type=info] になります。</Message>
</CompactInformationPanel>
<CompactInformationPanel type="success">
<Message>これは [type=success] の CompactInformationPanel です。</Message>
</CompactInformationPanel>
<CompactInformationPanel type="warning">
<Message>これは [type=warning] の CompactInformationPanel です。</Message>
</CompactInformationPanel>
<CompactInformationPanel type="error">
<Message>これは [type=error] の CompactInformationPanel です。</Message>
</CompactInformationPanel>
</Wrapper>
)
const Wrapper = styled.div`
> * + * {
margin-top: 1rem;
}
`
const Message = styled.p`
margin-top: 0;
margin-bottom: 0;
`
処理中

Props

NameRequiredTypeDescription
type-"error", "warning", "info", "success"表示する情報の種類
className-stringコンポーネントに適用するクラス名
childrentruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal表示する情報の内容