203 lines
8.2 KiB
Vue
203 lines
8.2 KiB
Vue
<script setup>
|
|
const volume = ref(25);
|
|
const airplaneMode = ref(false);
|
|
const toggle = ref(false);
|
|
const group = ref('center');
|
|
const burgerIngredients = ref(['tomato', 'cheese']);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="presentation">
|
|
<div class="container">
|
|
<button class="vl-button">
|
|
Button
|
|
</button>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<Transition>
|
|
<VlDropdown>
|
|
<button>
|
|
Button
|
|
</button>
|
|
<button>
|
|
Button
|
|
</button>
|
|
<button>
|
|
Button
|
|
</button>
|
|
</VlDropdown>
|
|
</Transition>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div>
|
|
{{ group }}
|
|
<VlToggleGroup v-model="group" type="single" :defaultValue="group" aria-label="Text alignment">
|
|
<VlToggleGroupItem aria-label="Left aligned" value="left">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h10M4 18h14" />
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
|
|
<VlToggleGroupItem aria-label="Center aligned" value="center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M8 12h8M6 18h12" />
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
|
|
<VlToggleGroupItem aria-label="Right aligned" value="right">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16m-10 6h10M6 18h14" />
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
</VlToggleGroup>
|
|
</div>
|
|
<div>
|
|
{{ burgerIngredients }}
|
|
<VlToggleGroup v-model="burgerIngredients" type="multiple" :defaultValue="burgerIngredients" aria-label="Burger ingredients">
|
|
<VlToggleGroupItem aria-label="Cheese" value="cheese">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
|
|
<path d="M4.519 20.008L21 20v-3.5a2 2 0 1 1 0-4V9H4.278" />
|
|
<path
|
|
d="m21 9l-9.385-4.992c-2.512.12-4.758 1.42-6.327 3.425C3.865 9.253 3 11.654 3 14.287c0 2.117.56 4.085 1.519 5.721M15 13v.01M8 13v.01M11 16v.01" />
|
|
</g>
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
|
|
<VlToggleGroupItem aria-label="Tomato" value="tomato">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 48 48">
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
|
|
<path
|
|
d="M24 44c11.046 0 20-7.387 20-16.5c0-6.442-4.475-11.799-11-14.516L29.5 14.5L30 20l-6.5-2l-6.5 2v-5.5l-3-1.516C8.022 15.837 4 21.393 4 27.5C4 36.613 12.954 44 24 44Z" />
|
|
<path
|
|
d="m23.5 4l3.809 5.117L36 9.91l-6.337 4.573L31.5 21l-8-3l-8 3l1.837-6.517L11 9.91l8.691-.793L23.5 4Z" />
|
|
</g>
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
|
|
<VlToggleGroupItem aria-label="Onions" value="onion">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32">
|
|
<path fill="currentColor"
|
|
d="M12.74 2.458c0-1.333 1.658-1.981 2.553-.959l1.182 1.354L17.657 1.5c.895-1.023 2.553-.375 2.553.958v1.83c0 .738.44 1.405 1.136 1.712c4.464 1.892 7.604 6.325 7.604 11.488c0 6.076-4.349 11.146-10.11 12.25v.01c0 .69-.56 1.25-1.25 1.25h-2.16c-.69 0-1.25-.56-1.25-1.25v-.005C8.458 28.632 4 23.438 4 17.478c0-5.166 3.143-9.589 7.608-11.48a1.86 1.86 0 0 0 1.132-1.7v-1.84Zm2 1.449v.39a3.86 3.86 0 0 1-2.346 3.54l-.004.002c-.184.077-.364.16-.542.248c-1.96 2.085-3.118 5.341-3.118 8.84c0 5.31 2.645 9.753 6.153 10.805c-1.346-2.014-2.063-6.514-2.063-10.814c0-3.76.5-7.21 1.37-9.44l.75.29c-.82 2.11-1.31 5.53-1.31 9.15c0 3.03.33 5.88.94 8.02c.552 1.949 1.2 2.82 1.69 3.022c.147.003.295.003.441 0c.489-.203 1.137-1.074 1.689-3.022c.6-2.14.94-4.98.94-8.02c0-3.61-.49-7.03-1.31-9.15l.75-.29c.87 2.24 1.37 5.68 1.37 9.44c-.007 4.3-.72 8.801-2.064 10.814c3.508-1.05 6.154-5.494 6.154-10.804c0-3.495-1.155-6.746-3.109-8.832a10.358 10.358 0 0 0-.56-.257l-.012-.005a3.874 3.874 0 0 1-2.339-3.546v-.381l-.635.726a1.456 1.456 0 0 1-2.186.016l-.006-.007l-.643-.735ZM9.67 9.52A10.437 10.437 0 0 0 6 17.478c0 3.797 2.18 7.24 5.335 9.08c-.365-.372-.71-.786-1.035-1.24c-1.61-2.25-2.49-5.23-2.49-8.39c0-2.728.67-5.326 1.86-7.407Zm11.817 17.167a10.474 10.474 0 0 0 5.463-9.2c0-3.176-1.416-6.025-3.649-7.947c1.184 2.078 1.849 4.668 1.849 7.387c0 3.16-.88 6.14-2.49 8.39a10.42 10.42 0 0 1-1.173 1.37Z" />
|
|
</svg>
|
|
</VlToggleGroupItem>
|
|
</VlToggleGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div style="display: flex; gap: 6px 0; flex-direction: column;">
|
|
<div style="display: flex;">
|
|
<label for="airplane-mode" style=" margin-right: 8px;">Airplane mode</label>
|
|
<VlToggleSwitch :checked="airplaneMode" v-model="airplaneMode" id="airplane-mode" />
|
|
</div>
|
|
<div style="display: flex;">
|
|
<label for="wifi" style=" margin-right: 8px;">Wifi</label>
|
|
<VlToggleSwitch :checked="!airplaneMode" :disabled="(airplaneMode) ? true : false" id="wifi" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div>
|
|
<label for="Volume">Volume: {{ volume }}</label>
|
|
<VlSlider :value="volume" v-model="volume" id="Volume" :step="1" :max="100" />
|
|
</div>
|
|
<VlSlider label="Volume" :step="1" :min="0" :max="10" />
|
|
<VlSlider label="Volume" :value="1" :min="0" :max="9" :step="3" />
|
|
</div>
|
|
|
|
<div class="container">
|
|
<VlAccordion type="single" defaultValue="item-1">
|
|
<VlAccordionItem value="item-1">
|
|
<VlAccordionTrigger>
|
|
Section 1
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m6 9l6 6l6-6" />
|
|
</svg>
|
|
</VlAccordionTrigger>
|
|
<VlAccordionContent>
|
|
Content for section 1
|
|
</VlAccordionContent>
|
|
</VlAccordionItem>
|
|
<VlAccordionItem value="item-2">
|
|
<VlAccordionTrigger>
|
|
Section 2
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m6 9l6 6l6-6" />
|
|
</svg>
|
|
</VlAccordionTrigger>
|
|
<VlAccordionContent>
|
|
Content for section 2
|
|
</VlAccordionContent>
|
|
</VlAccordionItem>
|
|
<VlAccordionItem value="item-3">
|
|
<VlAccordionTrigger>
|
|
Section 3
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m6 9l6 6l6-6" />
|
|
</svg>
|
|
</VlAccordionTrigger>
|
|
<VlAccordionContent>
|
|
Content for section 3
|
|
</VlAccordionContent>
|
|
</VlAccordionItem>
|
|
<VlAccordionItem value="item-4">
|
|
<VlAccordionTrigger>
|
|
Section 4
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m6 9l6 6l6-6" />
|
|
</svg>
|
|
</VlAccordionTrigger>
|
|
<VlAccordionContent>
|
|
Content for section 4
|
|
</VlAccordionContent>
|
|
</VlAccordionItem>
|
|
</VlAccordion>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div>
|
|
{{ toggle }}
|
|
<VlToggle v-model="toggle" aria-label="Toggle italic">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M11 5h6M7 19h6m1-14l-4 14" />
|
|
</svg>
|
|
</VlToggle>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.presentation {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: calc(100vh - 24px);
|
|
}
|
|
|
|
.container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: grid;
|
|
place-items: center;
|
|
width: 420px;
|
|
height: 275px;
|
|
background: #121314;
|
|
border-radius: 12px;
|
|
border: 1px solid #232425;
|
|
box-shadow: 0px 0px 12px #00000012;
|
|
}</style> |