「App:Library:Squareline:docs:docs:styles」の版間の差分
提供: robot-jp wiki
ナビゲーションに移動検索に移動 (→Blend) |
(→Text) |
||
(同じ利用者による、間の1版が非表示) | |||
31行目: | 31行目: | ||
== Background == | == Background == | ||
+ | [[ファイル:LVGL docs example 005.png|100x100ピクセル]] | ||
{| class="wikitable" | {| class="wikitable" | ||
|Background Style is the background of the widgets. | |Background Style is the background of the widgets. | ||
58行目: | 59行目: | ||
== Background Image == | == Background Image == | ||
+ | [[ファイル:LVGL docs example 009.png|100x100ピクセル]] | ||
{| class="wikitable" | {| class="wikitable" | ||
|You can set an image as a background image. | |You can set an image as a background image. | ||
95行目: | 97行目: | ||
== Border == | == Border == | ||
+ | [[ファイル:LVGL docs example 006.png|100x100ピクセル]] | ||
{| class="wikitable" | {| 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 | ||
+ | |境界線を使用すると、選択したオブジェクトの内側の線に境界線を引くことができます。 | ||
+ | |||
+ | * '''境界線の色''' - 境界線の色 | ||
+ | * '''ボーダー幅''' - ボーダーの幅 | ||
+ | * '''ボーダー側''' - ボーダーの方向 | ||
|} | |} | ||
104行目: | 115行目: | ||
{| 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 == | == 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 | ||
+ | |アウトライン スタイルは、ボーダー スタイルに似ていますが、ここでは、選択したウィジェット パーツの周囲に境界線を描画します。 | ||
+ | |||
+ | * アウトラインの色 - アウトラインの色 | ||
+ | * アウトラインの幅 - アウトラインの幅 | ||
+ | * アウトライン パッド - ウィジェットの側面からの距離 (ピクセル単位) | ||
|} | |} | ||
119行目: | 147行目: | ||
{| 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 == | == 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 == | == Text == | ||
{| class="wikitable" | {| 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 | ||
+ | |テキスト スタイルは、ウィジェットで見つけることができるテキストのパラメーターを定義します。 | ||
+ | |||
+ | * '''テキストの色''' - テキストの色 | ||
+ | * '''文字間隔''' - 文字間のスペース | ||
+ | * '''行間隔''' - 行間のスペース | ||
+ | * '''テキスト整列''' - テキスト整列の方向 | ||
+ | * '''テキスト装飾''' - テキストに上線または下線を引くことができます | ||
+ | ** '''なし''' - 通常のテキスト | ||
+ | ** '''理解''' - 下線付きテキスト | ||
+ | ** '''取り消し線''' - 上線付きテキスト | ||
+ | * '''テキストのフォント''' - テキストのフォント | ||
|} | |} | ||
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.
|
Arc スタイルは、Arc コンポーネントを持つウィジェットで使用できます。
|
Background
Background Style is the background of the widgets.
You can create gradients or make the corners of the background rounded.
|
背景スタイルは、ウィジェットの背景です。
グラデーションを作成したり、背景の角を丸くしたりできます。
|
Background Image
You can set an image as a background image.
|
画像を背景画像として設定することができます。
|
Blend
By using Blend Style, you can mix the pixel colors of the current widget part with the colors of the object followed by.
|
ブレンド スタイルを使用すると、現在のウィジェット パーツのピクセル カラーと、次のオブジェクトのカラーをミックスできます。
|
Border
Using Border, you can draw a border around the selected object onto the inner lines.
|
境界線を使用すると、選択したオブジェクトの内側の線に境界線を引くことができます。
|
Line
Line Style can be used in those widgets which have the Line component.
|
線のスタイルは、線コンポーネントを持つウィジェットで使用できます。
|
Outline
Outline style is similar to Border style but here you draw the border around the selected widget part.
|
アウトライン スタイルは、ボーダー スタイルに似ていますが、ここでは、選択したウィジェット パーツの周囲に境界線を描画します。
|
Paddings
It means parts under it in the hierarchy will shift by the distance defined in the padding with pixel values.
|
パディング スタイルは、ウィジェット パーツにパディングを配置します。
これは、階層内のその下の部分が、ピクセル値のパディングで定義された距離だけシフトすることを意味します。
|
Shadow
Using a Shadow Style, you can draw a shadow or a glow to the selected widget part.
|
シャドウ スタイルを使用すると、選択したウィジェット パーツに影や光彩を描画できます。
|
Text
Text Style defines the parameters of the text that can be found on the widget.
|
テキスト スタイルは、ウィジェットで見つけることができるテキストのパラメーターを定義します。
|