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

Update docs examples + Add Select component + Add Card, Base, Title classes

Browse Source
This commit is contained in:
venashial
2022-03-29 00:44:23 -07:00
parent 8c5bf55b51
commit 98baab4d03
41 changed files with 1374 additions and 849 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/components/Avatar.md
View File

@@ -1,14 +1,13 @@
Avatars are used for project icons and user profile pictures. Low resolution images are rendered pixelated to preserve pixel art.
```svelte example
<script lang="ts">
import Avatar from "$lib/components/Avatar.svelte";
import Example from "../_internal/components/Example.svelte"
import Avatar from "omorphia/components/Avatar.svelte";
</script>
<Example code={`<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
<Avatar size="lg" circle src="https://avatars3.githubusercontent.com/u/44736536?v=4" />
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
<Avatar size="md" src="https://staging-cdn.modrinth.com/data/d1SqMrzw/9a39b0c80a49976b0c04053682708374e18105fe.png" />
<Avatar size="sm" />
<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />`}>
<Avatar src="https://avatars3.githubusercontent.com/u/44736536?v=4" size="lg" circle />
<Avatar src="https://cdn.modrinth.com/data/AANobbMI/icon.png" size="md" />
<Avatar size="sm" />
<Avatar src="https://avatars1.githubusercontent.com/u/6166773?v=4" size="xs" circle />
</Example>
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
```

10
src/routes/components/Badge.md
View File

@@ -1,14 +1,10 @@
```svelte example
<script lang="ts">
import Badge from "$lib/components/Badge.svelte";
import Example from "../_internal/components/Example.svelte"
import Badge from "omorphia/components/Badge.svelte";
</script>
<Example code={`<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />`}>
<Badge color="red" label="Tomato" />
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />
</Example>
```

10
src/routes/components/Button.md
View File

@@ -1,14 +1,10 @@
```svelte example
<script lang="ts">
import Button from "$lib/components/Button.svelte";
import Example from "../_internal/components/Example.svelte"
import Button from "omorphia/components/Button.svelte";
</script>
<Example code={`<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>
<Button size="lg" color="danger">Big part</Button>
<Button disabled>Nice try</Button>`}>
<Button>Eat cake</Button>
<Button size="sm" color="primary">Small piece</Button>
<Button size="lg" color="danger">Big part</Button>
<Button disabled>Nice try</Button>
</Example>
```

51
src/routes/components/Chips.md
View File

@@ -1,13 +1,10 @@
<script lang="ts">
import Chips from "$lib/components/Chips.svelte";
import Example from "../_internal/components/Example.svelte"
let foo = 'modpack'
</script>
### Simple example
<Example code={`
```svelte example
<script lang="ts">
import Chips from "omorphia/components/Chips.svelte";
</script>
<Chips options={[
{
label: 'One',
@@ -18,25 +15,16 @@
value: 'two'
}]}
/>
`}>
<Chips options={[
{
label: 'One',
value: 'one'
},
{
label: 'Two',
value: 'two'
}]}
/>
</Example>
```
### Force an option to be selected with `neverEmpty`
<Example code={`
<script>
let foo = 'modpack';
```svelte example
<script lang="ts">
import Chips from "omorphia/components/Chips.svelte";
let foo = 'modpack'
</script>
<Chips neverEmpty bind:value={foo} options={[
@@ -53,19 +41,4 @@ value: 'two'
value: 'world'
}]}
/>
`}>
<Chips neverEmpty bind:value={foo} options={[
{
label: 'Mod',
value: 'mod'
},
{
label: 'Modpack',
value: 'modpack'
},
{
label: 'World',
value: 'world'
}]}
/>
</Example>
```

8
src/routes/components/Link.md
View File

@@ -1,8 +0,0 @@
<script lang="ts">
import Link from "$lib/components/Link.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
<Example code={`<Link href="#clicked">Click for fun</Link>`}>
<Link href="#clicked">Click for fun</Link>
</Example>

32
src/routes/components/NavRow.md
View File

@@ -1,11 +1,10 @@
<script lang="ts">
import NavRow from "$lib/components/NavRow.svelte";
import Example from "../_internal/components/Example.svelte"
</script>
`NavRow` works well for most horizontal navigation with less than 10 items. It can be used with paths & query params, and supports specific path level (depths).
<Example code={`
```svelte example
<script lang="ts">
import NavRow from "omorphia/components/NavRow.svelte";
</script>
<NavRow
level={1}
links={[
@@ -24,23 +23,4 @@
]}>
Click for fun
</NavRow>
`}>
<NavRow
level={1}
links={[
{
href: '/Button',
label: 'Button'
},
{
href: '/Link',
label: 'Link'
},
{
href: '/NavRow',
label: 'NavRow'
}
]}>
Click for fun
</NavRow>
</Example>
```

15
src/routes/components/Pagination.md
View File

@@ -1,10 +1,9 @@
<script lang="ts">
import Pagination from "$lib/components/Pagination.svelte"
import Example from "../_internal/components/Example.svelte"
</script>
Use pagination to show a set of page numbers and navigation directions to move through paginated data.
<Example code={`<Pagination page={20} count={50} />`} background="transparent">
<Pagination page={20} count={50} />
</Example>
```svelte example
<script lang="ts">
import Pagination from "omorphia/components/Pagination.svelte"
</script>
<Pagination page={20} count={50} />
```

19
src/routes/components/Select.md Normal file
View File

@@ -0,0 +1,19 @@
```svelte example
<script lang="ts">
import Select from "omorphia/components/Select.svelte";
let sortMethod = "downloads"
</script>
<Select
color="raised"
options={[
{ value: "", label: "Relevance" },
{ value: "downloads", label: "Downloads" },
{ value: "follows", label: "Followers" },
{ value: "newest", label: "Recently created" },
{ value: "updated", label: "Recently updated" },
]}
bind:value={sortMethod}
/>
```