logo-icon
STWUI

Post

Joe Montana

Sep 11, 22, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		}
	];
   let likes = [];
   let comments = [];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Joe Montana

Sep 10, 22, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
post-1
2
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		},
      {
			id: '2',
			src: 'image.png'
		},
	];
   let likes = ['1', '2'];
   let comments = [];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Joe Montana

Aug 3, 22, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
post-2
post-3
2
2 Comments
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		},
      {
			id: '2',
			src: 'image.png'
		},
      {
			id: '3',
			src: 'image.png'
		},
	];
   let likes = ['1', '2'];
   let comments = ['1', '2'];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Joe Montana

Sep 11, 21, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
post-2
post-3
post-4
2
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		},
      {
			id: '2',
			src: 'image.png'
		},
      {
			id: '3',
			src: 'image.png'
		},
      {
			id: '4',
			src: 'image.png'
		},
	];
   let likes = ['1', '2'];
   let comments = [];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Joe Montana

Sep 11, 22, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
post-2
post-3
1+
post-4
2 Comments
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		},
      {
			id: '2',
			src: 'image.png'
		},
      {
			id: '3',
			src: 'image.png'
		},
      {
			id: '4',
			src: 'image.png'
		},
      {
			id: '5',
			src: 'image.png'
		},
	];
   let likes = [];
   let comments = ['1', '2'];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Joe Montana

Sep 11, 22, 12:00 AM

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
post-1
post-2
post-3
21+
post-4
2 Comments
Like
Comment
Share

svelte 
<script lang="ts">
   import { Post } from 'stwui';

	const thumb_up = "svg-path";
	const comment = "svg-path";
	const share = "svg-path";

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
   let images: CarouselSlide[] = [
		{
			id: '1',
			src: 'image.png'
		},
      {
			id: '2',
			src: 'image.png'
		},
      {
			id: '3',
			src: 'image.png'
		},
      {
			id: '4',
			src: 'image.png'
		},
      {
			id: '5',
			src: 'image.png'
		},
      {
			id: '6',
			src: 'image.png'
		},
	];
   let likes = [];
   let comments = ['1', '2'];
</script>

<Post>
   <Post.Header slot="header">
      <Post.Header.Avatar slot="avatar" src={avatar} />
      <Post.Header.Creator slot="creator">{creator}</Post.Header.Creator>
      <Post.Header.Created slot="created">{formatDate(date)}</Post.Header.Created>
   </Post.Header>

   <Post.Content slot="content">
      {@html content}
   </Post.Content>

   <Post.Images slot="images" {images} />

   <Post.Status slot="status" {likes} {comments} />

   <Post.Actions slot="actions">
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={thumb_up} />
			Like
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			Comment
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			Share
		</Post.Actions.Action>
   </Post.Actions>
</Post>

Post Props

bordered boolean false

Post Slots

header <Post.Header slot="header" />
content <Post.Content slot="content" />
default
images <Post.Images slot="images" />
status <Post.Status slot="status" />
actions <Post.Actions slot="actions" />

Post.Header Slots

avatar <Post.Header.Avatar slot="avatar" />
creator <Post.Header.Creator slot="creator" />
created <Post.Header.Created slot="created" />
extras <Post.Header.Extras slot="extras" />

Post.Header.Avatar Props

src string
alt string avatar

Post.Header.Creator Slots

default

Post.Header.Created Slots

default

Post.Content Slots

default

Post.Images Props

images CarouselSlide[] []
handleClick ((index: number) => void) | undefined
includeLightBox boolean true
activeSlide number 0
showClose boolean true
lightboxActions LightboxAction[] []

Post.Status Props

likes string[] []
comments string[] []

Post.Actions Slots

default

Post.Actions.Action Slots

icon <Card.Actions.Action.Icon slot="icon" />
label <Card.Actions.Action.Label slot="label" />

Post.Actions.Action.Icon Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor

Post.Actions.Action.Label Slots

default