STWUI

GET STARTED

COMPONENTS

ACTIONS

UTILITIES

TYPES

Post

Post is used to display social content.

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.

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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.

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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.

2 Comments

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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.

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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.

2 Comments

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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.

21+

2 Comments

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} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={comment} />
			<Post.Actions.Action.Label slot="label">Like</Post.Actions.Action.Label>
		</Post.Actions.Action>
		<Post.Actions.Action>
			<Post.Actions.Action.Icon slot="icon" data={share} />
			<Post.Actions.Action.Label slot="label">Share</Post.Actions.Action.Label>
		</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" />
default

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