「App:Library:Squareline:docs:tutorials:use style」の版間の差分
提供: robot-jp wiki
ナビゲーションに移動検索に移動 (ページの作成:「= = == == {| class="wikitable" !原文 !訳 |- | | |} == == {| class="wikitable" !原文 !訳 |- | | |} == == {| class="wikitable" !原文 !訳 |- | | |} == ==…」) |
|||
(同じ利用者による、間の1版が非表示) | |||
1行目: | 1行目: | ||
− | = | + | = Tutorial 3 - Add styles = |
− | |||
{| class="wikitable" | {| class="wikitable" | ||
!原文 | !原文 | ||
!訳 | !訳 | ||
|- | |- | ||
− | | | + | |Creating a project, a default style is created automatically. |
− | | | + | |
+ | For example if you create a button, it will have a default color, a default border, etc. | ||
+ | |プロジェクトを作成すると、デフォルトのスタイルが自動的に作成されます。 | ||
+ | |||
+ | たとえば、ボタンを作成すると、デフォルトの色、デフォルトの境界線などが設定されます。 | ||
|} | |} | ||
− | == | + | == Add and modify styles on a widget == |
{| class="wikitable" | {| class="wikitable" | ||
− | + | |Load the project you have created in '''<u>[[App:Library:Squareline:docs:docs:tutorials:new app|Tutorial 2]]</u>'''. | |
− | |||
− | | | ||
− | | | ||
− | |||
− | |||
+ | * Select '''Button 1''' on the first screen. You can find '''<u>[[App:Library:Squareline:docs:docs:styles|Style]]</u>''' in the '''Inspector panel STYLE SETTINGS''' group. | ||
+ | * Open '''Background''' group then select the first checkbox to activate background color change. The background color of the button will change to white. | ||
+ | * Set the following parameters: '''R=50, G=200, B=50'''. Now the background color of the button turns to green. If you would like to choose from a color palette instead, click on the checkbox on the right to make '''Color Changer''' window appear. | ||
− | + | Just like in the previous example, any style parameter can be modified or added. | |
− | + | |'''<u>[[App:Library:Squareline:docs:docs:tutorials:new app|Tutorial 2]]</u>''' で作成したプロジェクトを読み込みます。 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | | | ||
+ | 最初の画面で'''ボタン 1''' を選択します。 '''<u>[[App:Library:Squareline:docs:docs:styles|Style]]</u>'''は、'''インスペクター パネルの STYLE SETTINGS''' グループにあります。 | ||
− | + | '''背景'''グループを開き、最初のチェックボックスを選択して背景色の変更を有効にします。 ボタンの背景色が白に変わります。 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | 次のパラメータを設定します: '''R=50、G=200、B=50'''。 ボタンの背景色が緑色に変わります。 代わりにカラー パレットから選択する場合は、右側のチェックボックスをクリックして、['''カラー チェンジャー'''] ウィンドウを表示します。 | ||
− | + | 前の例と同様に、任意のスタイル パラメータを変更または追加できます。 | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
|} | |} | ||
2022年8月4日 (木) 12:17時点における最新版
Tutorial 3 - Add styles
原文 | 訳 |
---|---|
Creating a project, a default style is created automatically.
For example if you create a button, it will have a default color, a default border, etc. |
プロジェクトを作成すると、デフォルトのスタイルが自動的に作成されます。
たとえば、ボタンを作成すると、デフォルトの色、デフォルトの境界線などが設定されます。 |
Add and modify styles on a widget
Load the project you have created in Tutorial 2.
Just like in the previous example, any style parameter can be modified or added. |
Tutorial 2 で作成したプロジェクトを読み込みます。
最初の画面でボタン 1 を選択します。 Styleは、インスペクター パネルの STYLE SETTINGS グループにあります。 背景グループを開き、最初のチェックボックスを選択して背景色の変更を有効にします。 ボタンの背景色が白に変わります。 次のパラメータを設定します: R=50、G=200、B=50。 ボタンの背景色が緑色に変わります。 代わりにカラー パレットから選択する場合は、右側のチェックボックスをクリックして、[カラー チェンジャー] ウィンドウを表示します。 前の例と同様に、任意のスタイル パラメータを変更または追加できます。 |