Skip to content

Commit dd03a64

Browse files
youlunayouluna
authored
feat(Shell): add Shell (#1175)
feat(Shell): add Shell
1 parent b44a05e commit dd03a64

36 files changed

+3874
-24
lines changed

‎.fusion

+1
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
"range": "lib/range/scss/variable.scss",
9696
"rating": "lib/rating/scss/variable.scss",
9797
"search": "lib/search/scss/variable.scss",
98+
"shell": "lib/shell/scss/variable.scss",
9899
"slider": "lib/slider/scss/variable.scss",
99100
"split-button": "lib/split-button/scss/variable.scss",
100101
"step": "lib/step/scss/variable.scss",

‎docs/shell/adaptor/index.jsx

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
import React from 'react';
2+
import { Types } from '@alifd/adaptor-helper';
3+
import { Shell, Icon } from '@alifd/next';
4+
5+
export default {
6+
name: 'Shell',
7+
shape: ['normal'],
8+
editor: (shape) => {
9+
return {
10+
props: [{
11+
name: 'level',
12+
type: Types.enum,
13+
default: 'light',
14+
options: {
15+
normal: ['light', 'dark', 'brand'],
16+
}[shape],
17+
},{
18+
name: 'device',
19+
label: 'Device',
20+
type: Types.enum,
21+
options: ['desktop', 'tablet', 'phone'],
22+
default: 'desktop',
23+
},{
24+
name: 'branding',
25+
label: 'Branding',
26+
type: Types.bool,
27+
default: true,
28+
},{
29+
name: 'actions',
30+
label: 'Actions',
31+
type: Types.bool,
32+
default: true,
33+
},{
34+
name: 'navigation',
35+
label: 'Navigation',
36+
type: Types.enum,
37+
options: ['ver', 'hoz', false],
38+
default: 'ver',
39+
},{
40+
name: 'localNav',
41+
label: 'LocalNav',
42+
type: Types.bool,
43+
default: true,
44+
},{
45+
name: 'appbar',
46+
label: 'Appbar',
47+
type: Types.bool,
48+
default: true,
49+
},{
50+
name: 'footer',
51+
label: 'Footer',
52+
type: Types.bool,
53+
default: true,
54+
},{
55+
name: 'tooldock',
56+
label: 'Tooldock',
57+
type: Types.bool,
58+
default: true,
59+
},{
60+
name: 'ancillary',
61+
label: 'Ancillary',
62+
type: Types.bool,
63+
default: true,
64+
}]
65+
};
66+
},
67+
adaptor: ({ level, device, branding, actions, localNav, appbar, footer, tooldock, ancillary, navigation, ...others }) => {
68+
let logoStyle = {},
69+
shellStyle = {};
70+
71+
switch(level) {
72+
case 'light':
73+
logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'};
74+
break;
75+
case 'dark':
76+
logoStyle = {width: 32, height: 32, background: '#FFF', opacity: '0.2'};
77+
break;
78+
case 'brand':
79+
logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'};
80+
break;
81+
default:
82+
break;
83+
}
84+
85+
switch(device) {
86+
case 'phone':
87+
shellStyle = {height: 500, width: 480, border: '1px solid #eee'};
88+
break;
89+
case 'tablet':
90+
shellStyle = {height: 500, width: 768, border: '1px solid #eee'};
91+
break;
92+
case 'desktop':
93+
shellStyle = {height: 500, width: 1000, border: '1px solid #eee'};
94+
break;
95+
default:
96+
break;
97+
}
98+
99+
return (
100+
<Shell style={shellStyle} device={device} type={level}>
101+
{
102+
branding
103+
? <Shell.Branding>
104+
<div style={logoStyle}></div>
105+
<span style={{marginLeft: 10}}>App Name</span>
106+
</Shell.Branding>
107+
: null
108+
}
109+
110+
{
111+
!navigation
112+
? <Shell.Navigation direction={navigation}>
113+
<Nav type="normal" embeddable direction={navigation} hozInLine>
114+
<Nav.Item icon="account">Nav Item 1</Nav.Item>
115+
<Nav.Item icon="calendar">Nav Item 2</Nav.Item>
116+
<Nav.Item icon="atm">Nav Item 3</Nav.Item>
117+
<Nav.Item icon="account">Nav Item 4</Nav.Item>
118+
<Nav.Item icon="account">Nav Item 5</Nav.Item>
119+
<Nav.Item icon="account">Nav Item 6</Nav.Item>
120+
<Nav.Item icon="account">Nav Item 7</Nav.Item>
121+
</Nav>
122+
</Shell.Navigation>
123+
: null
124+
}
125+
{
126+
actions
127+
? <Shell.Action>
128+
<Search key="2" shape='simple' palceholder="Search" style={{width: '160px', marginRight: 20}}/>
129+
<Icon type="ic_tongzhi" />
130+
<img src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png" style={{width: 24, height: 24, borderRadius: '50%', verticalAlign: 'middle'}} alt="用户头像" />
131+
<span style={{marginLeft: 10}}>Name</span>
132+
</Shell.Action>
133+
: null
134+
}
135+
{
136+
localNav
137+
? <Shell.LocalNavigation>
138+
<Nav type="normal" embeddable>
139+
<Nav.SubNav label="Local Nav1">
140+
<Nav.Item>Local Nav1</Nav.Item>
141+
</Nav.SubNav>
142+
<Nav.SubNav label="Local Nav2">
143+
<Nav.Item>Local Nav2</Nav.Item>
144+
</Nav.SubNav>
145+
<Nav.SubNav label="Local Nav3">
146+
<Nav.Item>Local Nav3</Nav.Item>
147+
</Nav.SubNav>
148+
<Nav.Item>Local Nav4</Nav.Item>
149+
<Nav.Item>Local Nav5</Nav.Item>
150+
<Nav.Item>Local Nav6</Nav.Item>
151+
<Nav.Item>Local Nav7</Nav.Item>
152+
<Nav.Item>Local Nav8</Nav.Item>
153+
<Nav.Item>Local Nav4</Nav.Item>
154+
<Nav.Item>Local Nav5</Nav.Item>
155+
<Nav.Item>Local Nav6</Nav.Item>
156+
<Nav.Item>Local Nav7</Nav.Item>
157+
<Nav.Item>Local Nav8</Nav.Item>
158+
</Nav>
159+
</Shell.LocalNavigation>
160+
: null
161+
}
162+
{
163+
appbar
164+
? <Shell.AppBar>
165+
166+
</Shell.AppBar>
167+
: null
168+
}
169+
<Shell.Content>
170+
<div style={{minHeight: 1200, background: '#fff'}}></div>
171+
</Shell.Content>
172+
173+
{
174+
ancillary
175+
? <Shell.Ancillary>
176+
</Shell.Ancillary>
177+
: null
178+
}
179+
{
180+
tooldock
181+
? <Shell.ToolDock>
182+
<Shell.ToolDockItem>
183+
<Icon type="calendar" />
184+
</Shell.ToolDockItem>
185+
<Shell.ToolDockItem>
186+
<Icon type="atm" />
187+
</Shell.ToolDockItem>
188+
<Shell.ToolDockItem>
189+
<Icon type="account" />
190+
</Shell.ToolDockItem>
191+
</Shell.ToolDock>
192+
: null
193+
}
194+
{
195+
footer
196+
? <Shell.Footer>
197+
<span>Alibaba Fusion</span>
198+
<span>@ 2019 Alibaba Piecework 版权所有</span>
199+
</Shell.Footer>
200+
: null
201+
}
202+
</Shell>
203+
);
204+
}
205+
};

‎docs/shell/demo/basic.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# 基本
2+
3+
- order: 0
4+
5+
基本的Shell
6+
7+
:::lang=en-us
8+
# Type
9+
10+
- order: 0
11+
12+
Basic usage of shell
13+
14+
:::
15+
16+
---
17+
18+
````jsx
19+
import { Search, Icon, Nav, Shell } from '@alifd/next';
20+
21+
const { SubNav, Item, Group, Divider } = Nav;
22+
23+
class App extends React.Component {
24+
render() {
25+
return (
26+
<div>
27+
<Shell className={"iframe-hack"} style={{border: '1px solid #eee'}}>
28+
<Shell.Branding>
29+
<div className="rectangular"></div>
30+
<span style={{marginLeft: 10}}>App Name</span>
31+
</Shell.Branding>
32+
<Shell.Navigation direction="hoz">
33+
<Search key="2" shape="simple" type="dark" palceholder="Search" style={{width: '200px'}}/>
34+
</Shell.Navigation>
35+
<Shell.Action>
36+
<Icon type="ic_tongzhi" />
37+
<img src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png" className="avatar" alt="用户头像" />
38+
<span style={{marginLeft: 10}}>MyName</span>
39+
</Shell.Action>
40+
41+
<Shell.Content>
42+
<div style={{minHeight: 1200, background: '#fff'}}></div>
43+
</Shell.Content>
44+
45+
<Shell.Footer>
46+
<span>Alibaba Fusion</span>
47+
<span>@ 2019 Alibaba Piecework 版权所有</span>
48+
</Shell.Footer>
49+
</Shell>
50+
</div>
51+
);
52+
}
53+
}
54+
55+
ReactDOM.render((
56+
<App />
57+
), mountNode);
58+
````
59+
````css
60+
.avatar {
61+
width: 24px;
62+
height: 24px;
63+
border-radius: 50%;
64+
vertical-align: middle;
65+
}
66+
.rectangular {
67+
width: 32px;
68+
height: 32px;
69+
background: rgba(0, 0, 0, 0.04);
70+
}
71+
72+
.iframe-hack {
73+
width: 100%;
74+
height: 500px;
75+
}
76+
````

0 commit comments

Comments
 (0)