Skip to content

Commit a44fa94

Browse files
shinokadashinokada
committed
docs: avatar page
1 parent cc78f6a commit a44fa94

File tree

1 file changed

+19
-132
lines changed

1 file changed

+19
-132
lines changed

‎src/routes/docs/components/avatar.md‎

Lines changed: 19 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -31,44 +31,19 @@ Import `Avatar`. If you are using the user dropdown, import `Dropdown`, `Dropdow
3131
Use this example to create a circle and rounded avatar on an image element.
3232

3333
```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
34-
<script>
35-
import { Avatar } from "flowbite-svelte";
36-
</script>
37-
38-
<div class="flex space-x-4 rtl:space-x-reverse">
39-
<Avatar src="/images/profile-picture-2.webp" />
40-
<Avatar src="/images/profile-picture-2.webp" cornerStyle="rounded" />
41-
</div>
34+
{@include Default.svelte}
4235
```
4336

4437
## Icon avatar
4538

4639
```svelte example class="flex justify-center" hideResponsiveButtons
47-
<script>
48-
import { Avatar } from "flowbite-svelte";
49-
import { BugOutline } from "flowbite-svelte-icons";
50-
</script>
51-
52-
<Avatar>
53-
<BugOutline />
54-
</Avatar>
40+
{@include Icon.svelte}
5541
```
5642

5743
## Custom dot
5844

5945
```svelte example class="flex justify-center" hideResponsiveButtons
60-
<script>
61-
import { Avatar, Indicator } from "flowbite-svelte";
62-
import { BugOutline } from "flowbite-svelte-icons";
63-
</script>
64-
65-
<Avatar src="/images/profile-picture-3.webp">
66-
{#snippet indicator()}
67-
<Indicator color="gray" border size="xl" placement="top-right">
68-
<BugOutline />
69-
</Indicator>
70-
{/snippet}
71-
</Avatar>
46+
{@include CustomDot.svelte}
7247
```
7348

7449
## Bordered
@@ -78,140 +53,63 @@ You can apply a border around the avatar component.
7853
You can use the `ring-&#123;color&#125;` class from Tailwind CSS to modify ring color.
7954

8055
```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
81-
<script>
82-
import { Avatar } from "flowbite-svelte";
83-
</script>
84-
85-
<Avatar src="/images/profile-picture-2.webp" border />
86-
<Avatar src="/images/profile-picture-2.webp" border class="ring-red-400 dark:ring-red-300" />
56+
{@include Bordered.svelte}
8757
```
8858

8959
## Placeholder
9060

9161
When there is no custom image available a placeholder is displayed.
9262

9363
```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
94-
<script>
95-
import { Avatar } from "flowbite-svelte";
96-
</script>
97-
98-
<Avatar />
99-
<Avatar cornerStyle="rounded" />
100-
<Avatar border />
101-
<Avatar cornerStyle="rounded" border />
64+
{@include Placeholder.svelte}
10265
```
10366

10467
## Placeholder initials
10568

10669
This example can be used to show the initials of the user’s first and last name as a placeholder when no profile picture is available.
10770

10871
```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
109-
<script>
110-
import { Avatar } from "flowbite-svelte";
111-
</script>
112-
113-
<Avatar>JL</Avatar>
72+
{@include PlaceholderInitial.svelte}
11473
```
11574

11675
## Avatar tooltip
11776

11877
Use this example to show a tooltip when hovering over the avatar.
11978

12079
```svelte example class="flex justify-center gap-4" hideResponsiveButtons
121-
<script>
122-
import { Avatar, Tooltip } from "flowbite-svelte";
123-
</script>
124-
125-
<Avatar data-name="Jese Leos" src="/images/profile-picture-1.webp" />
126-
<Tooltip>Jese Leos</Tooltip>
127-
<Avatar data-name="Robert Gouth" src="/images/profile-picture-2.webp" />
128-
<Tooltip>Robert Gouth</Tooltip>
129-
<Avatar data-name="Bonnie Green" src="/images/profile-picture-3.webp" />
130-
<Tooltip>Bonnie Green</Tooltip>
80+
{@include AvatarWithTooltip.svelte}
13181
```
13282

13383
## Dot indicator
13484

13585
Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
13686

13787
```svelte example class="flex justify-center gap-4" hideResponsiveButtons
138-
<script>
139-
import { Avatar } from "flowbite-svelte";
140-
</script>
141-
142-
<Avatar src="/images/profile-picture-3.webp" dot={{ color: "red" }} />
143-
<Avatar src="/images/profile-picture-3.webp" dot={{ placement: "top-right", color: "red" }} cornerStyle="rounded" />
144-
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right", color: "green" }} />
145-
<Avatar src="/images/profile-picture-5.webp" dot={{ placement: "bottom-right" }} cornerStyle="rounded" />
146-
147-
<Avatar dot={{}} />
88+
{@include DotIndicator.svelte}
14889
```
14990

15091
## Stacked
15192

15293
Use this example if you want to stack a group of users by overlapping the avatar components.
15394

15495
```svelte example class="flex flex-col justify-center gap-4" hideScript hideResponsiveButtons
155-
<script>
156-
import { Avatar } from "flowbite-svelte";
157-
</script>
158-
159-
<div class="mb-5 flex">
160-
<Avatar src="/images/profile-picture-1.webp" stacked />
161-
<Avatar src="/images/profile-picture-2.webp" stacked />
162-
<Avatar src="/images/profile-picture-3.webp" stacked />
163-
<Avatar stacked />
164-
</div>
165-
<div class="flex">
166-
<Avatar src="/images/profile-picture-1.webp" stacked />
167-
<Avatar src="/images/profile-picture-2.webp" stacked />
168-
<Avatar src="/images/profile-picture-3.webp" stacked />
169-
<Avatar stacked href="/" class="bg-gray-700 text-sm text-white hover:bg-gray-600">+99</Avatar>
170-
</div>
96+
{@include Stacked.svelte}
17197
```
17298

17399
## Avatar text
174100

175101
This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date.
176102

177103
```svelte example class="flex justify-center gap-4" hideScript hideResponsiveButtons
178-
<script>
179-
import { Avatar } from "flowbite-svelte";
180-
</script>
181-
182-
<div class="flex items-center space-x-4 rtl:space-x-reverse">
183-
<Avatar src="/images/profile-picture-1.webp" cornerStyle="rounded" />
184-
<div class="space-y-1 font-medium dark:text-white">
185-
<div>Jese Leos</div>
186-
<div class="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div>
187-
</div>
188-
</div>
104+
{@include AvatarText.svelte}
189105
```
190106

191107
## User dropdown
192108

193109
Use this example if you want to show a dropdown menu when clicking on the avatar component.
194110

195111
```svelte example class="flex justify-center h-96" hideResponsiveButtons
196-
<script>
197-
import { Avatar, Dropdown, DropdownHeader, DropdownItem, DropdownGroup } from "flowbite-svelte";
198-
</script>
199-
200-
<Avatar id="user-drop" src="/images/profile-picture-3.webp" class="cursor-pointer" dot={{ color: "green" }} />
201-
<Dropdown triggeredBy="#user-drop">
202-
<DropdownHeader>
203-
<span class="block text-sm">Bonnie Green</span>
204-
<span class="block truncate text-sm font-medium">[email protected]</span>
205-
</DropdownHeader>
206-
<DropdownGroup>
207-
<DropdownItem>Dashboard</DropdownItem>
208-
<DropdownItem>Settings</DropdownItem>
209-
<DropdownItem>Earnings</DropdownItem>
210-
</DropdownGroup>
211-
<DropdownGroup>
212-
<DropdownItem>Sign out</DropdownItem>
213-
</DropdownGroup>
214-
</Dropdown>
112+
{@include UserDropdown.svelte}
215113
```
216114

217115
## Sizes
@@ -220,27 +118,16 @@ You can set `size` property to preset values of `xs | sm | md | lg | xl`. Custom
220118

221119
Preset values are equivalents of:
222120

223-
| Size | | Classes |
224-
| :--: | --- | :---------: |
225-
| xs | | `w-6 h-6` |
226-
| sm | | `w-8 h-8` |
227-
| md | | `w-10 h-10` |
228-
| lg | | `w-20 h-20` |
229-
| xl | | `w-36 h-36` |
121+
| Size | | Classes |
122+
| :---: | --- | :---------: |
123+
| xs | | `w-6 h-6` |
124+
| sm | | `w-8 h-8` |
125+
| md | | `w-10 h-10` |
126+
| lg | | `w-20 h-20` |
127+
| xl | | `w-36 h-36` |
230128

231129
```svelte example class="flex flex-col gap-4" hideScript hideResponsiveButtons
232-
<script>
233-
import { Avatar } from "flowbite-svelte";
234-
</script>
235-
236-
<div class=" flex flex-wrap justify-center space-x-4 rtl:space-x-reverse">
237-
<Avatar src="/images/profile-picture-3.webp" size="xs" />
238-
<Avatar src="/images/profile-picture-3.webp" size="sm" />
239-
<Avatar src="/images/profile-picture-3.webp" size="md" />
240-
<Avatar src="/images/profile-picture-3.webp" size="lg" />
241-
<Avatar src="/images/profile-picture-3.webp" size="xl" />
242-
<Avatar src="/images/profile-picture-3.webp" class="h-28 w-28" />
243-
</div>
130+
{@include Sizes.svelte}
244131
```
245132

246133
## Component data

0 commit comments

Comments
 (0)