라이브러리 대시보드 만들기

쓰리래빗츠 북 3.0.35 버전부터 지원합니다.

라이브러리 메인 페이지를 웹 페이지를 이용해서 설정하는 방법을 설명합니다. 예를 들어 다음과 같은 메인 페이지를 만들 수 있습니다.

페이지 구성

페이지 만들기

다음 순서로 페이지를 만듭니다.

  1. <도구 | 웹 페이지> 메뉴를 클릭합니다.

  2. 웹 페이지 1추가 버튼을 클릭합니다.

  1. 유형으로 페이지를 선택한 후 저장합니다.

  2. 2페이지 메뉴 아래에서 웹 페이지를 선택한 후 편집합니다.

라이브러리 메인 페이지 설정

라이브러리에 메인 페이지를 설정하는 방법입니다.

  1. <도구 | 라이브러리> 메뉴로 이동합니다.

  2. 라이브러리를 선택한 후 <라이브러리 변경> 링크를 클릭합니다.

  3. 1메인 페이지를 선택한 후 저장합니다.

페이지 컴포넌트

다양한 태그로 페이지를 구성할 수 있습니다.

컴포넌트 목록

컴포넌트

설명

r-action

버튼을 표시하는 컴포넌트

r-box

블로그와 비디오 문서를 박스로 표시하는 컴포넌트

r-doc

문서 차례를 표시하는 컴포넌트

r-html

HTML 코드를 표시하는 컴포넌트

r-list

리스트를 표시하는 컴포넌트

r-panel

여러 컴포넌트를 하나로 묶는 컴포넌트. 그리드 레이아웃을 구성하는데 사용합니다.

r-tab

여러 컴포넌트를 탭으로 묶는 컴포넌트

r-action 컴포넌트

버튼을 표시하는 컴포넌트입니다. r-item 태그로 버튼을 정의합니다. 여러 r-item 태그를 사용할 수 있습니다.

기본 구조입니다.

<r-action>
  <r-item title="쓰리래빗츠 Q&A" href="https://www.3rabbitz.com/qna_ko" color="blue" icon="cloud" />
</r-action>

r-action 태그의 주요 속성입니다.

r-action 태그의 주요 속성

속성 이름

설명

column

그리드 레이아웃을 참고합니다.

row

r-item 태그의 주요 속성입니다.

r-item 태그의 주요 속성

속성 이름

설명

필수

기본 값

title

버튼 제목


href

버튼을 클릭했을 때 이동할 URL


color

색상


blue
icon

아이콘



r-box 컴포넌트

블로그 문서의 포스트와 비디오 문서의 클립을 박스로 표시하는 컴포넌트입니다.

기본 코드입니다.

<r-box id="903844064fd792d2" />
r-box 태그의 주요 속성

속성 이름

설명

필수

기본 값

id

블로그 또는 비디오 문서의 아이디


title

생략하면 문서의 제목을 사용합니다.

아니오


count

포스트 또는 클립 숫자


3
color

색상


brown
icon

아이콘



column

그리드 레이아웃을 참고합니다.

row

r-doc 컴포넌트

문서 차례를 보여주는 컴포넌트입니다.

문서 유형이 북과 블로그인 문서만을 지원합니다.

기본 코드입니다.

<r-doc id="00d54d1b9f9cc0be" color="black" icon="arrow_drop_down" view="column3" />

r-doc 태그의 주요 속성입니다.

r-doc 태그의 주요 속성

속성 이름

설명

필수

기본값

id

문서의 아이디


title

생략하면 문서의 제목을 사용합니다.

아니오


color

색상

아니오

brown
icon

아이콘

아니오


view

칼럼 숫자를 설정합니다. 하나의 칼럼을 사용하려면 column1, 두개의 칼럼을 사용하려면 column2, 세개의 칼럼을 사용하려면 column3을 입력합니다.

아니오

column1
column

그리드 레이아웃을 참고합니다.

row

문서에 부가 있을 때 다음 사항을 참고합니다.

r-html 컴포넌트

임의의 HTML 코드를 넣을 때 사용하는 컴포넌트입니다. 예를 들어 iframe 태그로 유튜브 동영상을 입력할 수 있습니다.

<r-html>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/UuV2BmJ1p_I"></iframe>
</r-html>
r-html 태그의 주요 속성

속성 이름

설명

필수

기본 값

title

제목.

아니오. r-tab 컴포넌트 아래에 있을 때는 필수입니다.


column

그리드 레이아웃을 참고합니다.

row

r-list 컴포넌트

간단한 목록을 표시하는 컴포넌트입니다. r-item 태그로 개별 목록을 정의합니다.

기본 코드입니다.

<r-list title="주요 문서" color="red" icon="list">
  <r-item id="e22cc05324e616e8" />
  <r-item id="903844064fd792d2" title="블로그" />
  <r-item title="페이스북" href="https://www.facebook.com/3rabbitz" />
</r-list>
r-list 태그의 주요 속성

속성 이름

설명

필수

기본 값

title

제목

아니오


color

색상

아니오

brown
icon

아이콘

아니오


column

그리드 레이아웃을 참고합니다.

row

r-item 태그의 주요 속성입니다.

r-item 태그의 주요 속성

속성 이름

설명

필수

기본 값

id

문서 아이디

아니오

아니오. r-tab 컴포넌트 아래에 있을 때는 필수입니다.

title

목록 제목.

아니오

id 속성이 있을 때는 문서 제목. href 속성이 있을 때는 href

href

목록을 클릭했을 때 이동할 URL

아니오


id 또는 href 중 하나만을 설정합니다. 모두 설정했을 때는 id를 사용합니다.

r-panel 컴포넌트

r-tab 컴포넌트와 함께 다른 컴포넌트를 묶는 컴포넌트입니다. 그리드 레이아웃에서 한 셀에 여러 컴포넌트를 배치할 때 사용합니다.

기본 코드입니다.

<r-panel>
  <r-document id="ace4a53622b09bde" />
  <r-box id="903844064fd792d2" />
  <r-tab>
    <r-document id="ace4a53622b09bde" />
    <r-document id="e2e40b58a7b2ed6f" />
  </r-tab>
</r-panel>

r-panel 컴포넌트는 하나 이상의 하위 컴포넌트가 있어야 합니다. 다음 컴포넌트가 r-panel 컴포넌트 아래에 올 수 있습니다.

r-panel 태그의 주요 속성

속성 이름

설명

필수

기본 값

title

탭 제목

r-tab 컴포넌트 아래에 있을 때는 필수


color

탭 색상

r-tab 컴포넌트 아래에 있을 때는 필수

brown
icon

탭 아이콘

r-tab 컴포넌트 아래에 있을 때는 필수


column

그리드 레이아웃을 참고합니다.



row




r-panel 컴포넌트가 r-tab 컴포넌트 아래에 있을 때는 r-panel 컴포넌트가 r-tab 컴포넌트를 포함할 수 없습니다.

r-tab 컴포넌트

r-panel 컴포넌트와 함께 다른 컴포넌트를 묶는 컴포넌트입니다. 여러 컴포넌트를 탭으로 표시합니다.

기본 코드입니다.

<r-tab color="green">
  <r-doc id="00d54d1b9f9cc0be" view="column3" />
  <r-box id="903844064fd792d2" />
  <r-html title="동영상">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UuV2BmJ1p_I"></iframe>
  </r-html>
</r-tab>

r-tab 컴포넌트는 하나 이상의 하위 컴포넌트가 있어야 합니다. 다음 컴포넌트가 r-tab 컴포넌트 아래에 올 수 있습니다.

r-htmlr-listr-panel 컴포넌트는 title 속성으로 탭 제목을 설정해야 합니다.

하위 컴포넌트에서 selected 속성으로 기본 탭을 설정할 수 있습니다.

<r-tab>
  <r-doc id="ace4a53622b09bde" />
  <r-doc id="e2e40b58a7b2ed6f" selected="true" />
  <r-box id="903844064fd792d2" />
</r-tab>
r-tab 태그의 주요 속성

속성 이름

설명

필수

기본 값

color

색상


brown
column

그리드 레이아웃을 참고합니다.

row

그리드 레이아웃

columnrow 속성으로 컴포넌트 배치하기

화면을 가상의 컬럼으로 나눠 각 셀에 컴포넌트를 배치합니다. 전체 셀의 크기는 모든 컴포넌트의 columnrow 속성의 최대 값으로 결정합니다. 예를 들어 열이 3, 행이 4인 레이아웃이 있습니다.

column 속성은 왼쪽부터 1에서 시작합니다. row 속성은 위부터 1에서 시작합니다.

색칠한 셀에 컴포넌트를 배치하려면 columnrow 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="1" />

특정 행에 컴포넌트를 배치하지 않으면 해당 행의 높이가 0이기 때문에 실제로 페이지에서 공간을 차지하지는 않습니다.

색칠한 셀에 컴포넌트를 배치하려면 columnrow 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="3" row="4" />

여러 열에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 columnrow 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-3" row="3" />

column 속성에 -를 구분자로 시작 열과 끝 열을 설정합니다.

여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 columnrow 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1" row="2-3" />

row 속성에 -를 구분자로 시작 행과 끝 행을 설정합니다.

여러 열과 여러 행에 하나의 컴포넌트를 배치할 수 있습니다. 색칠한 셀에 컴포넌트를 배치하려면 columnrow 값을 다음과 같이 설정합니다.

<r-doc id="3e005ee60edcc72d" column="1-2" row="3-4" />

row 속성에 -를 구분자로 시작 행과 끝 행을 설정합니다.

색상과 아이콘

구글 머티리얼 디자인의 색상과 아이콘을 지원합니다. color 속성은 다음 값을 지원합니다.

icon 속성에는 머티리얼 아이콘의 이름을 설정합니다. 다음에서 전체 아이콘을 확인할 수 있습니다.

예를 들어 alarm 아이콘을 사용하려면 해당 이름을 icon 속성에 설정합니다.

<r-doc id="00d54d1b9f9cc0be" color="black" icon="1alarm" />

SVG 형식으로만 머티리얼 아이콘을 지원합니다. CSS background-image 속성에서 SVG 형식을 지원하는 웹 브라우저에서만 아이콘이 보입니다.

참고 사항