gg-y-ui
Version:
An enterprise-class UI design language and Vue-based implementation for web
159 lines (131 loc) • 8.29 kB
Markdown
<p align="center">
<svg width="258" height="164" viewBox="0 0 258 164" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M131.004 32.992L87.1964 76.7996V108.565C87.1964 119.103 78.6489 127.651 68.1104 127.651C57.5718 127.651 49.0244 119.103 49.0244 108.565V76.7996L21.96 49.7352L5.59085 33.3661C-1.86403 25.9112 -1.86403 13.8311 5.59085 6.37664C13.0457 -1.07824 25.1259 -1.07824 32.5807 6.37664L67.7363 41.5322L68.1104 41.9063L104.014 6.00254C111.469 -1.45234 123.549 -1.45234 131.004 6.00254C138.458 13.457 138.458 25.5371 131.004 32.992Z"
fill="url(#paint0_linear)"
/>
<path
d="M258 19.3702V109.329C258 119.867 249.453 128.415 238.914 128.415C228.375 128.415 219.828 119.867 219.828 109.329V19.3702C219.828 8.82434 228.375 0.28418 238.914 0.28418C249.453 0.28418 258 8.82434 258 19.3702Z"
fill="url(#paint1_linear)"
/>
<g style="mix-blend-mode:multiply">
<path
d="M212.644 19.086V71.4635C212.644 102.952 187.032 128.571 155.544 128.571C124.056 128.571 98.4361 102.951 98.4361 71.4635V19.5725C98.4361 9.03394 106.984 0.486459 117.522 0.486459C128.061 0.486459 136.608 9.03394 136.608 19.5725V71.4635C136.608 81.9047 145.103 90.3997 155.544 90.3997C165.978 90.3997 174.473 81.9047 174.473 71.4635V19.086C174.472 8.54748 183.02 0 193.558 0C204.104 0 212.644 8.54748 212.644 19.086Z"
fill="url(#paint2_linear)"
/>
</g>
<path
d="M187.912 161.537C187.026 161.537 186.358 161.183 185.886 160.495C185.453 159.866 185.257 159.04 185.257 158.057V157.9C185.257 156.818 185.512 155.953 186.043 155.323C186.515 154.734 187.105 154.438 187.833 154.438C188.836 154.438 189.583 154.773 190.055 155.441C190.448 156.012 190.665 156.838 190.665 157.939C190.665 159.04 190.468 159.885 190.094 160.476C189.622 161.183 188.895 161.537 187.912 161.537ZM188.246 163.346C189.74 163.346 190.92 162.815 191.785 161.753C192.572 160.77 192.965 159.492 192.965 157.938C192.965 156.444 192.572 155.205 191.805 154.222C190.959 153.16 189.819 152.629 188.364 152.629C187.184 152.629 186.161 153.18 185.335 154.301V148.755H183.093V163.071H185.178V161.99C185.886 162.894 186.908 163.346 188.246 163.346ZM175.306 163.346C176.565 163.346 177.627 162.815 178.492 161.753V163.071H180.733V152.904H178.492V159.119C178.295 159.846 177.961 160.417 177.509 160.849C177.056 161.262 176.584 161.479 176.093 161.479C175.306 161.479 174.756 161.282 174.402 160.908C174.048 160.515 173.89 159.925 173.89 159.099V152.904H171.649V159.237C171.649 161.97 172.868 163.346 175.306 163.346ZM159.673 163.071V156.857H166.791V163.071H169.092V149.03H166.791V154.89H159.673V149.03H157.372V163.071H159.673ZM155.012 158.902V157.054H145.082V158.902H155.012ZM138.101 161.537C137.098 161.537 136.37 161.183 135.918 160.475C135.525 159.885 135.348 159.039 135.348 157.938C135.348 156.837 135.544 156.011 135.957 155.441C136.429 154.772 137.157 154.438 138.179 154.438C138.887 154.438 139.497 154.733 139.969 155.323C140.48 155.952 140.756 156.818 140.756 157.899V158.056C140.756 159.039 140.539 159.865 140.126 160.495C139.654 161.183 138.966 161.537 138.101 161.537ZM137.766 163.346C139.103 163.346 140.126 162.894 140.834 161.989V163.071H142.918V148.755H140.677V154.3C139.831 153.179 138.828 152.629 137.648 152.629C136.193 152.629 135.033 153.159 134.207 154.221C133.42 155.205 133.047 156.444 133.047 157.938C133.047 159.491 133.44 160.77 134.227 161.753C135.072 162.815 136.252 163.346 137.766 163.346ZM125.653 163.346C126.911 163.346 127.973 162.815 128.839 161.753V163.071H131.08V152.904H128.839V159.119C128.642 159.846 128.308 160.417 127.855 160.849C127.403 161.262 126.931 161.479 126.439 161.479C125.653 161.479 125.102 161.282 124.748 160.908C124.395 160.515 124.237 159.925 124.237 159.099V152.904H121.995V159.237C121.995 161.97 123.214 163.346 125.653 163.346ZM114.916 161.517C113.972 161.517 113.264 161.144 112.753 160.416C112.32 159.787 112.104 158.98 112.104 157.997C112.104 157.014 112.32 156.188 112.753 155.559C113.264 154.812 113.972 154.458 114.916 154.458C115.84 154.458 116.568 154.812 117.079 155.559C117.512 156.188 117.748 157.014 117.748 157.997C117.748 158.961 117.512 159.767 117.079 160.416C116.568 161.144 115.84 161.517 114.916 161.517ZM114.916 163.346C116.45 163.346 117.708 162.835 118.652 161.812C119.557 160.829 120.029 159.551 120.029 157.997C120.029 156.424 119.557 155.146 118.633 154.143C117.689 153.121 116.45 152.629 114.916 152.629C113.363 152.629 112.124 153.121 111.2 154.143C110.256 155.146 109.804 156.424 109.804 157.997C109.804 159.551 110.256 160.829 111.181 161.812C112.123 162.835 113.362 163.346 114.916 163.346ZM107.64 163.071V148.755H105.398V163.071H107.64ZM97.139 163.346C98.6531 163.346 99.951 162.914 101.033 162.048C102.193 161.124 102.921 159.846 103.235 158.194H100.994C100.719 159.256 100.246 160.062 99.5778 160.593C98.9484 161.065 98.1227 161.321 97.1197 161.321C95.5858 161.321 94.4454 160.829 93.7175 159.885C93.0489 159 92.7144 157.722 92.7144 156.07C92.7144 154.457 93.0489 153.199 93.7368 152.294C94.4842 151.272 95.5854 150.78 97.0603 150.78C98.0435 150.78 98.8498 150.977 99.4792 151.41C100.128 151.842 100.561 152.511 100.797 153.435H103.039C102.822 152.019 102.212 150.879 101.19 150.053C100.128 149.188 98.7517 148.755 97.0999 148.755C94.8583 148.755 93.1471 149.482 91.9675 150.977C90.9253 152.275 90.4138 153.986 90.4138 156.07C90.4138 158.194 90.9055 159.885 91.9085 161.144C93.0485 162.599 94.7989 163.346 97.139 163.346Z"
fill="#808080"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="73.5"
y1="128"
x2="76"
y2="6.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0085FF" />
<stop offset="0.53125" stop-color="#1B98FF" />
<stop offset="1" stop-color="#82CAFF" />
</linearGradient>
<linearGradient
id="paint1_linear"
x1="251.302"
y1="108.091"
x2="251"
y2="16"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0085FF" />
<stop offset="0.382452" stop-color="#1B98FF" />
<stop offset="1" stop-color="#82CAFF" />
</linearGradient>
<linearGradient
id="paint2_linear"
x1="170"
y1="4"
x2="136"
y2="123"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0085FF" />
<stop offset="0.53125" stop-color="#1B98FF" />
<stop offset="1" stop-color="#82CAFF" />
</linearGradient>
<clipPath id="clip0">
<rect width="258" height="163.346" fill="white" />
</clipPath>
</defs>
</svg>
</p>
<div align="center">
An enterprise-class UI components based on YUI Design and Vue for web.
</div>
## Usage
### Fully import
In main.js:
```js
import Vue from 'vue';
import YUI from 'y-ui';
import 'y-ui/lib/y-ui.common.css';
import App from './App.vue';
Vue.use(YUI);
new Vue({
el: '#app',
render: h => h(App),
});
```
The above imports YUI entirely. Note that CSS file needs to be imported separately.
### On demand
With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.
First, install babel-plugin-component:
```shell
yarn add -D babel-plugin-component
```
Then, edit .babelrc :
```javascript
// edit your .babelrc file as the following
{
// ...
"plugins": [
[
"component",
{
"libraryName": "y-ui"
}
]
]
}
```
Next, if you need Button and Switch, edit main.js:
```js
import Vue from 'vue';
import { Button, Switch } from 'y-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Switch.name, Switch);
/* or
* Vue.use(Button)
* Vue.use(Switch)
*/
new Vue({
el: '#app',
render: h => h(App),
});
```
### Design standard
Import the variable in `less` files:
```less
@import '~y-ui/src/styles/var.less';
#app {
background-color: @blue1;
}
```
## Development
Skip this part if you just want to use YUI.
For those who are interested in contributing to Element, please refer to our contributing [guide](./docs/CONTRIBUTING.md) to see how to run this project.