|
@@ -1,7 +1,9 @@
|
|
|
-import React from 'react';
|
|
|
+import React, { useState } from 'react';
|
|
|
|
|
|
import Banner from '../index';
|
|
|
import Button from '@douyinfe/semi-ui/button/index';
|
|
|
+import { Layout } from '@douyinfe/semi-ui';
|
|
|
+
|
|
|
|
|
|
export default {
|
|
|
title: 'Banner',
|
|
@@ -43,3 +45,62 @@ export const InContainerAndBordered = () => (
|
|
|
<Button onClick={e => e.stopPropagation()}>test</Button>
|
|
|
</Banner>
|
|
|
);
|
|
|
+
|
|
|
+export const ShowAndHideBanner = () => {
|
|
|
+ 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>
|
|
|
+ <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>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export const MultiTypeBanner = () => (
|
|
|
+ <>
|
|
|
+ <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."
|
|
|
+ />
|
|
|
+ </>
|
|
|
+);
|