「App:Library:Squareline:docs:docs:styles」の版間の差分

提供: robot-jp wiki
ナビゲーションに移動検索に移動
4行目: 4行目:
 
!訳
 
!訳
 
|-
 
|-
|
+
|You can create a custom style to every widget.
|
+
 
 +
Using styles, you can define how a widget and its elements look like and which effects are in use.
 +
|すべてのウィジェットにカスタム スタイルを作成できます。
 +
 
 +
スタイルを使用して、ウィジェットとその要素がどのように見えるか、およびどの効果が使用されているかを定義できます。
 
|}
 
|}
  
11行目: 15行目:
 
== Arc ==
 
== Arc ==
 
{| class="wikitable"
 
{| class="wikitable"
|
+
|Arc Style can be used in those widgets which have the Arc component.
|
+
 
 +
* '''Line color''' - The color of the line
 +
* '''Arc width''' - The width of the arc
 +
* '''Arc rounded''' - The ends of the arc line are rounded
 +
* '''Arc image''' - The background image for the arc line
 +
|Arc スタイルは、Arc コンポーネントを持つウィジェットで使用できます。
 +
 
 +
* '''線の色''' - 線の色
 +
* '''弧幅''' - 弧の幅
 +
* '''円弧の丸み''' - 円弧の端が丸くなっています
 +
* '''円弧イメージ''' - 円弧ラインの背景イメージ
 
|}
 
|}
  
18行目: 32行目:
 
== Background ==
 
== Background ==
 
{| class="wikitable"
 
{| class="wikitable"
|
+
|Background Style is the background of the widgets.
|
+
 
 +
You can create gradients or make the corners of the background rounded.
 +
 
 +
* '''Color and alpha''' - Set the background color and alpha of the object.
 +
* '''Gradient color''' - Set the gradient color of the background.
 +
* '''Bg main stop''' - Set the point from which the background color should start for gradients.
 +
* '''Bg gradinet stop''' - Set the point from which the background's gradient color should start
 +
* '''Bg radius''' - The radius you use to make the background corners rounded
 +
* '''Gradient direction''' - The direction of the gradient. It can be horizontal or vertical.
 +
* '''Clip corner''' - Enable to clip the overflowed content on the rounded corner.
 +
|背景スタイルは、ウィジェットの背景です。
 +
 
 +
グラデーションを作成したり、背景の角を丸くしたりできます。
 +
 
 +
* '''色とアルファ''' - オブジェクトの背景色とアルファを設定します。
 +
* '''グラデーション カラー''' - 背景のグラデーション カラーを設定します。
 +
* '''Bg main stop''' - グラデーションの背景色の開始点を設定します。
 +
* '''Bg gradinet stop''' - 背景のグラデーション カラーの開始点を設定します
 +
* '''Bg radius''' - 背景の角を丸くするために使用する半径
 +
* '''グラデーションの方向''' - グラデーションの方向。 水平または垂直にすることができます。
 +
* '''角を切り取る''' - 丸みを帯びた角でオーバーフローしたコンテンツを切り取ることができます。
 
|}
 
|}
  
25行目: 59行目:
 
== Background Image ==
 
== Background Image ==
 
{| class="wikitable"
 
{| class="wikitable"
|
+
|You can set an image as a background image.
|
+
 
 +
* '''Bg image''' - The image you use as a background image
 +
* '''Bg image opa''' - The opacity of the background image
 +
* '''Recolor''' - With Recolor function, you can use a color on the background image. Set the color depth by changing the alpha parameter.
 +
* '''Bg image tiled''' - If enabled, background image will be tiled
 +
|画像を背景画像として設定することができます。
 +
 
 +
* '''Bg image''' - 背景画像として使用する画像です。
 +
* '''Bg image opa''' - 背景画像の不透明度です。
 +
* '''Recolor''' - Recolor機能により、背景画像に色を使用することができます。アルファパラメータを変更することによって、色の深さを設定します。
 +
* '''Bg image tiled''' - 有効にされた場合、背景画像はタイル状になります。
 
|}
 
|}
  
32行目: 76行目:
 
== Blend ==
 
== Blend ==
 
{| class="wikitable"
 
{| class="wikitable"
|
+
|By using Blend Style, you can mix the pixel colors of the current widget part with the colors of the object followed by.
|
+
 
 +
* '''Blend mode''' - Choose from four options.
 +
** '''Normal''' - Default state
 +
** '''Additive''' - Adding up pixels
 +
** '''Subtractive''' - Subtract pixels
 +
** '''Multiply''' - Multiply pixels
 +
* '''Blend opacity''' - Here you can set the opacity of the widget part
 +
|ブレンド スタイルを使用すると、現在のウィジェット パーツのピクセル カラーと、次のオブジェクトのカラーをミックスできます。
 +
 
 +
* '''ブレンド モード''' - 4 つのオプションから選択します。
 +
* 通常 - デフォルト状態
 +
* Additive - ピクセルの加算
 +
* 減算 - ピクセルの減算
 +
* 乗算 - ピクセルを乗算します
 +
* '''ブレンドの不透明度''' - ここでは、ウィジェット パーツの不透明度を設定できます。
 
|}
 
|}
  

2022年8月4日 (木) 10:54時点における版

Styles

原文
You can create a custom style to every widget.

Using styles, you can define how a widget and its elements look like and which effects are in use.

すべてのウィジェットにカスタム スタイルを作成できます。

スタイルを使用して、ウィジェットとその要素がどのように見えるか、およびどの効果が使用されているかを定義できます。


Arc

Arc Style can be used in those widgets which have the Arc component.
  • Line color - The color of the line
  • Arc width - The width of the arc
  • Arc rounded - The ends of the arc line are rounded
  • Arc image - The background image for the arc line
Arc スタイルは、Arc コンポーネントを持つウィジェットで使用できます。
  • 線の色 - 線の色
  • 弧幅 - 弧の幅
  • 円弧の丸み - 円弧の端が丸くなっています
  • 円弧イメージ - 円弧ラインの背景イメージ


Background

Background Style is the background of the widgets.

You can create gradients or make the corners of the background rounded.

  • Color and alpha - Set the background color and alpha of the object.
  • Gradient color - Set the gradient color of the background.
  • Bg main stop - Set the point from which the background color should start for gradients.
  • Bg gradinet stop - Set the point from which the background's gradient color should start
  • Bg radius - The radius you use to make the background corners rounded
  • Gradient direction - The direction of the gradient. It can be horizontal or vertical.
  • Clip corner - Enable to clip the overflowed content on the rounded corner.
背景スタイルは、ウィジェットの背景です。

グラデーションを作成したり、背景の角を丸くしたりできます。

  • 色とアルファ - オブジェクトの背景色とアルファを設定します。
  • グラデーション カラー - 背景のグラデーション カラーを設定します。
  • Bg main stop - グラデーションの背景色の開始点を設定します。
  • Bg gradinet stop - 背景のグラデーション カラーの開始点を設定します
  • Bg radius - 背景の角を丸くするために使用する半径
  • グラデーションの方向 - グラデーションの方向。 水平または垂直にすることができます。
  • 角を切り取る - 丸みを帯びた角でオーバーフローしたコンテンツを切り取ることができます。


Background Image

You can set an image as a background image.
  • Bg image - The image you use as a background image
  • Bg image opa - The opacity of the background image
  • Recolor - With Recolor function, you can use a color on the background image. Set the color depth by changing the alpha parameter.
  • Bg image tiled - If enabled, background image will be tiled
画像を背景画像として設定することができます。
  • Bg image - 背景画像として使用する画像です。
  • Bg image opa - 背景画像の不透明度です。
  • Recolor - Recolor機能により、背景画像に色を使用することができます。アルファパラメータを変更することによって、色の深さを設定します。
  • Bg image tiled - 有効にされた場合、背景画像はタイル状になります。


Blend

By using Blend Style, you can mix the pixel colors of the current widget part with the colors of the object followed by.
  • Blend mode - Choose from four options.
    • Normal - Default state
    • Additive - Adding up pixels
    • Subtractive - Subtract pixels
    • Multiply - Multiply pixels
  • Blend opacity - Here you can set the opacity of the widget part
ブレンド スタイルを使用すると、現在のウィジェット パーツのピクセル カラーと、次のオブジェクトのカラーをミックスできます。
  • ブレンド モード - 4 つのオプションから選択します。
  • 通常 - デフォルト状態
  • Additive - ピクセルの加算
  • 減算 - ピクセルの減算
  • 乗算 - ピクセルを乗算します
  • ブレンドの不透明度 - ここでは、ウィジェット パーツの不透明度を設定できます。


Border


Line


Outline


Paddings


Shadow

Text




戻る : Previous