woothu
47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<CCard>
|
|
<CCardHeader>
|
|
<CIcon name="globe-alt"/> Flags
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CRow class="text-center">
|
|
<CCol class="mb-5" col="12">
|
|
<!-- For using the flags inline with text add the classes
|
|
<code>.flag-icon</code> and <code>.flag-icon-xx</code>
|
|
(where xx is the ISO 3166-1-alpha-2 code of a country) to an empty
|
|
span. If you want to have a squared version flag then add the class
|
|
flag-icon-squared as well. -->
|
|
</CCol>
|
|
<template v-for="(flag, key) in displayedFlags">
|
|
<CCol
|
|
class="mb-5"
|
|
col="3"
|
|
sm="2"
|
|
:key="key"
|
|
>
|
|
<CIcon :height="42" :content="flag"/>
|
|
<div>{{key}}</div>
|
|
</CCol>
|
|
</template>
|
|
</CRow>
|
|
</CCardBody>
|
|
</CCard>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { flagSet } from '@coreui/icons'
|
|
export default {
|
|
name: 'Flags',
|
|
flagSet,
|
|
computed: {
|
|
// Avoid duplication caused by displaying 1x1 and 4x3 formats
|
|
// (adding Q to name makes icon quadratic)
|
|
displayedFlags () {
|
|
return this.$options.flagSet
|
|
}
|
|
}
|
|
}
|
|
</script>
|