TwoColumns

Usage

Presentation

The ShTwoColumns constructor enables you to provide any content presented in two columns and one row.

Note: The border in wrapper is only for visual understanding of the ShTwoColumns boundry. Component itself does not have that predefined

Example Basic (text)

The above example is written as:

::ShTwoColumns
---
ui: 
  wrapper: border
---
This text is displayed in the left column first row.

Text is displayed in the right column first row.

This text is displayed in the left column second row.

Text text is displayed in the right column second row.
::

Example Basic (text/image)

It is possible to add text or an image to one or to both columns. For example, text and image:

This is how the above example is written:

::ShTwoColumns
This text should be in the left column. 

![image](https://free-images.com/sm/3b8f/dalmatiner_schw_braun.jpg){.not-prose .w-full .rounded-2xl}
::

Example Basic (image/text)

The order of the elements determine the left and right column content.

This is how the above example is written:

::ShTwoColumns
![image](https://free-images.com/sm/3b8f/dalmatiner_schw_braun.jpg){.not-prose .w-full .rounded-2xl}

This text should be in the right column. 
::

Props

The ShTwoColumns constructor supports the following properties:

Properties and Attributes Description

The gap property controls gutters between columns. Values for this property and its basic usage can be found in TailwindCSS documentation.

Example Usage

Advanced Settings

It is possible to nest other components inside of the ShTwoColumns component as e.g., an ShSegment and nest a ShTwoColumns component to provide special effects. For instance the following example contains:

• Two columns
  • Column 1: Contains an image with inline style.
  • Cloumn 2: It is a ShSegment with background color, shadow and other special styles which in turn contains:
    • Markdown text,
    • Bullet list,
    • ShTwoColumns : A nested ShTwoColumns module at the bottom of the second column which contains:
      • Sub-Column 1: A markdown text styled inline,
      • Sub-Column 2: An image that has been styled by rounding the corners.

This is how the above example is written in markdown:

::ShTwoColumns
![laptop](https://free-images.com/tn/f4f3/coffee_apple_iphone_laptop.jpg){.not-prose .w-full .rounded-2xl .shadow-2xl}

:::ShSegment
---
ui:
  wrapper: bg-cyan-300 rounded-2xl border shadow-md p-1 # Comment
---
For more elaborated content in one of the columns it's better to utilize the `ShSegment` 
component.

This component enables more *Markdown* content to be added to the column. This content
can contain all available contractors as other parts of the *Markdown* document:

* lists, images, tables, links
* other components

It can contain nested <b>{{ $doc.constructorName }}</b> component as well, if that is needed for achieving
desired effect.
::ShTwoColumns
---
size: 2XL
---
[Let your creativity blosom]{.text-4xl .bg-gradient-to-r .from-blue-600 .to-orange-400 .bg-clip-text .text-transparent .inline-block}

![image](https://free-images.com/sm/3b8f/dalmatiner_schw_braun.jpg){.not-prose .w-1/2 .rounded-full}
::

:::

::

You can notice that in the right column, encoupsulated with ShSegment component there is a ShTwoColumns component with different withs of the columns.

The relationship between sizes of two columns can be controled using the property size. The values of this property are define in T-shirt sizes starting from '2XS' all the way up to '4XL', see below. Default value of the size property is 'L'.

Two-Columns and Size

The image displayed below is composed of the following components:

• An ShSegment component that nests several ShTwoColumns components, with one for each row. The ShTwoColumns component uses the size attribute to define the width of the left column.
• Inside each ShTwoColumns component, two ShSegment components are nested. These ShSegment components use the wrapper attribute to provide background color and text to define the size (left column) and proportion (right column).

Config

The style attributes can be modified via the property ui and are stored in the ShTwoColumns.ts file:

export default {
  wrapper: "",
  default: {
    size: "L",
    gap: "gap-4"
  }
}

Class Descriptions

These represent the class values utilized in the ShTwoColumns constructor. These values are customizable and can be strengthened or overridden through the ui properties' attributes.

wrapper:

• Value: ""
• Description: This defines the overall styling for the container. Currently, there are no styles applied to the wrapper.

default:

• Value: { size: "L", gap: "gap-4" }
• Description: This object holds the default Tailwind CSS values that might be used as fallback or initial styles. In this case, it sets a default size value of "L" and a default gap value of "gap-4".

size:

• Value: "L"
• Description: This defines the default width of the left column. The value "L" indicates a large size.

gap:

• Value: "gap-4"
• Description: This defines the default gutter size between columns. The value "gap-4" applies a gap utility class from Tailwind CSS to add spacing between the columns. Detailed information about the gap property can be found in the Tailwind CSS documentation.

These style properties ensure that the ShTwoColumns component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements. This value only can be modified in the ShTwoColumns.ts file, it cannot be modified via markdown.