Border
Border (테두리)
출처: 문서
본문
Border
버튼, 카드, 팝업 등 컴포넌트에서 사용할 수 있는 테두리를 표준화해요.
테두리 스타일
선택할 수 있는 테두리 스타일은 몇 가지가 있어요.
| Dashed | 2px |
Radius (반올림)
선택할 수 있는 radius 스타일은 몇 가지가 있어요.
- border-radius: "0px" (No Radius)
- Small Radius
- Large Radius
- Round Radius
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'
const radiusGroup = ref([
{
name: 'No Radius',
type: '',
},
{
name: 'Small Radius',
type: 'small',
},
{
name: 'Large Radius',
type: 'base',
},
{
name: 'Round Radius',
type: 'round',
},
])
.demo-radius .title {
color: var(--el-text-color-regular);
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value {
color: var(--el-text-color-primary);
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
height: 40px;
width: 70%;
border: 1px solid var(--el-border-color);
border-radius: 0;
margin-top: 20px;
}
Shadow (그림자)
선택할 수 있는 shadow 스타일은 몇 가지가 있어요.
- Basic Shadow —
--el-box-shadow - Light Shadow —
--el-box-shadow-light - Lighter Shadow —
--el-box-shadow-lighter - Dark Shadow —
--el-box-shadow-dark
import { ref } from 'vue'
const shadowGroup = ref([
{
name: 'Basic Shadow',
type: '',
},
{
name: 'Light Shadow',
type: 'light',
},
{
name: 'Lighter Shadow',
type: 'lighter',
},
{
name: 'Dark Shadow',
type: 'dark',
},
])
const getCssVarName = (type: string) => {
return `--el-box-shadow${type ? '-' : ''}${type}`
}