t ¡ Á á U ® à · 2016-12-23 · Alibaba International UED B2B ¦ ^ ±- 5 ¦ ^ þ c Alibaba...

B2B -Alibaba International UED Alibaba International UED

B2B


DPL UI

B2B - -

Fusion PM

Fusion


— —


A

•

•

•

• UI

DPL

common style

biz style(s)

common.css

common style

common DPL

biz style

biz DPL(s)

Bootstrap

??


B

A B A B

banner

4px 6px...

#39B54A

UI


DPL

UI


— —


SVG

A B C

Fusion

DPL

DPL

DPL

+

PC H5

React+ UI


— - —


-

Buttonfont Center 4dp

color

line

shadow

font

corner

Grid

Space

Align


-

• Layout• Frame• Grid• Space• Align• Responsive

space

button

step

checkbox√

range

dialog

pagenation2/3 ><

menumenu

menumenu

button

button

menumenu

icon

color

line

shadowfont

corner

Grid

Space

AlignButton

color

line

shadow

font

corner

button


Body1

Line

Color

Angle

shadow

Effect

Contact Supplier


Contact SupplierContact Supplier


Contact Supplier


Contact Supplier

2014 Wishmade New Laser Cut Card for the red computer

US $13.46~25.44


Contact Supplier


US $13.46~25.44

S3

S3



US $13.46~25.44

Contact Supplier

S3

S3



US $13.46~25.44

S3

S3

Contact Supplier



US $13.46~25.44

Contact Supplier


US $13.46~25.44

Contact Supplier


US $13.46~25.44

Contact Supplier


US $13.46~25.44

Contact Supplier

— - —


DPL

+ = UI Fusion UI

UI UI


Button


Levelprimarynormal

secondary

Sizesmall

mediumlarge

TypeButton

SplitButtonGroupButton

Statenormalhoverclick

disabled

PartBounding

IconText

WidthHeight

ColorBackground

Shadow

Corner

FontSize

Button Button


UIButtonSize Corner ColorShadow

$btn-primary-bg:$color-b1-6;

$btn-split-padding-small:$btn-padding-small;

Sizesmall

mediumlarge

WidthHeight

$colorb16

ColorBackground

$corner$btn-corner

$dialog-corner

Corner


UI

$color-b1-6$corner-radius-base$shadow-elevation-sd1

$line1$font-base$size-base

$btn-primary-color-bg$btn-border-color

$btn-primary-font-color$btn-shadow

$btn-size-font-small$btn-size-padding

$btn-cornerButton


DPL DPL


UI

++

unchanged

changed

DPL

Lifecycle / Props

Status

— —


UI

Mixins

Variables

ThemeDemo

Index.scss

+

theme.jsxSize State Others

widthheight

colorshadow

transform

+


UI


sketch

SCSS


normal

hover

disabled

Button 28dp

Button

Button

Button

Button

Button ButtonButton

Button

Button Button Button

L M S

with icon

normal

hover

disabled

Button

Button

Button

Button

Button

Button

Button Button Button

L M S

normal

hover

disabled

Button

Button

Button

L

normal

hover

disabled

L

with icon


///text///@namespacestatement/normal$input-single-color:$color-n2-4!default;///text///@namespacestatement/hint$input-single-color-hint:$color-n2-2!default;///text///@namespacestatement/disabled$input-single-color-disabled:$color-n2-1!default;///border///@namespacestatement/normal$input-single-color-border:$color-n1-7!default;///border///@namespacestatement/hover$input-single-color-border-hover:$color-n1-8!default;///border///@namespacestatement/focus$input-single-color-border-focus:$color-b2-6!default;

export

SCSS


Sketch

Sketch


SVGDOM

DOM - SVG


DOM - SVG

SVGDOM

CSS +CSS

Sketch

XML Strings95%+

— —

Alibaba International UED

DPL

DPL

Next 41+ Mext 41+ DPL FusionUX FusionConfig DPL FusionDev FusionConfig

FusionCool FusionVector FusionConfig FusionIssue

40+ 40+

10 100+

Web组件⽆线组件

业务线项⺫

80%+ 15k+单测覆盖率 Downloads

40% - 50% Fusion


&

t ¡ Á á U ® à · 2016-12-23 · Alibaba International UED B2B ¦ ^ ±- 5 ¦ ^ þ c Alibaba...

Documents

Transcript of t ¡ Á á U ® à · 2016-12-23 · Alibaba International UED B2B ¦ ^ ±- 5 ¦ ^ þ c Alibaba...