Slate 텍스트와 카드 위젯

Text 범주는 Card, Clickable, HTML, Image, Link, List와 Text를 포함합니다. HTML, Image, Card와 List 등은 Text 위젯에 용도별 기본 코드를 제공하는 구성입니다.

Text에는 Markdown과 HTML 모드가 있습니다. Markdown은 간단한 문법과 HTML 표시를 함께 사용할 수 있으며 제목은 #로 작성합니다.

Handlebars로 다른 위젯의 선택값, 질의와 함수 결과를 내용에 연결할 수 있습니다.

Text 속성

hover 객체인 ITextHover에는 필수 hoverValue와 textContent가 있으며 둘 다 String입니다. hoverValue는 sl-tooltip의 hover 속성으로 정한 값이고 textContent는 그 요소 안의 텍스트입니다.

Image

Slate에서 접근 가능한 위치에 이미지를 먼저 올립니다. Foundry 이미지는 파일을 열고 이미지에서 우클릭하여 이미지 주소를 복사할 수 있습니다. 주소 형식은 https://<FOUNDRY_URL>/blobster/api/salt/<RID>이며 호스트와 RID에 실제 리소스값을 사용합니다.

<img src="https://<FOUNDRY_URL>/blobster/api/salt/<RID>" alt="앱에 표시할 이미지">

공개 앱은 외부 Foundry 파일을 읽을 수 없으므로 앱에 포함한 이미지의 조건을 따릅니다.

Card

Card는 div와 each 반복으로 항목을 만듭니다. 기본 템플릿의 반복문과 닫는 each를 모두 구성하고 항목의 selection에 this를 연결하면 그 값을 선택할 수 있습니다.

다음은 threatByDiameter 질의가 같은 길이의 name과 designation 배열을 반환하는 경우의 Markdown 모드 내용입니다.

<div class="cards">
  {{#each threatByDiameter.name}}
    <div class="card" selection="{{this}}">
      **{{lookup threatByDiameter.name @index}}**
      <br>
      {{lookup threatByDiameter.designation @index}}
    </div>
  {{/each}}
</div>

헤더와 본문은 lookup과 @index로 같은 항목을 읽습니다. single 또는 multiple 선택 모드를 목적에 맞춰 설정합니다.

카드 스타일

sl-text .cards .card { background: #f5f9fa; }
sl-text .cards .card.selected { background: #fff; }
sl-text .cards .card:hover { background: #fff; }
sl-text .cards .card.selected:hover { background: #f5f9fa; }

List

List는 바깥 div에 lists, 항목 div에 list class를 사용하는 같은 방식입니다. 여러 항목을 선택할 때에는 Selection을 Multiple로 정합니다.

<div class="lists">
  {{#each threatByDiameter.name}}
    <div class="list" selection="{{this}}">
      **{{lookup threatByDiameter.name @index}}**
      <br>
      {{lookup threatByDiameter.designation @index}}
    </div>
  {{/each}}
</div>

목록 스타일

sl-text .lists .list { background: #f5f9fa; }
sl-text .lists .list.selected { background: #fff; }
sl-text .lists .list:hover { background: #fff; }
sl-text .lists .list.selected:hover { background: #f5f9fa; }

Tooltip

HTML 내용의 sl-tooltip에 포인터를 올리면 tooltip을 표시합니다. Tooltips Enabled를 켜고 Tooltip Text를 설정합니다.

고정 문구

HTML 내용은 다음과 같고 Tooltip Text는 This is a tooltip으로 정합니다.

<sl-tooltip hover="A">
  <button class="pt-button pt-intent-primary">Button</button>
</sl-tooltip>

요소 안의 텍스트

<sl-tooltip hover="A">Hover over me!</sl-tooltip>

위젯 이름이 w1이라면 Tooltip Text를 Tooltip: {{w1.hover.textContent}}로 구성합니다.

사용자 지정 hover 값

<sl-tooltip hover="A">
  <button class="pt-button pt-intent-primary">Button</button>
</sl-tooltip>
<sl-tooltip hover="B">
  <button class="pt-button pt-intent-success">Button</button>
</sl-tooltip>

Tooltip Text를 Tooltip: {{w1.hover.hoverValue}}로 지정하면 각 요소의 A 또는 B를 표시합니다.