import React, { useState } from 'react'; import { Banner, Layout, Button } from '@douyinfe/semi-ui'; () => { const [visible, setVisible] = useState(false); const changeVisible = () => { setVisible(!visible); }; const { Header, Footer, Content } = Layout; const banner = ( <Banner onClose={changeVisible} description="A pre-released version is available" /> ); return ( <> <Layout className='components-layout-demo banner-basic'> <Header>Header</Header> {visible? banner : null} <Content>Content</Content> <Footer>Footer</Footer> </Layout> <Button onClick={changeVisible} style={{ display: 'block', width: '120px', margin: '0 auto' }} > { visible ? 'Hide Banner' : 'Show Banner' } </Button> </> ); };

import React from 'react'; import { Banner } from '@douyinfe/semi-ui'; () => ( <> <Banner type="info" description="A pre-released version is available." /> <br/> <Banner type="warning" description="This version of the document is going to expire after 4 days." /> <br/> <Banner type="danger" description="This document was deprecated since Jan 1, 2019." /> <br/> <Banner type="success" description="You are viewing the latest version of this document." /> </> );

import React from 'react'; import { Banner, Typography } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; return ( <div style={{ width: 640 }} className="components-banner-demo"> <Banner fullMode={false} type="info" bordered icon={null} closeIcon={null} title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>} description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>} /><br/> <Banner fullMode={false} type="warning" bordered icon={null} closeIcon={null} title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>} description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>} /><br/> <Banner fullMode={false} type="danger" bordered icon={null} closeIcon={null} title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>} description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>} /><br/> <Banner fullMode={false} type="success" bordered icon={null} closeIcon={null} title={<div style={{ fontWeight: 600, fontSize: '14px', lineHeight: '20px' }}>{`Don't know AppKey?`}</div>} description={<div>You can contact the corresponding R & D students to confirm whether you have applied for an application on <Text link={{ href: 'https://semi.design/' }}>the application cloud platform</Text> , and fill in the corresponding information.</div>} /> </div> ); }

import React from 'react'; import { Banner } from '@douyinfe/semi-ui'; () => ( <div style={{ width: 500, padding: 20, border: '1px solid var(--semi-color-border)' }}> <Banner fullMode={false} title="Title" type="warning" bordered description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat" > <div className="semi-modal-footer"> <button className="semi-button semi-button-tertiary semi-button-light" type="button">No, thanks.</button> <button className="semi-button semi-button-warning" type="button">Sounds great!</button> </div> </Banner> <br/> </div> );