コンテンツにスキップ
Lism UI

FAQ

Q&Aのレイアウト構築例を紹介します。

構築例-1

↓
Example
Lorem ipsum, question 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, question 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, question 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能 
<Stack g='30'>
  <Stack className='c--faq' g='20' p='5'>
    <Flex className='c--faq__Q' g='10' ai='c'>
      <Icon icon='question' fz='2xl' c='purple'/>
      <Text tag='span' fw='bold'>Lorem ipsum, question 1</Text>
    </Flex>
    <Lism className='c--faq__A' pis='10' isFlow='s'>
      <Dummy length='l' />
    </Lism>
  </Stack>
  <Divider />
  <Stack className='c--faq' g='20' p='5'>
    <Flex className='c--faq__Q' g='10' ai='c'>
      <Icon icon='question' fz='2xl' c='purple'/>
      <Text tag='span' fw='bold'>Lorem ipsum dolor sit amet, question 2</Text>
    </Flex>
    <Lism className='c--faq__A' pis='10' isFlow='s'>
      <Dummy length='l' />
    </Lism>
  </Stack>
  <Divider />
  <Stack className='c--faq' g='20' p='5'>
    <Flex className='c--faq__Q' g='10' ai='c'>
      <Icon icon='question' fz='2xl' c='purple'/>
      <Text tag='span' fw='bold'>Lorem ipsum dolor sit amet, question 3</Text>
    </Flex>
    <Lism className='c--faq__A' pis='10' isFlow='s'>
      <Dummy length='l' />
    </Lism>
  </Stack>
</Stack>

構築例-2

アコーディオンタイプの例

↓
Example
Question 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Question 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Question 3, Lorem ipsum dolor sit amet?

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能 
import { Stack } from '@lism-ui/core';
import { FaqAcc,FaqAccTitle,FaqAccBody } from '~/.../path/to/Faq';


<Stack g={20}>
  <AccFAQ q='Lorem ipsum, question 1'>
    <p>Answer...</p>
  </AccFAQ>
  <AccFAQ q='Question 2'>
    <p>Answer...</p>
    <p>Answer...</p>
  </AccFAQ>
  <AccFAQ q='Question 3, Lorem ipsum dolor sit amet?'>
    <p>Answer...</p>
  </AccFAQ>
</Stack>
↓
コンポーネントのソースコード
import { Accordion, Icon } from '@lism-ui/core';


export function FaqAcc({ children }) {
  return (
    <Accordion.Root className='c--faq' p='30' bgc='base-2' bdrs='3'>
      {children}
    </Accordion.Root>
  );
}
export function FaqAccTitle({ children }) {
  return (
    <Accordion.Header>
      <Icon icon='question' fz='2xl' />
      <Accordion.Label>{children}</Accordion.Label>
      <Accordion.Icon />
    </Accordion.Header>
  );
}
export function FaqAccBody({ children }) {
  return (
    <Accordion.Body mbs='30' isFlow='s'>
      {children}
    </Accordion.Body>
  );
}