FAQ

Usage

The simplest example of usage for the ShFaq is with just a list of questions and answers.

This is how it is written:

::ShFaq
---
qas:
  - q: "What is the purpose of this component?"
    a: "To display a list of FAQs."
  - q: "How do I use it?"
    a: "Include the qas property with question-answer pairs."
---
::

Props

These are the properties and attributes associated to the ShFaq constructor:

Properties and Attributes

These are the properties and attributes to define and style the ShFaq constructor:

Example Usage

Advanced Settings

An example with customized ui attributes for enhanced display:

This is how it is written:

::ShFaq
---
ui:
  header:
    wrapper: "font-bold text-xl mb-4"
    title: "text-2xl"
  wrapper: "border p-4"
  inner: "mb-2"
  question: "cursor-pointer text-blue-500"
  answer: "text-gray-700"
  divider: "border-t my-2"
qas:
  - q: "What is the purpose of this component?"
    a: "To display a list of FAQs."
  - q: "How do I use it?"
    a: "Include the qas property with question-answer pairs."
---
::

Config

These style properties can be modified via ui and are stored in the ShFaq.ts file:

export default {
  header: {
    wrapper: "mt-10",
    title: "title text-2xl font-bold",
  },
  wrapper: "border rounded-xl",
  inner: "mx-3 cursor-pointer",
  question: "grid grid-cols-2 flex-row font-bold",
  q: "w-full hover:scale-105 duration-300 text-black dark:text-golden mx-4",
  answer: "ml-1",
  a: "mx-6 font-light text-black dark:text-golden",
  divider: "border-b",
  icon: "place-self-end self-center text-2xl text-black dark:text-golden i-icons8-chevron-right-round",
  // Default Tailwind CSS values
  default: {
  }
}

Class Descriptions

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

header.wrapper

• Value: mt-10
• Description: Sets the top margin for the header wrapper, providing spacing above it.

header.title

• Value: text-2xl font-bold
• Description: Applies a text size of 2xl and bold font weight to the title within the header.

wrapper

• Value: border rounded-xl
• Description: Defines a border around the container and applies extra-large rounding to its corners.

inner

• Value: mx-3 cursor-pointer
• Description: Adds horizontal margins and changes the cursor to a pointer when hovering, indicating interactivity.

question

• Value: grid grid-cols-2 flex-row font-bold
• Description: Utilizes a grid layout with two columns and a flex-row direction, applying bold font weight to questions.

q

• Value: w-full hover:scale-105 duration-300 hover:text-primary-500 dark:text-white mx-4
• Description: Ensures full width, applies a scale transform on hover, sets a transition duration, changes text color on hover, and applies white text color in dark mode with horizontal margins.

answer

• Value: ml-1
• Description: Adds a small left margin to the answer text.

a

• Value: mx-6 dark:text-white
• Description: Applies horizontal margins and sets text color to white in dark mode for the 'a' element.

divider

• Value: border-b
• Description: Applies a bottom border, often used to separate elements.

icon

• Value: place-self-end self-center text-2xl i-icons8-chevron-right-round
• Description: Aligns the icon to the end of its container, centers it vertically, sets its text size to 2xl, and applies a specific icon class.

default

• Value: {}
• Description: Placeholder for default Tailwind CSS values, currently empty.

These style properties ensure that the ShFaq component is visually appealing and flexible, allowing for a wide range of customization to meet specific design requirements.