158 lines
3.3 KiB
Vue
158 lines
3.3 KiB
Vue
<script setup>
|
|
import * as demoCode from '@/views/demos/components/chip/demoCodeChip'
|
|
</script>
|
|
|
|
<template>
|
|
<VRow class="match-height">
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Color -->
|
|
<AppCardCode
|
|
title="Color"
|
|
:code="demoCode.color"
|
|
>
|
|
<p>Use <code>color</code> prop to change the background color of chips.</p>
|
|
|
|
<DemoChipColor />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Elevated -->
|
|
<AppCardCode
|
|
title="Elevated"
|
|
:code="demoCode.elevated"
|
|
>
|
|
<p>Use <code>elevated</code> variant option to create filled chips.</p>
|
|
|
|
<DemoChipElevated />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Outlined -->
|
|
<AppCardCode
|
|
title="Outlined"
|
|
:code="demoCode.outlined"
|
|
>
|
|
<p>Use <code>outlined</code> variant option to create outline border chips.</p>
|
|
|
|
<DemoChipOutlined />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Label -->
|
|
<AppCardCode
|
|
title="Label"
|
|
:code="demoCode.label"
|
|
>
|
|
<p>Label chips use the <code>v-card</code> border-radius. Use <code>label</code> prop to create label chips.</p>
|
|
|
|
<DemoChipLabel />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Closable -->
|
|
<AppCardCode
|
|
title="Closable"
|
|
:code="demoCode.closable"
|
|
>
|
|
<p>Closable chips can be controlled with a <code>v-model</code>.</p>
|
|
|
|
<DemoChipClosable />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Chip With Icon -->
|
|
<AppCardCode
|
|
title="With Icon"
|
|
:code="demoCode.withIcon"
|
|
>
|
|
<p>Chips can use text or any icon available in the Material Icons font library.</p>
|
|
|
|
<DemoChipWithIcon />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Avatar -->
|
|
<AppCardCode
|
|
title="With Avatar"
|
|
:code="demoCode.withAvatar"
|
|
>
|
|
<p>Use <code>pill</code> prop to remove the <code>v-avatar</code> padding.</p>
|
|
|
|
<DemoChipWithAvatar />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Sizes -->
|
|
<AppCardCode
|
|
title="Sizes"
|
|
:code="demoCode.sizes"
|
|
>
|
|
<p>The <code>v-chip</code> component can have various sizes from <code>x-small</code> to <code>x-large</code>.</p>
|
|
|
|
<DemoChipSizes />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 In Selects -->
|
|
<AppCardCode
|
|
title="In Selects"
|
|
:code="demoCode.inSelects"
|
|
>
|
|
<p>Selects can use <code>chips</code> to display the selected data. Try adding your own tags below.</p>
|
|
|
|
<DemoChipInSelects />
|
|
</AppCardCode>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<!-- 👉 Expandable -->
|
|
<AppCardCode
|
|
title="Expandable"
|
|
:code="demoCode.expandable"
|
|
>
|
|
<p>Chips can be combined with <code>v-menu</code> to enable a specific set of actions for a chip.</p>
|
|
|
|
<DemoChipExpandable />
|
|
</AppCardCode>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|