Skip to content

E
Element
Commit 78b791c0 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Carbon: doc's style update (#7292) 

* Carbon: sidenav & table & changelog

* Carbon: doc style update

* Carbon: fix header's bg

* Update header.vue

* Update component.tpl
parent 257473f3
Show whitespace changes
Inline Side-by-side
Showing with 260 additions and 106 deletions
examples/app.vue
View file @ 78b791c0
......@@ -24,7 +24,6 @@
left: 0;
top: 0;
z-index: 1500;
border-bottom: solid 1px #ccc;
}
}
}
......
examples/assets/images/element-logo-small-white.svg 0 → 100644
View file @ 78b791c0
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="30px" viewBox="0 0 38 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>Shape Copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#fff">
<path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/element-logo-small.svg
View file @ 78b791c0
......@@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#666">
<path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>
......
examples/assets/images/element-logo-white.svg 0 → 100644
View file @ 78b791c0
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="146px" height="38px" viewBox="0 0 146 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
<title>Shape Copy</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#fff">
<path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/element-logo.svg
View file @ 78b791c0
......@@ -5,7 +5,7 @@
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
<g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#666">
<path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
</g>
</g>
......
examples/components/footer-nav.vue
View file @ 78b791c0
......@@ -19,8 +19,8 @@
<style>
.footer-nav {
padding: 24px 0;
color: #99a9bf;
padding: 40px 0;
color: #333;
font-size: 14px;
&::after {
......@@ -31,7 +31,7 @@
& i {
transition: .3s;
color: #d9def1;
color: #999;
vertical-align: baseline;
}
}
......@@ -41,10 +41,10 @@
transition: .3s;
&:hover {
color: #20a0ff;
color: #1989fa;
& i {
color: #20a0ff;
color: #1989fa;
}
}
}
......
examples/components/header.vue
View file @ 78b791c0
......@@ -7,6 +7,7 @@
transform: translateY(-80px);
}
}
.header {
height: 80px;
background-color: rgba(32, 160, 255, 1);
......@@ -48,6 +49,7 @@
border-radius: 3px;
}
}
.nav {
float: right;
height: 100%;
......@@ -57,24 +59,43 @@
padding: 0;
margin: 0;
}
.nav-gap {
position: relative;
width: 1px;
height: 80px;
padding: 0 20px;
&::before {
content: '';
position: absolute;
top: calc(50% - 8px);
width: 1px;
height: 16px;
background: #ebebeb;
}
}
.nav-logo,
.nav-logo-small {
vertical-align: sub;
}
.nav-logo-small {
display: none;
}
.nav-item {
margin: 0;
float: left;
list-style: none;
position: relative;
cursor: pointer;
margin-left: 20px;
&:last-child {
cursor: default;
margin-left: 34px;
span {
opacity: .8;
}
......@@ -83,9 +104,11 @@
cursor: pointer;
display: inline-block;
height: 100%;
&:hover {
opacity: 1;
}
&.active {
font-weight: 700;
opacity: 1;
......@@ -95,22 +118,19 @@
a {
text-decoration: none;
color: #333;
color: #fff;
display: block;
padding: 0 20px;
padding: 0 22px;
opacity: .8;
&.active,
&:hover {
opacity: 1;
}
&.active {
font-weight: 700;
}
&.active::before {
&.active::after {
content: '';
display: block;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
......@@ -121,12 +141,94 @@
}
}
}
.header-home {
position: fixed;
top: 0;
background-color: rgba(32, 160, 255, 0);
}
.header-light {
background-color: #fff;
.nav-lang {
color: #888;
&:hover,
&.acive {
font-weight: normal;
opacity: 1;
color: #1989fa;
}
}
.nav-lang-spe {
color: #888;
}
.nav-item {
a {
color: #888;
opacity: 1;
}
a:hover,
a.active {
color: #333;
}
a.active::after {
width: 14px;
left: calc(50% - 7px);
bottom: 15px;
background: #1989fa;
}
}
}
.nav-dropdown {
margin-bottom: 6px;
padding-left: 18px;
width: 100%;
span {
display: block;
width: 100%;
font-size: 16px;
color: #888;
line-height: 40px;
transition: .2s;
padding-bottom: 6px;
user-select: none;
&:hover {
cursor: pointer;
}
}
i {
transition: .2s;
transform: scale(.6);
font-size: 12px;
color: #979797;
}
@when active {
span, i {
color: #1989FA;
}
i {
transform: rotateZ(180deg) translateY(2px) scale(.6);
}
}
&:hover {
span, i {
color: #1989FA;
}
}
}
@media (max-width: 850px) {
.header {
.nav-logo {
......@@ -148,6 +250,7 @@
}
}
}
@media (max-width: 700px) {
.header {
.container {
......@@ -169,10 +272,13 @@
ref="header"
:style="headerStyle"
:class="{
'header-home': isHome
'header-home': isHome,
'header-light': isComponentPage
}">
<div class="container">
<h1><router-link :to="`/${ lang }`">
<!-- logo -->
<slot v-if="isComponentPage">
<img
src="../assets/images/element-logo.svg"
alt="element-logo"
......@@ -181,7 +287,21 @@
src="../assets/images/element-logo-small.svg"
alt="element-logo"
class="nav-logo-small">
</slot>
<slot v-else>
<img
src="../assets/images/element-logo-white.svg"
alt="element-logo"
class="nav-logo">
<img
src="../assets/images/element-logo-small-white.svg"
alt="element-logo"
class="nav-logo-small">
</slot>
</router-link></h1>
<!-- nav -->
<ul class="nav">
<li class="nav-item">
<router-link
......@@ -202,6 +322,37 @@
exact>{{ langConfig.resource }}
</router-link>
</li>
<!-- gap -->
<li class="nav-item" v-show="isComponentPage">
<div class="nav-gap"></div>
</li>
<!-- 版本选择器 -->
<li class="nav-item" v-show="isComponentPage">
<el-dropdown
trigger="click"
class="nav-dropdown"
:class="{ 'is-active': dropdownVisible }">
<span>
{{ langConfig.dropdown }}{{ version }}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu
slot="dropdown"
class="nav-dropdown-list"
@input="handleDropdownToggle">
<el-dropdown-item
v-for="item in Object.keys(versions)"
:key="item"
@click.native="switchVersion(item)">
{{ item }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</li>
<!-- lang -->
<li class="nav-item">
<span
class="nav-lang"
......@@ -209,7 +360,7 @@
@click="switchLang('zh-CN')">
中文
</span>
<span> / </span>
<span class="nav-lang-spe"> / </span>
<span
class="nav-lang"
:class="{ 'active': lang === 'en-US' }"
......@@ -225,29 +376,30 @@
<script>
import bus from '../bus';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
data() {
return {
active: '',
isHome: false,
isHome: true,
headerStyle: {},
visible: true
visible: true,
versions: [],
version,
dropdownVisible: true,
isComponentPage: true
};
},
watch: {
'$route.path': {
immediate: true,
handler() {
this.isHome = /^home/.test(this.$route.name);
if (/^component/.test(this.$route.name)) {
this.headerStyle.backgroundColor = '#fff';
return;
}
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
this.handlePathChange();
}
}
},
computed: {
lang() {
return this.$route.path.split('/')[1] || 'zh-CN';
......@@ -256,18 +408,52 @@
return compoLang.filter(config => config.lang === this.lang)[0]['header'];
}
},
methods: {
switchVersion(version) {
if (version === this.version) return;
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
},
switchLang(targetLang) {
if (this.lang === targetLang) return;
localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
this.$router.push(this.$route.path.replace(this.lang, targetLang));
},
handleDropdownToggle(visible) {
this.dropdownVisible = visible;
},
handlePathChange() {
const routerName = this.$route.name;
this.isComponentPage = /^component-/.test(routerName);
this.isHome = /^home/.test(routerName);
if (this.isComponentPage) {
this.headerStyle.backgroundColor = '#fff';
return;
}
this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
}
},
created() {
this.handlePathChange();
bus.$on('toggleHeader', visible => {
this.visible = visible;
});
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.versions = JSON.parse(xhr.responseText);
}
};
xhr.open('GET', '/versions.json');
xhr.send();
},
mounted() {
function scroll(fn) {
window.addEventListener('scroll', fn, false);
......
examples/components/side-nav.vue
View file @ 78b791c0
......@@ -18,42 +18,6 @@
overflow: hidden;
}
.nav-dropdown {
margin-bottom: 6px;
width: 100%;
span {
display: block;
width: 100%;
font-size: 16px;
color: #5e6d82;
line-height: 40px;
transition: .2s;
padding-bottom: 6px;
border-bottom: 1px solid #eaeefb;
&:hover {
cursor: pointer;
}
}
i {
transition: .2s;
font-size: 12px;
color: #d3dce6;
}
@when active {
span, i {
color: #1989FA;
}
i {
transform: rotateZ(180deg) translateY(2px);
}
}
&:hover {
span, i {
color: #1989FA;
}
}
}
.nav-item {
a {
font-size: 16px;
......@@ -164,7 +128,6 @@
<script>
import bus from '../bus';
import compoLang from '../i18n/component.json';
import { version } from 'main/index.js';
export default {
props: {
......@@ -179,9 +142,6 @@
highlights: [],
navState: [],
isSmallScreen: false,
versions: [],
version,
dropdownVisible: false,
isFade: false
};
},
......@@ -204,18 +164,11 @@
}
return style;
},
isComponentPage() {
return /^component-/.test(this.$route.name);
},
langConfig() {
return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
}
},
methods: {
switchVersion(version) {
if (version === this.version) return;
location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
},
handleResize() {
this.isSmallScreen = document.documentElement.clientWidth < 768;
this.handlePathChange();
......@@ -251,23 +204,12 @@
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
this.hideAllMenu();
event.currentTarget.nextElementSibling.style.height = 'auto';
},
handleDropdownToggle(visible) {
this.dropdownVisible = visible;
}
},
created() {
bus.$on('fadeNav', () => {
this.isFade = true;
});
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = _ => {
if (xhr.readyState === 4 && xhr.status === 200) {
this.versions = JSON.parse(xhr.responseText);
}
};
xhr.open('GET', '/versions.json');
xhr.send();
},
mounted() {
this.handleResize();
......
examples/pages/template/component.tpl
View file @ 78b791c0
......@@ -34,6 +34,7 @@
.page-component__content {
padding-left: 270px;
padding-bottom: 100px;
}
.content {
......@@ -87,22 +88,24 @@
}
}
.page-component-up {
background-color: #58b7ff;
background-color: #fff;
position: fixed;
right: 100px;
bottom: 150px;
size: 50px;
border-radius: 25px;
size: 40px;
border-radius: 20px;
cursor: pointer;
opacity: 0.4;
transition: .3s;
box-shadow: 0 0 6px rgba(0,0,0, .12);
i {
color: #fff;
color: #1989fa;
display: block;
line-height: 50px;
line-height: 40px;
text-align: center;
font-size: 22px;
font-size: 12px;
}
&.hover {
opacity: 1;
}
......
examples/versions.json
View file @ 78b791c0
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.6":"1.4","1.4.4":"2.0"}
\ No newline at end of file
{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.6":"1.4"}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment