arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 11:20:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(chip): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-30 16:45:53 +02:00
parent 2c6295d479
commit a90935b6aa
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/app/components/content/examples/chip/ChipShowExample.vue
View File

@@ -1,19 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
const statuses = ['online', 'offline', 'busy', 'away'] const statuses = ['online', 'away', 'busy', 'offline']
const status = ref(statuses[0]) const status = ref(statuses[0])
const color = computed(() => ({ const color = computed(() => ({
online: 'green', online: 'green',
offline: 'gray', away: 'amber',
busy: 'red', busy: 'red',
away: 'amber' offline: 'gray'
})[status.value] as any) })[status.value] as any)
const show = computed(() => status.value !== 'offline') const show = computed(() => status.value !== 'offline')
// Note: This is for demonstration purposes only. Don't do this at home. // Note: This is for demonstration purposes only. Don't do this at home.
onMounted(() => { onMounted(() => {
setInterval(() => { setInterval(() => {
status.value = statuses[Math.floor(Math.random() * statuses.length)] status.value = statuses[(statuses.indexOf(status.value) + 1) % statuses.length]
}, 1000) }, 1000)
}) })
</script> </script>

2
docs/content/3.components/chip.md
View File

@@ -132,7 +132,7 @@ You can control the visibility of the Chip using the `show` prop.
:component-example{name="chip-show-example"} :component-example{name="chip-show-example"}
::note ::note
In this example, the Chip has a color per status and is only displayed when the status is not `offline`. In this example, the Chip has a color per status and is displayed when the status is not `offline`.
:: ::
## API ## API