eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Avatar, Badge, Checkbox, Chips, Pagination components (#10)

Browse Source
This commit is contained in:
Geometrically
2023-03-01 17:31:48 -07:00
committed by GitHub
parent 76c0432f96
commit d5785e87e8
32 changed files with 1112 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/components/avatar.md Normal file
View File

@@ -0,0 +1,16 @@
# Icons
<DemoContainer class="columns">
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="md" src="https://cdn.modrinth.com/data/ssUbhMkL/icon.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
</DemoContainer>
```vue
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="sm" />
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

15
docs/components/badge.md Normal file
View File

@@ -0,0 +1,15 @@
# Badge
<DemoContainer>
<Badge color="red" type="Tomato" />
<Badge color="orange" type="Squash" />
<Badge color="green" type="Lettuce" />
<Badge type="Onion" />
</DemoContainer>
```vue
<Badge color="red" type="Tomato" />
<Badge color="orange" type="Squash" />
<Badge color="green" type="Lettuce" />
<Badge type="Onion" />
```

8
docs/components/button.md
View File

@@ -1,13 +1,9 @@
# Button
<DemoContainer>
<Button :action="() => {}" >
Test Button
</Button>
<Button>Test Button</Button>
</DemoContainer>
```vue
<Button :action="() => {}" >
Test Button
</Button>
<Button>Test Button</Button>
```

8
docs/components/card.md
View File

@@ -1,9 +1,9 @@
# Card
<DemoContainer style="background-color: var(--color-bg)">
<Card>
This is a card!
</Card>
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
<Card>
This is a card!
</Card>
</DemoContainer>
```vue

21
docs/components/checkbox.md Normal file
View File

@@ -0,0 +1,21 @@
# Checkbox
<script setup>
import { ref } from "vue";
const value = ref(false)
</script>
<DemoContainer>
<Checkbox v-model="value">Test</Checkbox>
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref(false)
</script>
<Checkbox v-model="value">Test</Checkbox>
```

20
docs/components/chips.md Normal file
View File

@@ -0,0 +1,20 @@
# Chips
<script setup>
import { ref } from "vue";
const value = ref('option 1')
</script>
<DemoContainer>
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const value = ref('option 1')
</script>
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
```

20
docs/components/icons.md
View File

@@ -1,9 +1,27 @@
# Icons
Omorphia includes a set of icons. You can view the available icons in the `~/assets/icons/*` folder of this repository.
<DemoContainer>
<CheckIcon />
<CheckIcon />
<UnknownIcon />
<SettingsIcon />
<TagIcon />
<SendIcon />
<LogOutIcon />
<HeartHandshakeIcon />
<EyeOffIcon />
<ClipboardCopyIcon />
</DemoContainer>
```vue
<CheckIcon />
<UnknownIcon />
<SettingsIcon />
<TagIcon />
<SendIcon />
<LogOutIcon />
<HeartHandshakeIcon />
<EyeOffIcon />
<ClipboardCopyIcon />
```

28
docs/components/pagination.md Normal file
View File

@@ -0,0 +1,28 @@
# Pagination
<script setup>
import { ref } from "vue";
const currentPage = ref(1)
function switchPage(page) {
currentPage.value = page
}
</script>
<DemoContainer style="background-color: var(--color-bg)">
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
</DemoContainer>
```vue
<script setup>
import { ref } from "vue";
const currentPage = ref(1)
function switchPage(page) {
currentPage.value = page
}
</script>
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
```