packages/rc-components/rc-page/stories/basic.tsx (113 lines of code) (raw):
import React, { useState } from 'react'
import { Button, Input } from '@alicloud/console-components'
// eslint-disable-next-line import/no-unresolved
import Page from '@alicloud/console-components-page'
import { FakeBrowserWithWrapper as FakeBrowser } from '@alicloud/console-components-fake-browser'
const { Breadcrumb } = Page
const breadcrumb = (
<Breadcrumb>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>Blog</Breadcrumb.Item>
<Breadcrumb.Item>Name It, and They Will Come</Breadcrumb.Item>
</Breadcrumb>
)
const Example: React.FC<{}> = () => {
const [headerAlignLeft, setHeaderAlignLeft] = useState(false)
const [topBarAlignLeft, setTopBarAlignLeft] = useState(false)
const [title, setTitle] = useState('Name It, and They Will Come')
const [subTitle, setSubTitle] = useState('March 25, 2019')
return (
<FakeBrowser>
<Page>
<Page.Header
title={title}
subTitle={subTitle}
breadcrumb={breadcrumb}
breadcrumbExtra={
<>
<a href="#a" style={{ verticalAlign: 'middle' }}>
like
</a>
<Button
size="small"
style={{ marginLeft: 8 }}
onClick={() => {
setTopBarAlignLeft(!topBarAlignLeft)
}}
>
toggle align
</Button>
</>
}
breadcrumbExtraAlign={topBarAlignLeft ? 'left' : 'right'}
hasBackArrow
onBackArrowClick={() => {
window.history.back()
}}
childrenAlign={headerAlignLeft ? 'left' : 'right'}
>
<a href="#a">Need some help</a>
<Button
style={{ marginLeft: 8 }}
onClick={() => {
setHeaderAlignLeft(!headerAlignLeft)
}}
>
toggle align
</Button>
</Page.Header>
<Page.Content>
<div>
change Title:
<Input
value={title}
onChange={v => {
setTitle(v)
}}
/>
</div>
<div>
change subTitle:
<Input
value={subTitle}
onChange={v => {
setSubTitle(v)
}}
/>
</div>
<p>You’ve discovered something new.</p>
<p>
You haven’t seen solutions <strong>quite like this</strong> before.
You try to keep your ego in check and be skeptical. But the
butterflies in your stomach won’t listen.
</p>
<p>
You don’t want to get carried away, but deep down you already know
it:
</p>
<p>
<strong>You’re onto something.</strong>
</p>
<p>
This idea turns into a project. The first commit is just 500 lines.
But in a few days, you build it up just enough to start using it in
real code. A few like-minded people join you in improving it. You
learn something new about it every day.
</p>
<p>You’re still skeptical but you can’t pretend to ignore it:</p>
<p>
<strong>This idea has wings.</strong>
</p>
<p>
You encounter many obstacles. They require you to make changes.
Peculiarly, these changes only make the original idea stronger.
Usually, you feel like you’re creating something. But this time, it
feels like you are discovering something as if it already existed.
You’ve chosen a principle and followed it to the conclusion.
</p>
<p>By now, you’re convinced:</p>
<p>
<strong>This idea deserves to be heard.</strong>
</p>
</Page.Content>
</Page>
</FakeBrowser>
)
}
export default Example