github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update: [grid] full demo supported :octocat:

Browse Source
pull/9/head
wanlei 7 years ago
parent f2ea0ccc0f
commit 7e6374fc3c
21 changed files with 750 additions and 121 deletions
Show Stats Download Patch File Download Diff File

18
components/checkbox/demo/layout.vue
Unescape View File

@ -1,12 +1,12 @@
<template>
<CheckboxGroup @change="onChange">
<Row>
<Col :span="8"><Checkbox value="A">A</Checkbox></Col>
<Col :span="8"><Checkbox value="B">B</Checkbox></Col>
<Col :span="8"><Checkbox value="C">C</Checkbox></Col>
<Col :span="8"><Checkbox value="D">D</Checkbox></Col>
<Col :span="8"><Checkbox value="E">E</Checkbox></Col>
</Row>
<AntRow>
<AntCol :span="8"><Checkbox value="A">A</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="B">B</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="C">C</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="D">D</Checkbox></AntCol>
<AntCol :span="8"><Checkbox value="E">E</Checkbox></AntCol>
</AntRow>
</CheckboxGroup>
</template>
<script>
@ -19,8 +19,8 @@ export default {
},
components: {
Checkbox,
Row,
Col,
AntRow: Row,
AntCol: Col,
CheckboxGroup: Checkbox.Group,
},
}

14
components/grid/col.vue → components/grid/Col.vue
Unescape View File

@ -10,7 +10,7 @@
}
export default {
name: 'Col',
name: 'Ant-Col',
props: {
prefixCls: {
'default': 'ant-col',
@ -27,6 +27,9 @@
lg: [Number, Object],
xl: [Number, Object],
},
inject: {
parentRow: { 'default': undefined },
},
computed: {
classes () {
const { prefixCls, span, order, offset, push, pull } = this
@ -59,12 +62,8 @@
}
},
gutter () {
let parent = this.$parent
while (parent && parent.$options.name !== 'Row') {
console.info(parent.$options.name)
parent = parent.$parent
}
return parent ? parent.gutter : 0
const parent = this.parentRow
return parent ? +parent.gutter : 0
},
},
render (h) {
@ -73,7 +72,6 @@
style.paddingLeft = this.gutter / 2 + 'px'
style.paddingRight = style.paddingLeft
}
console.info(style)
// why only unnamed slots
return h('div', {
'class': this.classes,

7
components/grid/row.vue → components/grid/Row.vue
Unescape View File

@ -5,7 +5,7 @@
</template>
<script>
export default {
name: 'Row',
name: 'Ant-Row',
props: {
prefixCls: {
'default': 'ant-row',
@ -47,6 +47,11 @@
},
}
},
provide() {
return {
parentRow: this,
}
},
computed: {
classes () {
const { prefixCls, type, align, justify } = this

62
components/grid/demo/align.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<div class="grid">
<ant-row type="flex" justify="center" align="top">
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
</ant-row>
<p>Align Center</p>
<ant-row type="flex" justify="space-around" align="middle">
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
</ant-row>
<p>Align Bottom</p>
<ant-row type="flex" justify="space-between" align="bottom">
<ant-col :span="4" class="color1"><DemoBox :value="100">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="50">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color1"><DemoBox :value="120">col-4</DemoBox></ant-col>
<ant-col :span="4" class="color2"><DemoBox :value="80">col-4</DemoBox></ant-col>
</ant-row>
</div>
</template>
<script>
import Vue from 'vue'
import { Grid } from 'antd'
const { Row, Col } = Grid
const DemoBox = Vue.component('DemoBox', {
props: ['value'],
template: `<p :style="{height: value + 'px'}">{{value}}</p>`,
})
export default {
components: {
AntRow: Row,
AntCol: Col,
DemoBox,
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
.height-100 {
height: 100px;
}
</style>

48
components/grid/demo/basic.vue
Unescape View File

@ -0,0 +1,48 @@
<template>
<div class="basic">
<ant-row>
<ant-col class="color1" :span="24" >100%</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="6" >25%</ant-col>
<ant-col class="color1" :span="6" :offset="6" >25%</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="8" >33.33%</ant-col>
<ant-col class="color1" :span="8" :offset="8" >33.33%</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="12" >50%</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="18" >66.66%</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less" scoped>
.basic {
background: linear-gradient(90deg,#f5f5f5 4.16666667%,transparent 0,transparent 8.33333333%,#f5f5f5 0,#f5f5f5 12.5%,transparent 0,transparent 16.66666667%,#f5f5f5 0,#f5f5f5 20.83333333%,transparent 0,transparent 25%,#f5f5f5 0,#f5f5f5 29.16666667%,transparent 0,transparent 33.33333333%,#f5f5f5 0,#f5f5f5 37.5%,transparent 0,transparent 41.66666667%,#f5f5f5 0,#f5f5f5 45.83333333%,transparent 0,transparent 50%,#f5f5f5 0,#f5f5f5 54.16666667%,transparent 0,transparent 58.33333333%,#f5f5f5 0,#f5f5f5 62.5%,transparent 0,transparent 66.66666667%,#f5f5f5 0,#f5f5f5 70.83333333%,transparent 0,transparent 75%,#f5f5f5 0,#f5f5f5 79.16666667%,transparent 0,transparent 83.33333333%,#f5f5f5 0,#f5f5f5 87.5%,transparent 0,transparent 91.66666667%,#f5f5f5 0,#f5f5f5 95.83333333%,transparent 0);
}
.basic div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.show-block {
margin: 20px 0;
}
.color1 {
background: rgba(0, 191, 255, 0.52);
color: white;
}
</style>

34
components/grid/demo/complex.vue
Unescape View File

@ -0,0 +1,34 @@
<template>
<div class="grid">
<ant-row>
<ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
<ant-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color2">Col</ant-col>
<ant-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }" class="color1">Col</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

35
components/grid/demo/flex-order.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<div class="grid">
<ant-row type="flex">
<ant-col :span="6" :order="4" class="color1">1 col-order-4</ant-col>
<ant-col :span="6" :order="3" class="color2">2 col-order-3</ant-col>
<ant-col :span="6" :order="2" class="color1">3 col-order-2</ant-col>
<ant-col :span="6" :order="1" class="color2">4 col-order-1</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

68
components/grid/demo/flex.vue
Unescape View File

@ -0,0 +1,68 @@
<template>
<div class="grid">
<p>sub-element align left</p>
<ant-row type="flex" justify="start">
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
</ant-row>
<p>sub-element align center</p>
<ant-row type="flex" justify="center">
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
</ant-row>
<p>sub-element align right</p>
<ant-row type="flex" justify="end">
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
</ant-row>
<p>sub-element monospaced arrangement</p>
<ant-row type="flex" justify="space-between">
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
</ant-row>
<p>sub-element align full</p>
<ant-row type="flex" justify="space-around">
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
<ant-col :span="4" class="color1">col-4</ant-col>
<ant-col :span="4" class="color2">col-4</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

34
components/grid/demo/flexible.vue
Unescape View File

@ -0,0 +1,34 @@
<template>
<div class="grid">
<ant-row>
<ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
<ant-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">Col</ant-col>
<ant-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">Col</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

35
components/grid/demo/gutter.vue
Unescape View File

@ -0,0 +1,35 @@
<template>
<div class="grid" style="overflow: hidden;">
<ant-row :gutter="24">
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
<ant-col :span="6"><div class="color2">col-6</div></ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

75
components/grid/demo/index.vue
Unescape View File

@ -0,0 +1,75 @@
<template>
<div class="topLevel">
<h1>基础布局</h1>
<basic/>
<h1>恩。基础</h1>
<layout/>
<h1>区块间隔</h1>
<gutter/>
<h1>偏移</h1>
<offset/>
<h1>栅格排序</h1>
<pull/>
<h1>FLEX</h1>
<flex/>
<h1>对齐</h1>
<align/>
<h1>Flex排序</h1>
<flex-order/>
<h1>响应式设计</h1>
<flexible/>
<h1>复杂一点</h1>
<complex/>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
import Basic from './basic.vue'
import Layout from './layout.vue'
import Gutter from './gutter.vue'
import Offset from './offset.vue'
import Pull from './pull.vue'
import Flex from './flex.vue'
import Align from './align.vue'
import FlexOrder from './flex-order.vue'
import Flexible from './flexible.vue'
import Complex from './complex.vue'
export default {
components: {
AntRow: Row,
AntCol: Col,
Basic,
Layout,
Gutter,
Offset,
Pull,
Flex,
Align,
FlexOrder,
Flexible,
Complex,
},
}
</script>
<style lang="less">
.topLevel .ant-row{
margin: 10px 0;
}
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.show-block {
margin: 20px 0;
}
.color1 {
background: #00bfff;
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

44
components/grid/demo/layout.vue
Unescape View File

@ -0,0 +1,44 @@
<template>
<div class="grid">
<ant-row>
<ant-col class="color1" :span="12" >col-12</ant-col>
<ant-col class="color2" :span="12" >col-12</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="8" >col-8</ant-col>
<ant-col class="color2" :span="8" >col-8</ant-col>
<ant-col class="color1" :span="8" >col-8</ant-col>
</ant-row>
<ant-row>
<ant-col class="color1" :span="6" >col-6</ant-col>
<ant-col class="color2" :span="6" >col-6</ant-col>
<ant-col class="color1" :span="6" >col-6</ant-col>
<ant-col class="color2" :span="6" >col-6</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

40
components/grid/demo/offset.vue
Unescape View File

@ -0,0 +1,40 @@
<template>
<div class="grid">
<ant-row>
<ant-col :span="8" class="color1">col-8</ant-col>
<ant-col :span="8" :offset="8" class="color2">col-8</ant-col>
</ant-row>
<ant-row>
<ant-col :span="6" :offset="6" class="color1">col-6 col-offset-6</ant-col>
<ant-col :span="6" :offset="6" class="color2">col-6 col-offset-6</ant-col>
</ant-row>
<ant-row>
<ant-col :span="12" :offset="6" class="color1">col-12 col-offset-6</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

33
components/grid/demo/pull.vue
Unescape View File

@ -0,0 +1,33 @@
<template>
<div class="grid">
<ant-row>
<ant-col :span="18" :push="6" class="color1">col-18 col-push-6</ant-col>
<ant-col :span="6" :pull="18" class="color2">col-6 col-pull-18</ant-col>
</ant-row>
</div>
</template>
<script>
import { Grid } from 'antd'
const { Row, Col } = Grid
export default {
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.color1 {
background: rgb(0, 191, 255);
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>

5
components/grid/index.js
Unescape View File

@ -1,7 +1,6 @@
import Row from './row.vue'
import Col from './col.vue'
import Row from './Row.vue'
import Col from './Col.vue'
export default {
Col, Row,
}

4
components/index.js
Unescape View File

@ -12,6 +12,6 @@ export { default as Rate } from './rate'
export { default as ToolTip } from './tooltip'
export { default as Row } from './grid/row'
export { default as Row } from './grid/Row'
export { default as Col } from './grid/col'
export { default as Col } from './grid/Col'

87
components/switch/Switch.vue
Unescape View File

@ -0,0 +1,87 @@
<template>
<span>
<span class={`${prefixCls}-inner`}>
<component></component>
</span>
</span>
</template>
<script>
export default {
name: 'Radio',
props: {
prefixCls: {
default: 'ant-radio',
type: String,
},
defaultChecked: Boolean,
checked: { type: Boolean, default: undefined },
disabled: Boolean,
isGroup: Boolean,
value: [String, Number, Boolean],
name: String,
onGroupChange: Function,
},
model: {
prop: 'checked',
},
data () {
const { checked, defaultChecked } = this
return {
stateChecked: checked === undefined ? defaultChecked : checked,
}
},
computed: {
hasDefaultSlot () {
return !!this.$slots.default
},
classes () {
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: stateChecked,
[`${prefixCls}-wrapper-disabled`]: disabled,
}
},
checkboxClass () {
const { prefixCls, disabled, stateChecked } = this
return {
[`${prefixCls}`]: true,
[`${prefixCls}-checked`]: stateChecked,
[`${prefixCls}-disabled`]: disabled,
}
},
},
methods: {
handleChange (event) {
const targetChecked = event.target.checked
const { name, value, checked } = this
if (checked === undefined) {
this.stateChecked = targetChecked
}
this.$emit('input', targetChecked)
const target = {
name,
value,
checked: targetChecked,
}
this.$emit('change', {
target,
stopPropagation () {
event.stopPropagation()
},
preventDefault () {
event.preventDefault()
},
})
if (this.isGroup) {
this.onGroupChange({ target })
}
},
},
watch: {
checked (val) {
this.stateChecked = val
},
},
}
</script>

2
components/switch/index.js
Unescape View File

@ -0,0 +1,2 @@
import Switch from './Switch.vue'
export default Switch

2
components/switch/style/index.js
Unescape View File

@ -0,0 +1,2 @@
import '../../style/index.less'
import './index.less'

126
components/switch/style/index.less
Unescape View File

@ -0,0 +1,126 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@switch-prefix-cls: ~"@{ant-prefix}-switch";
@switch-duration: .36s;
.@{switch-prefix-cls} {
position: relative;
display: inline-block;
box-sizing: border-box;
height: 22px;
min-width: 44px;
line-height: 20px;
vertical-align: middle;
border-radius: 20px;
border: 1px solid transparent;
background-color: @disabled-color;
cursor: pointer;
transition: all @switch-duration;
user-select: none;
&-inner {
color: #fff;
font-size: @font-size-base;
margin-left: 24px;
margin-right: 6px;
display: block;
}
&:after {
position: absolute;
width: 18px;
height: 18px;
left: 1px;
top: 1px;
border-radius: 18px;
background-color: @component-background;
content: " ";
cursor: pointer;
transition: all @switch-duration @ease-in-out-circ;
}
&:active:after {
width: 24px;
}
&:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
outline: 0;
}
&:focus:hover {
box-shadow: none;
}
&-small {
height: 14px;
min-width: 28px;
line-height: 12px;
.@{switch-prefix-cls}-inner {
margin-left: 18px;
margin-right: 3px;
}
&:after {
width: 12px;
height: 12px;
top: 0;
left: 0.5px;
}
&:active:after {
width: 16px;
}
}
&-small&-checked {
&:after {
left: 100%;
margin-left: -12.5px;
}
.@{switch-prefix-cls}-inner {
margin-left: 3px;
margin-right: 18px;
}
}
&-small:active&-checked:after {
margin-left: -16.5px;
}
&-checked {
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
margin-left: 6px;
margin-right: 24px;
}
&:after {
left: 100%;
margin-left: -19px;
}
&:active:after {
margin-left: -25px;
}
}
&-disabled {
cursor: not-allowed;
background: #f4f4f4;
&:after {
background: #ccc;
cursor: not-allowed;
}
.@{switch-prefix-cls}-inner {
color: @disabled-color;
}
}
}

98
examples/grid.vue
Unescape View File

@ -1,98 +0,0 @@
<template>
<div class="grid">
<div class="show-block">
<ant-row gutter="10">
<ant-col :style="style1" :span="6">
<div :style="style2">1</div>
</ant-col>
<ant-col :style="style1" :span="6">
<div :style="style2">2</div>
</ant-col>
<ant-col :style="style1" :span="6">
<div :style="style2">3</div>
</ant-col>
<ant-col :style="style1" :span="6">
<div :style="style2">4</div>
</ant-col>
</ant-row>
</div>
<div class="show-block">
<ant-row gutter="10">
<ant-col :style="style1" :span="6" :offset="2">
<div :style="style2">offset = 2</div>
</ant-col>
<ant-col :style="style1" :span="6" :offset="2">
<div :style="style2">offset = 2</div>
</ant-col>
</ant-row>
</div>
<div class="show-block">
<ant-row gutter="10" type="flex">
<ant-col class="height1 color1" :span="6">
<div class="">F</div>
</ant-col>
<ant-col class="height2 color2" :span="6">
<div class="">L</div>
</ant-col>
<ant-col class="height3 color1" :span="6">
<div class="">E</div>
</ant-col>
<ant-col class="height4 color2" :span="6">
<div class="">X</div>
</ant-col>
</ant-row>
</div>
</div>
</template>
<script>
import { Grid } from '../components'
const { Row, Col } = Grid
export default {
data () {
return {
style1: { height: 40 + 'px' },
style2: { background: '#00bfff', height: 40 + 'px' }
}
},
methods: {
handleClick (event) {
console.log(event)
this.type = this.type === 'primary' ? 'danger' : 'primary'
},
},
components: {
AntRow: Row,
AntCol: Col
},
}
</script>
<style lang="less">
.grid div {
text-align: center;
vertical-align: middle;
line-height: 40px;
}
.show-block {
margin: 20px 0;
}
.height1 {
height: 60px;
}
.height2 {
height: 40px;
}
.height3 {
height: 80px;
}
.height4 {
height: 50px;
}
.color1 {
background: #00bfff;
color: white;
}
.color2 {
background: #0e77ca;
color: white;
}
</style>
Write Preview
Loading…
Cancel
Save