Svelte + Tailwindcss 아바타 구성 요소
14393 단어 tailwindcsssveltefouitawebdev
설치
$npm i @fouita/avatar -D
간단한 사용법
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12 />
<Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12 />
<Avatar size=12 />
<Avatar size=12 bg="red-600" >BA</Avatar>
</div>
아바타 그룹
다음과 같이 그룹에서 아바타를 사용하십시오.
<script>
import Avatar from '@fouita/avatar'
const base_url = "https://randomuser.me/api/portraits/"
let imgs = [
{src: 'women/13.jpg', name: 'w_13'},
{src: 'women/25.jpg', name: 'w_25'},
{src: 'men/34.jpg', name: 'men_34'},
{src: 'women/35.jpg', name: 'w_35'},
{src: 'men/48.jpg', name: 'men_48'}
]
let klass = '-ml-4 rounded-full border-r-2 border-white'
</script>
<div class="flex flex-row-reverse justify-center">
<Avatar class="{klass} text-base text-white" size="10" bg="gray-500" >
+5
</Avatar>
{#each imgs as img}
<Avatar class="{klass}" size="10" src={base_url+img.src} alt={img.name} bg="white" />
{/each}
</div>
아바타 배지
아바타에 사용자 정의 색상 배지 추가
<script>
import Avatar from '@fouita/avatar'
let badge_class = 'rounded-full w-3 h-3 absolute bottom-0 right-0'
</script>
<div class="flex justify-center">
<Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12>
<div slot="badge" class="bg-green-500 {badge_class}" key="k2">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12>
<div slot="badge" class="bg-red-500 {badge_class}" key="k3">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/75.jpg" size=12>
<div slot="badge" class="bg-orange-500 {badge_class}" key="k4">
</div>
</Avatar>
</div>
아바타 라운드
아바타 커스텀 라운드 예시
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar class="rounded-none text-white text-xl" />
<Avatar class="rounded-sm text-white text-xl" />
<Avatar class="rounded text-white text-xl" />
<Avatar class="rounded-lg text-white text-xl" />
<Avatar class="rounded-full text-white text-xl" />
</div>
아바타 크기
순풍 크기 척도를 기반으로 아바타의 사용자 지정 크기
<script>
import Avatar from '@fouita/avatar'
let src = 'https://randomuser.me/api/portraits/women/68.jpg'
</script>
<div class="flex justify-center" key="k1">
<Avatar size="8" {src} />
<Avatar size="10" {src} />
<Avatar size="12" {src} />
<Avatar size="16" {src} />
<Avatar size="20" {src} />
</div>
맞춤 텍스트, 아이콘
사용할 수 있는 맞춤 텍스트/아이콘
<script>
import Avatar from '@fouita/avatar'
import {MailIcon} from 'svelte-feather-icons'
</script>
<div class="flex justify-center">
<Avatar alt="User Name" size=12/>
<Avatar alt="First Last" bg="green-500" size=12 />
<Avatar bg="purple-500" size=12>
XY
</Avatar>
<Avatar bg="pink-500" size=12>
<MailIcon class="w-8" />
</Avatar>
</div>
소스 코드
fouita avatar에서 소스 코드를 찾을 수 있습니다.
Reference
이 문제에 관하여(Svelte + Tailwindcss 아바타 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$npm i @fouita/avatar -D
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12 />
<Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12 />
<Avatar size=12 />
<Avatar size=12 bg="red-600" >BA</Avatar>
</div>
아바타 그룹
다음과 같이 그룹에서 아바타를 사용하십시오.
<script>
import Avatar from '@fouita/avatar'
const base_url = "https://randomuser.me/api/portraits/"
let imgs = [
{src: 'women/13.jpg', name: 'w_13'},
{src: 'women/25.jpg', name: 'w_25'},
{src: 'men/34.jpg', name: 'men_34'},
{src: 'women/35.jpg', name: 'w_35'},
{src: 'men/48.jpg', name: 'men_48'}
]
let klass = '-ml-4 rounded-full border-r-2 border-white'
</script>
<div class="flex flex-row-reverse justify-center">
<Avatar class="{klass} text-base text-white" size="10" bg="gray-500" >
+5
</Avatar>
{#each imgs as img}
<Avatar class="{klass}" size="10" src={base_url+img.src} alt={img.name} bg="white" />
{/each}
</div>
아바타 배지
아바타에 사용자 정의 색상 배지 추가
<script>
import Avatar from '@fouita/avatar'
let badge_class = 'rounded-full w-3 h-3 absolute bottom-0 right-0'
</script>
<div class="flex justify-center">
<Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12>
<div slot="badge" class="bg-green-500 {badge_class}" key="k2">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12>
<div slot="badge" class="bg-red-500 {badge_class}" key="k3">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/75.jpg" size=12>
<div slot="badge" class="bg-orange-500 {badge_class}" key="k4">
</div>
</Avatar>
</div>
아바타 라운드
아바타 커스텀 라운드 예시
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar class="rounded-none text-white text-xl" />
<Avatar class="rounded-sm text-white text-xl" />
<Avatar class="rounded text-white text-xl" />
<Avatar class="rounded-lg text-white text-xl" />
<Avatar class="rounded-full text-white text-xl" />
</div>
아바타 크기
순풍 크기 척도를 기반으로 아바타의 사용자 지정 크기
<script>
import Avatar from '@fouita/avatar'
let src = 'https://randomuser.me/api/portraits/women/68.jpg'
</script>
<div class="flex justify-center" key="k1">
<Avatar size="8" {src} />
<Avatar size="10" {src} />
<Avatar size="12" {src} />
<Avatar size="16" {src} />
<Avatar size="20" {src} />
</div>
맞춤 텍스트, 아이콘
사용할 수 있는 맞춤 텍스트/아이콘
<script>
import Avatar from '@fouita/avatar'
import {MailIcon} from 'svelte-feather-icons'
</script>
<div class="flex justify-center">
<Avatar alt="User Name" size=12/>
<Avatar alt="First Last" bg="green-500" size=12 />
<Avatar bg="purple-500" size=12>
XY
</Avatar>
<Avatar bg="pink-500" size=12>
<MailIcon class="w-8" />
</Avatar>
</div>
소스 코드
fouita avatar에서 소스 코드를 찾을 수 있습니다.
Reference
이 문제에 관하여(Svelte + Tailwindcss 아바타 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
import Avatar from '@fouita/avatar'
const base_url = "https://randomuser.me/api/portraits/"
let imgs = [
{src: 'women/13.jpg', name: 'w_13'},
{src: 'women/25.jpg', name: 'w_25'},
{src: 'men/34.jpg', name: 'men_34'},
{src: 'women/35.jpg', name: 'w_35'},
{src: 'men/48.jpg', name: 'men_48'}
]
let klass = '-ml-4 rounded-full border-r-2 border-white'
</script>
<div class="flex flex-row-reverse justify-center">
<Avatar class="{klass} text-base text-white" size="10" bg="gray-500" >
+5
</Avatar>
{#each imgs as img}
<Avatar class="{klass}" size="10" src={base_url+img.src} alt={img.name} bg="white" />
{/each}
</div>
아바타에 사용자 정의 색상 배지 추가
<script>
import Avatar from '@fouita/avatar'
let badge_class = 'rounded-full w-3 h-3 absolute bottom-0 right-0'
</script>
<div class="flex justify-center">
<Avatar src="https://randomuser.me/api/portraits/men/62.jpg" size=12>
<div slot="badge" class="bg-green-500 {badge_class}" key="k2">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/68.jpg" size=12>
<div slot="badge" class="bg-red-500 {badge_class}" key="k3">
</div>
</Avatar>
<Avatar src="https://randomuser.me/api/portraits/women/75.jpg" size=12>
<div slot="badge" class="bg-orange-500 {badge_class}" key="k4">
</div>
</Avatar>
</div>
아바타 라운드
아바타 커스텀 라운드 예시
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar class="rounded-none text-white text-xl" />
<Avatar class="rounded-sm text-white text-xl" />
<Avatar class="rounded text-white text-xl" />
<Avatar class="rounded-lg text-white text-xl" />
<Avatar class="rounded-full text-white text-xl" />
</div>
아바타 크기
순풍 크기 척도를 기반으로 아바타의 사용자 지정 크기
<script>
import Avatar from '@fouita/avatar'
let src = 'https://randomuser.me/api/portraits/women/68.jpg'
</script>
<div class="flex justify-center" key="k1">
<Avatar size="8" {src} />
<Avatar size="10" {src} />
<Avatar size="12" {src} />
<Avatar size="16" {src} />
<Avatar size="20" {src} />
</div>
맞춤 텍스트, 아이콘
사용할 수 있는 맞춤 텍스트/아이콘
<script>
import Avatar from '@fouita/avatar'
import {MailIcon} from 'svelte-feather-icons'
</script>
<div class="flex justify-center">
<Avatar alt="User Name" size=12/>
<Avatar alt="First Last" bg="green-500" size=12 />
<Avatar bg="purple-500" size=12>
XY
</Avatar>
<Avatar bg="pink-500" size=12>
<MailIcon class="w-8" />
</Avatar>
</div>
소스 코드
fouita avatar에서 소스 코드를 찾을 수 있습니다.
Reference
이 문제에 관하여(Svelte + Tailwindcss 아바타 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
import Avatar from '@fouita/avatar'
</script>
<div class="flex justify-center">
<Avatar class="rounded-none text-white text-xl" />
<Avatar class="rounded-sm text-white text-xl" />
<Avatar class="rounded text-white text-xl" />
<Avatar class="rounded-lg text-white text-xl" />
<Avatar class="rounded-full text-white text-xl" />
</div>
순풍 크기 척도를 기반으로 아바타의 사용자 지정 크기
<script>
import Avatar from '@fouita/avatar'
let src = 'https://randomuser.me/api/portraits/women/68.jpg'
</script>
<div class="flex justify-center" key="k1">
<Avatar size="8" {src} />
<Avatar size="10" {src} />
<Avatar size="12" {src} />
<Avatar size="16" {src} />
<Avatar size="20" {src} />
</div>
맞춤 텍스트, 아이콘
사용할 수 있는 맞춤 텍스트/아이콘
<script>
import Avatar from '@fouita/avatar'
import {MailIcon} from 'svelte-feather-icons'
</script>
<div class="flex justify-center">
<Avatar alt="User Name" size=12/>
<Avatar alt="First Last" bg="green-500" size=12 />
<Avatar bg="purple-500" size=12>
XY
</Avatar>
<Avatar bg="pink-500" size=12>
<MailIcon class="w-8" />
</Avatar>
</div>
소스 코드
fouita avatar에서 소스 코드를 찾을 수 있습니다.
Reference
이 문제에 관하여(Svelte + Tailwindcss 아바타 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script>
import Avatar from '@fouita/avatar'
import {MailIcon} from 'svelte-feather-icons'
</script>
<div class="flex justify-center">
<Avatar alt="User Name" size=12/>
<Avatar alt="First Last" bg="green-500" size=12 />
<Avatar bg="purple-500" size=12>
XY
</Avatar>
<Avatar bg="pink-500" size=12>
<MailIcon class="w-8" />
</Avatar>
</div>
fouita avatar에서 소스 코드를 찾을 수 있습니다.
Reference
이 문제에 관하여(Svelte + Tailwindcss 아바타 구성 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/haynajjar/svelte-tailwindcss-avatar-component-33g8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)