Overview of the Phoenix and LiveView Image Component
The Mishka Chelekom blockquote component is a Phoenix LiveView component that allows developers to create dynamic and customizable blockquotes, perfect for highlighting key content or quotes within applications. It offers flexibility in layout, allowing for easy adjustment of size, padding, and positioning, ensuring a polished and professional look.
This Phoenix LiveView component also supports adding captions and icons, making it ideal for enhancing both the visual appeal and the clarity of important information. With its responsive design and ease of use, this blockquote component improves content readability and presentation.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
How to use Caption slot
The caption slot in the
Mishka Chelekom blockquote component
offers an intuitive way to enhance your blockquotes with additional context, such as displaying an image and descriptive text. By using the
image
attribute, you can include a profile picture or any relevant visual beside the caption, making it visually engaging. The
position
attribute allows you to control the alignment of the caption, offering options like
right
,
left
, or
center
for flexible layout customization. This feature is perfect for adding author names, roles, or attributions alongside a quote, further improving the clarity and aesthetics of your content.
<.blockquote> <p>Any content or HTML can go here.</p> <:caption image="/path" image_class="classes" position="right"> Mishka Chelekom </:caption> <:caption position="left"> Mishka Chelekom </:caption> <:caption position="center"> Mishka Chelekom </:caption> </.blockquote>
Default Variant
The default style of the Mishka Chelekom blockquote applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles. Default variant have also white and dark colors which are the same colors in the dark and light mode.
<.blockquote>Default Natural</.blockquote> <.blockquote color="white">Info</.blockquote> <.blockquote color="indarkfo">Info</.blockquote> <.blockquote color="info">Info</.blockquote> <.blockquote color="success">Success</.blockquote> <.blockquote color="warning">Warning</.blockquote> <.blockquote color="danger">Danger</.blockquote> <.blockquote color="silver">Light</.blockquote> <.blockquote color="misc">Misc</.blockquote> <.blockquote color="dawn">Dawn</.blockquote> <.blockquote color="primary">Primary</.blockquote> <.blockquote color="secondary">Secondary</.blockquote>
Outline Variant
The outline style of the Mishka Chelekom blockquote features a border. Using a single setting, you can choose from various color variants to suit your design needs.
<.blockquote variant="outline">Natural</.blockquote> <.blockquote variant="outline" color="info">Info</.blockquote> <.blockquote variant="outline" color="success">Success</.blockquote> <.blockquote variant="outline" color="warning">Warning</.blockquote> <.blockquote variant="outline" color="danger">Danger</.blockquote> <.blockquote variant="outline" color="silver">Light</.blockquote> <.blockquote variant="outline" color="misc">Misc</.blockquote> <.blockquote variant="outline" color="dawn">Dawn</.blockquote> <.blockquote variant="outline" color="primary">Primary</.blockquote> <.blockquote variant="outline" color="secondary">Secondary</.blockquote>
Shadow Variant
The shadow variant of the Mishka Chelekom blockquote is similar to the default variant, but it also includes a subtle shadow along with a border and Natural background in Silver mode.
<.blockquote variant="shadow">Natural</.blockquote> <.blockquote variant="shadow" color="info">Info</.blockquote> <.blockquote variant="shadow" color="success">Success</.blockquote> <.blockquote variant="shadow" color="warning">Warning</.blockquote> <.blockquote variant="shadow" color="danger">Danger</.blockquote> <.blockquote variant="shadow" color="silver">Light</.blockquote> <.blockquote variant="shadow" color="misc">Misc</.blockquote> <.blockquote variant="shadow" color="dawn">Dawn</.blockquote> <.blockquote variant="shadow" color="primary">Primary</.blockquote> <.blockquote variant="shadow" color="secondary">Secondary</.blockquote>
Bordered Variant
The Bordered variant of the Mishka Chelekom blockquote is similar to the default variant, but without border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
<.blockquote variant="bordered">Natural</.blockquote> <.blockquote variant="bordered" color="white">White</.blockquote> <.blockquote variant="bordered" color="dark">Dark</.blockquote> <.blockquote variant="bordered" color="info">Info</.blockquote> <.blockquote variant="bordered" color="success">Success</.blockquote> <.blockquote variant="bordered" color="warning">Warning</.blockquote> <.blockquote variant="bordered" color="danger">Danger</.blockquote> <.blockquote variant="bordered" color="silver">Light</.blockquote> <.blockquote variant="bordered" color="misc">Misc</.blockquote> <.blockquote variant="bordered" color="dawn">Dawn</.blockquote> <.blockquote variant="bordered" color="primary">Primary</.blockquote> <.blockquote variant="bordered" color="secondary">Secondary</.blockquote>
Gradient Variant
The gradient variant of the Mishka Chelekom blockquote has gradients in various colors.
<.blockquote variant="gradient">Natural</.blockquote> <.blockquote variant="gradient" color="info">Info</.blockquote> <.blockquote variant="gradient" color="success">Success</.blockquote> <.blockquote variant="gradient" color="warning">Warning</.blockquote> <.blockquote variant="gradient" color="danger">Danger</.blockquote> <.blockquote variant="gradient" color="silver">Light</.blockquote> <.blockquote variant="gradient" color="misc">Misc</.blockquote> <.blockquote variant="gradient" color="dawn">Dawn</.blockquote> <.blockquote variant="gradient" color="primary">Primary</.blockquote> <.blockquote variant="gradient" color="secondary">Secondary</.blockquote>
Transparent Variant
The transparent variant of the Mishka Chelekom blockquote is similar to the default variant, but without border and background color.
<.blockquote variant="transparent">Natural</.blockquote> <.blockquote variant="transparent" color="dark">Dark</.blockquote> <.blockquote variant="transparent" color="info">Info</.blockquote> <.blockquote variant="transparent" color="success">Success</.blockquote> <.blockquote variant="transparent" color="warning">Warning</.blockquote> <.blockquote variant="transparent" color="danger">Danger</.blockquote> <.blockquote variant="transparent" color="silver">Light</.blockquote> <.blockquote variant="transparent" color="misc">Misc</.blockquote> <.blockquote variant="transparent" color="dawn">Dawn</.blockquote> <.blockquote variant="transparent" color="primary">Primary</.blockquote> <.blockquote variant="transparent" color="secondary">Secondary</.blockquote>
Rounded prop in Phoenix LiveView Blockquote Component
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the border radius of the blcokquotes, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.
<.blockquote rounded="extra_small">extra small</.blockquote> <.blockquote rounded="small">small</.blockquote> <.blockquote rounded="medium">medium</.blockquote> <.blockquote rounded="large">large</.blockquote> <.blockquote rounded="extra_large">extra large</.blockquote>
Border prop
The border prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the border size of the blockquotes, allowing you to adjust the thickness to suit your design. Additionally, you can use boolean props such as
left_border
,
right_border
,
hide_border
, and
full_border
to change the border position, add, or remove borders as needed for greater customization. For
outline
and
bordered
variant you can change the size of border
<.blockquote border="extra_small">extra small</.blockquote> <.blockquote border="small">small</.blockquote> <.blockquote border="medium">medium</.blockquote> <.blockquote border="large">large</.blockquote> <.blockquote border="extra_large">extra large</.blockquote> <.blockquote right_border>Right border</.blockquote> <.blockquote left_border>Left border</.blockquote> <.blockquote hide_border>Hide border</.blockquote> <.blockquote full_border>Full</.blockquote>
Size prop
The size prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control both the icon size and text size within the blockquotes.
<.blockquote size="extra_small">extra small</.blockquote> <.blockquote size="small">small</.blockquote> <.blockquote size="medium">medium</.blockquote> <.blockquote size="large">large</.blockquote> <.blockquote size="extra_large">extra large</.blockquote>
Space prop
The space prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the vertical spacing between elements within the blockquotes.
<.blockquote space="extra_small">extra small</.blockquote> <.blockquote space="small">small</.blockquote> <.blockquote space="medium">medium</.blockquote> <.blockquote space="large">large</.blockquote> <.blockquote space="extra_large">extra large</.blockquote>
Padding prop
The padding prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control the padding around the content inside the blockquotes.
<.blockquote padding="extra_small">extra small</.blockquote> <.blockquote padding="small">small</.blockquote> <.blockquote padding="medium">medium</.blockquote> <.blockquote padding="large">large</.blockquote> <.blockquote padding="extra_large">extra large</.blockquote>
Icon in Phoenix LiveView blcokquote component
The icon prop in the Mishka Chelekom blockquote component allows you to add any Hero icon to your blockquote. By using the
icon_class
prop, you can customize the style of the icon to fit your design needs. If you want to hide the icon, the
hide_icon
prop, which is a boolean, allows you to do so. By default, the blockquote component displays the
hero-quote
icon unless the
hide_icon
prop is set to true.
<.blockquote icon_class="color-blue-400">medium</.blockquote> <.blockquote icon="hero-star">extra small</.blockquote> <.blockquote hide_icon>small</.blockquote>