STW UI

Post

Post is used to display social content.

Usage

svelte

import { Post } from 'stwui';
// OR
import Post from 'stwui/post'; // for tree shaking

Simple 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.

svelte

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

   let avatar = 'image.png',
   let creator = 'Joe Montana';
   let date = new Date(2022, 8, 11);
   let content = "Lorem ipsum...";
</script>

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

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

With Actions

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...";
</script>

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

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

	<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>

With Status

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 likes = ['1', '2'];
   let comments = [];
</script>

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

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

	<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 With Images

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>

Post With 4+ Images

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>

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
placeholder	boolean	true

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

Post Class Identifiers

stwui-post

stwui-post-header

stwui-post-header-avatar-wrapper

stwui-post-header-avatar

stwui-post-avatar-placeholder

stwui-post-header-creator-wrapper

stwui-post-header-creator-wrapper-created

stwui-post-header-created-wrapper-created

stwui-post-header-extras

stwui-post-content

stwui-post-images

stwui-post-status

stwui-post-actions

stwui-post-action

stwui-post-action-icon

stwui-post-action-label

GET STARTED

COMPONENTS

ACTIONS

UTILITIES

TYPES

Post

Usage

Simple Post

Joe Montana

With Actions

Joe Montana

With Status

Joe Montana

Post With Images

Joe Montana

Post With 4+ Images

Joe Montana

Post Props

Post Slots

Post.Header Slots

Post.Header.Avatar Props

Post.Header.Creator Slots

Post.Header.Created Slots

Post.Content Slots

Post.Images Props

Post.Status Props

Post.Actions Slots

Post.Actions.Action Slots

Post.Actions.Action.Icon Props

Post.Actions.Action.Label Slots

Post Class Identifiers