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

提供: robot-jp wiki
ナビゲーションに移動検索に移動
(ページの作成:「= = == == {| class="wikitable" !原文 !訳 |- | | |} == == {| class="wikitable" !原文 !訳 |- | | |} == == {| class="wikitable" !原文 !訳 |- | | |} == ==…」)
 
 
(同じ利用者による、間の5版が非表示)
1行目: 1行目:
−
= =
+
= Styles =
−
==  ==
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!原文
 
!原文
 
!訳
 
!訳
 
|-
 
|-
−
|
+
|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 ==
 +
{| 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 コンポーネントを持つウィジェットで使用できます。
 +
 
 +
* '''線の色''' - 線の色
 +
* '''弧幅''' - 弧の幅
 +
* '''円弧の丸み''' - 円弧の端が丸くなっています
 +
* '''円弧イメージ''' - 円弧ラインの背景イメージ
 +
|}
 +
 
 +
 
 +
== Background ==
 +
[[ファイル:LVGL docs example 005.png|100x100ピクセル]]
 +
{| 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''' - 背景の角を丸くするために使用する半径
 +
* '''グラデーションの方向''' - グラデーションの方向。 水平または垂直にすることができます。
 +
* '''角を切り取る''' - 丸みを帯びた角でオーバーフローしたコンテンツを切り取ることができます。
 +
|}
 +
 
 +
 
 +
== Background Image ==
 +
[[ファイル:LVGL docs example 009.png|100x100ピクセル]]
 +
{| 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''' - 有効にされた場合、背景画像はタイル状になります。
 +
|}
 +
 
 +
 
 +
== Blend ==
 +
{| 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''' - ピクセルの加算
 +
** '''減算''' - ピクセルの減算
 +
** '''乗算''' - ピクセルを乗算します
 +
* '''ブレンドの不透明度''' - ここでは、ウィジェット パーツの不透明度を設定できます。
 +
|}
 +
 
 +
== Border ==
 +
[[ファイル:LVGL docs example 006.png|100x100ピクセル]]
 +
{| class="wikitable"
 +
|Using Border, you can draw a border around the selected object onto the inner lines.
 +
 
 +
* '''Border color''' - The color of the border
 +
* '''Border width''' - The width of the border
 +
* '''Border side''' - The direction of the border
 +
|境界線を使用すると、選択したオブジェクトの内側の線に境界線を引くことができます。
 +
 
 +
* '''境界線の色''' - 境界線の色
 +
* '''ボーダー幅''' - ボーダーの幅
 +
* '''ボーダー側''' - ボーダーの方向
 
|}
 
|}
  
  
−
== ==
+
== Line ==
 
{| class="wikitable"
 
{| class="wikitable"
−
!原文
 
−
!訳
 
 
|-
 
|-
−
|
+
|Line Style can be used in those widgets which have the Line component.
−
|
+
 
 +
* Color - The color of the line
 +
* Width - The width of the line
 +
* Line rounded - The ends of the line will be rounded
 +
|線のスタイルは、線コンポーネントを持つウィジェットで使用できます。
 +
 
 +
* 色 - 線の色
 +
* 幅 - 線の幅
 +
* 線の丸め - 線の端が丸められます
 
|}
 
|}
  
  
−
== ==
+
== Outline ==
 +
[[ファイル:LVGL docs example 007.png|100x100ピクセル]]
 
{| class="wikitable"
 
{| class="wikitable"
−
!原文
+
|Outline style is similar to Border style but here you draw the border around the selected widget part.
−
!訳
+
 
−
|-
+
* Outline color - The color of the outline
−
|
+
* Outline width - The width of the outline
−
|
+
* Outline pad - Distance from the side of the widget in pixels
 +
|アウトライン スタイルは、ボーダー スタイルに似ていますが、ここでは、選択したウィジェット パーツの周囲に境界線を描画します。
 +
 
 +
* アウトラインの色 - アウトラインの色
 +
* アウトラインの幅 - アウトラインの幅
 +
* アウトライン パッド - ウィジェットの側面からの距離 (ピクセル単位)
 
|}
 
|}
  
  
−
== ==
+
== Paddings ==
 
{| class="wikitable"
 
{| class="wikitable"
−
!原文
 
−
!訳
 
−
|-
 
−
|
 
 
|
 
|
 +
 +
 +
Paddings style put a padding onto the widget part.
 +
 +
It means parts under it in the hierarchy will shift by the distance defined in the padding with pixel values.
 +
 +
* '''Pad''' - The extent of the padding
 +
|パディング スタイルは、ウィジェット パーツにパディングを配置します。
 +
 +
これは、階層内のその下の部分が、ピクセル値のパディングで定義された距離だけシフトすることを意味します。
 +
 +
* '''Pad''' - パディングの範囲
 
|}
 
|}
  
  
−
== ==
+
== Shadow ==
 +
[[ファイル:LVGL docs example 008.png|100x100ピクセル]]
 
{| class="wikitable"
 
{| class="wikitable"
−
!原文
+
|Using a Shadow Style, you can draw a shadow or a glow to the selected widget part.
−
!訳
+
 
−
|-
+
* '''Shadow color''' - The color of the shadow
−
|
+
* '''Shadow width''' - The width of the shadow
−
|
+
* '''Shadow spread''' - The depth of the shadow
 +
* '''Shadow OX''' - Shift the shadow on the X axis
 +
* '''Shadow OY''' - Shift the shadow on the Y axis
 +
|シャドウ スタイルを使用すると、選択したウィジェット パーツに影や光彩を描画できます。
 +
 
 +
* '''影の色''' - 影の色
 +
* '''影の幅''' - 影の幅
 +
* '''影の広がり''' - 影の深さ
 +
* '''Shadow OX''' - X 軸上で影を移動
 +
* '''Shadow OY''' - Y 軸上で影をシフトします
 
|}
 
|}
  
 +
== Text ==
 +
{| class="wikitable"
 +
|Text Style defines the parameters of the text that can be found on the widget.
 +
 +
* '''Text color''' - The color of the text
 +
* '''Letter spacing''' - The space between the letters
 +
* '''Line spacing''' - The space between the lines
 +
* '''Text align''' - The direction of text alignment
 +
* '''Text decor''' - You can overline or underline the text
 +
** '''None''' - Normal text
 +
** '''Understand''' - Underlined text
 +
** '''Strikethrough''' - Overlined text
 +
* '''Text font''' - The font of the text
 +
|テキスト スタイルは、ウィジェットで見つけることができるテキストのパラメーターを定義します。
 +
 +
* '''テキストの色''' - テキストの色
 +
* '''文字間隔''' - 文字間のスペース
 +
* '''行間隔''' - 行間のスペース
 +
* '''テキスト整列''' - テキスト整列の方向
 +
* '''テキスト装飾''' - テキストに上線または下線を引くことができます
 +
** '''なし''' - 通常のテキスト
 +
** '''理解''' - 下線付きテキスト
 +
** '''取り消し線''' - 上線付きテキスト
 +
* '''テキストのフォント''' - テキストのフォント
 +
|}
  
 
<BR />
 
<BR />

2022年8月4日 (木) 11:06時点における最新版

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

LVGL docs example 005.png

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

LVGL docs example 009.png

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

LVGL docs example 006.png

Using Border, you can draw a border around the selected object onto the inner lines.
  • Border color - The color of the border
  • Border width - The width of the border
  • Border side - The direction of the border
 境界線を使用すると、選択したオブジェクトの内側の線に境界線を引くことができます。
  • 境界線の色 - 境界線の色
  • ボーダー幅 - ボーダーの幅
  • ボーダー側 - ボーダーの方向


Line

Line Style can be used in those widgets which have the Line component.
  • Color - The color of the line
  • Width - The width of the line
  • Line rounded - The ends of the line will be rounded
 線のスタイルは、線コンポーネントを持つウィジェットで使用できます。
  • 色 - 線の色
  • 幅 - 線の幅
  • 線の丸め - 線の端が丸められます


Outline

LVGL docs example 007.png

Outline style is similar to Border style but here you draw the border around the selected widget part.
  • Outline color - The color of the outline
  • Outline width - The width of the outline
  • Outline pad - Distance from the side of the widget in pixels
 アウトライン スタイルは、ボーダー スタイルに似ていますが、ここでは、選択したウィジェット パーツの周囲に境界線を描画します。
  • アウトラインの色 - アウトラインの色
  • アウトラインの幅 - アウトラインの幅
  • アウトライン パッド - ウィジェットの側面からの距離 (ピクセル単位)


Paddings


Paddings style put a padding onto the widget part.

It means parts under it in the hierarchy will shift by the distance defined in the padding with pixel values.

  • Pad - The extent of the padding
 パディング スタイルは、ウィジェット パーツにパディングを配置します。

これは、階層内のその下の部分が、ピクセル値のパディングで定義された距離だけシフトすることを意味します。

  • Pad - パディングの範囲


Shadow

LVGL docs example 008.png

Using a Shadow Style, you can draw a shadow or a glow to the selected widget part.
  • Shadow color - The color of the shadow
  • Shadow width - The width of the shadow
  • Shadow spread - The depth of the shadow
  • Shadow OX - Shift the shadow on the X axis
  • Shadow OY - Shift the shadow on the Y axis
 シャドウ スタイルを使用すると、選択したウィジェット パーツに影や光彩を描画できます。
  • 影の色 - 影の色
  • 影の幅 - 影の幅
  • 影の広がり - 影の深さ
  • Shadow OX - X 軸上で影を移動
  • Shadow OY - Y 軸上で影をシフトします

Text

Text Style defines the parameters of the text that can be found on the widget.
  • Text color - The color of the text
  • Letter spacing - The space between the letters
  • Line spacing - The space between the lines
  • Text align - The direction of text alignment
  • Text decor - You can overline or underline the text
    • None - Normal text
    • Understand - Underlined text
    • Strikethrough - Overlined text
  • Text font - The font of the text
 テキスト スタイルは、ウィジェットで見つけることができるテキストのパラメーターを定義します。
  • テキストの色 - テキストの色
  • 文字間隔 - 文字間のスペース
  • 行間隔 - 行間のスペース
  • テキスト整列 - テキスト整列の方向
  • テキスト装飾 - テキストに上線または下線を引くことができます
    • なし - 通常のテキスト
    • 理解 - 下線付きテキスト
    • 取り消し線 - 上線付きテキスト
  • テキストのフォント - テキストのフォント




戻る : Previous

「https://robot-jp.com/wiki/index.php?title=App:Library:Squareline:docs:docs:styles&oldid=4814」から取得