Yumval

Button Widget

最小コンポーネントを作成する

Buttons

HOGE
機能：ボタン状リンク
PreviewUI：ボタン内テキスト（リッチテキスト）、リンク設定（標準）
Inspector：外観の種類（Select、VisualSelect）、水平配置（VisualCheck : left,center,right）

作成：
１．ブロックを選択して作成：スロットなし

スマート作成：
１．複数ブロックを選択して作成
２．スロット差分検出
＊構造条件：Yumvalブロック以外は無効、ブロックの種類と構造が完全一致、ネストしたCompositeKitは同種を許可し引数は不問、SlotBlock、CompositeKitの内容まで走査しない
１個目がデフォルト値、スロット名は自動、スロットIDはUID
Spanテキスト＞リッチテキストSlot
URL有無＞リンクSlot
ボタンClass＞ボタン外観Slot：差分クラス
テキストClass＞Span外観Slot：差分クラス
＊POPUP：複数ブロックのクラス差分を１個にする＞Key：複数SlotのValue（差分）
＊POPUP内汎用BlockオプションチェックBOX：Disable、ID有効化

編集：スロット追加（Previewの子ブロックから）
１．CompositeKitを選択しDEVタグに切り替え後、子ブロックを選択
２．Popoverから「スロット編集」を選択（すでにスロットがある場合も）
３．ブロックごとにスロット化可能なリストのPopup
４．項目有効化チェック、型（固定）、スラッグ（自動入力）
５．OKで更新：スロット追加、削除、スラッグ名変更

Disable Block を公開 ID入力欄 を公開

公開UI

=
説明
Slug
Type
options (4)▼
= X
= X
= X
= X
=
options
= X
= X
= X
= X

編集：スロット追加（Inspector）

１．CompositeKitを選択しDEVタグに切り替え
２．オプション追加
３．POPUP：スラッグ名入力、プリセットからUIを選択
４．オプション値の追加：複数Targetスロットにそれぞれの値
５．Targetブロックの属性内に${yumrig.align} を記述
６．Applyボタンで更新：フロントRegistryを更新、DBは更新しない

Disable Block を公開 ID入力欄 を公開

公開UI

=Field=
説明
options (4)▼
= X
= X
= X
= X
=
options
= X
= X
= X
= X

Block ID

Block ID
ID 継承

Block ID

Block ID
ID 継承
props.ids.

Block ID

!i
?
Invalid Format
ID 継承

Block Tag

Block ID

Block Tag

Block ID
Tag

Disabled

Block ID
Value

Disabled

Block ID
Value
Value
Valuetrue

Disabled

Block ID
Value
Value
Valuefalse

Image Source

Aspect Ratio
Limit Image Size
ALT
Text

Image Source

Source URL
Invalid URL
Aspect Ratio

Image Source

Props Path of Image ID

Invalid Format
Aspect Ratio
Limit Image Size

解除：
１．一つまたは複数のブロックを選択
２．１個でもCompositeKitが含まれていたら「CompositeKit解除」有効化

CompositeKit　Inspector：
属性は持たない、Disableのみ
オプションのみ
タグとしてSSRでレンダーされない

SLOT型：
非公開チェック：
UI：
INPUT
TEXTAREA
SELECT
CHECK
SWITCH
RADIO
SELECT
Checkbox Icon Buttons
Radio Icon Buttons
Preset Layout Buttons : horizontal align, vertical align, direction type(row, column, row-reverse, column-reverse)

WP Button


Nike ReactRewriting sport’s playbook for billions of athletes

機能：HERO SECTION

PreviewUI：テキスト２個、ボタン内テキスト、ボタンリンク設定（標準）、背景画像
Inspector：
＊Pictureを使用し、規定アスペクト比の画像をInspectorで複数指定：SP用PC用のアスペクト比と画素数（ww x hh 以上）を説明文で表示

Get started

Preline Figma

方針：アイコンありボタンを２種に分けるほうが良さそう
進むボタン（＞あり）
機能：右に＞アイコンを持つボタン
PreviewUI：ボタン内テキスト（リッチテキスト）、リンク設定（WP標準）
Inspector：外観選択（VisualSelect）、水平配置（VisualCheck : none, left,center,right）
機能：左にアイコンを持つボタン
PreviewUI：ボタン内テキスト（リッチテキスト）、リンク設定（WP標準）
Inspector：アイコン選択（VisualSelect）、水平配置（VisualCheck : none, left,center,right）

Icons

機能：アイコンリンク
PreviewUI：リンク設定（WP標準）
Inspector：アイコン選択（VisualSelect）、TITLE、aria-label、水平配置（VisualCheck : none, left,center,right）

スマート作成：
PreviewUI：１個でもリンクが含まれれば設定
Inspector：SVGに差分があればVisualSelectを作成

追加編集：
オプションに値追加（型は特定）、SVG型データを入力

Inline Link Text

Lolem ipsum… 続きを読む

リッチテキスト内に挿入可能なブロック？？

SLOT値実例

リッチテキスト（Preview）：
リンク（Preview）：どのブロックで設定？　CompositeKit OR　InnerBlock、InnerBlockが良いであろう
画像（Preview)：メディア選択、URL入力、ALT書き換え
日付（Preview）：DatePicker：フォーマット（自動ORカスタム）
プルダウン（Preview）：ボタン＞選択肢から選ぶ
コンテナ（Preview）：内部にブロック追加可能

値MAP：すべての値がMapオブジェクトとなる

buttonAppearance: {
  primary: { textClass: "color-inverse", buttonClass: "bg-color-primary hover:bg-color-primary-hover", },
  border: { textClass: "color-text", buttonClass: "border-color-primary hover:border-color-primary-hover", },
}
buttonColor: {
  primary: {
    text: "[--text-color:var(--color-on-primary)]",
    button: "[--button-color:var(--bg-color-primary)] [--button-hover-color:var(--bg-color-primary-hover)]",
  },
  secondary: {
    text: "color-on-secondary",
    button: "bg-color-secondary hover:bg-color-secondary-hover",
  },
},
buttonStyle: {
  fill: {
    text: "color-(text-color)",
    button: "bg-color-(button-color) hover:bg-color-primary-hover",
  },
  outline: {
    text: "color-(button-color)",
    button: "bg-color-transparent hover:bg-color-scrim border-2 border-color-(button-color) ...",
  },
},
buttonWidth: {
  small: {
    __title: "Small",
    button: "min-w-button-sm",
  },
  medium: {
    __title: "Medium",
    button: "min-w-button-md",
  },
  large: {
    __title: "Large",
    button: "min-w-button-lg",
  },
},

Input
Textarea
Checkbox
Radio
Switch
Toggle
Select
Map : Value => {Key Value} Object *usage:
Icon Select
Date Picker

Back to Blog

Announcing a free plan for small teams

Company News

January 18, 2023

At preline, our mission has always been focused on bringing openness and transparency to the design process. We’ve always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow.

We’re proud to be a part of creating a more open culture and to continue building a product that supports this vision.

Working process

As we’ve grown, we’ve seen how Preline has helped companies such as Spotify, Microsoft, Airbnb, Facebook, and Intercom bring their designers closer together to create amazing things. We’ve also learned that when the culture of sharing is brought in earlier, the better teams adapt and communicate with one another.

That’s why we are excited to share that we now have a free version of Preline, which will allow individual designers, startups and other small teams a chance to create a culture of openness early on.

To say that switching to Preline has been life-changing is an understatement. My business has tripled and I got my life back.

Nicole Grazioso

A man and a woman looking at a cell phone.

Bringing the culture of sharing to everyone

We know the power of sharing is real, and we want to create an opportunity for everyone to try Preline and explore how transformative open communication can be. Now you can have a team of one or two designers and unlimited spectators (think PMs, management, marketing, etc.) share work and explore the design process earlier.

  • Preline allows us to collaborate in real time and is a really great way for leadership on the team to stay up-to-date with what everybody is working on,” said Stewart Scott-Curran, Intercom’s Director of Brand Design.
  • Preline opened a new way of sharing. It’s a persistent way for everyone to see and absorb each other’s work,” said David Scott, Creative Director at Eventbrite.

Small teams and individual designers need a space where they can watch the design process unfold, both for themselves and for the people they work with – no matter if it’s a fellow designer, product manager, developer or client. Preline allows you to invite more people into the process, creating a central place for conversation around design. As those teams grow, transparency and collaboration becomes integrated in how they communicate and work together.

PlanWeb developmentFreeTeam