「App:Library:LVGL:docs:Examples」の版間の差分
提供: robot-jp wiki
ナビゲーションに移動検索に移動(同じ利用者による、間の34版が非表示) | |||
2行目: | 2行目: | ||
__NOTOC__ | __NOTOC__ | ||
− | + | == Get started == | |
− | {| class="wikitable" | + | :{| class="wikitable" |
! | ! | ||
+ | !Link (Source code : C , MicroPython) | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|001 | |001 | ||
+ | |[[file:LVGL docs example 001.png|link=https://docs.lvgl.io/8.2/examples.html#a-button-with-a-label-and-react-on-click-event]] | ||
|A button with a label and react on click event | |A button with a label and react on click event | ||
|ラベルが付いたボタン | |ラベルが付いたボタン | ||
クリックイベントに反応します | クリックイベントに反応します | ||
− | |||
|- | |- | ||
|002 | |002 | ||
+ | |[[file:LVGL docs example 002.png|link=https://docs.lvgl.io/8.2/examples.html#create-styles-from-scratch-for-buttons]] | ||
|Create styles from scratch for buttons | |Create styles from scratch for buttons | ||
|ボタンのスタイルを最初から作成する | |ボタンのスタイルを最初から作成する | ||
− | |||
|- | |- | ||
|003 | |003 | ||
+ | |[[file:LVGL docs example 003.png|link=https://docs.lvgl.io/8.2/examples.html#create-a-slider-and-write-its-value-on-a-label]] | ||
|Create a slider and write its value on a label | |Create a slider and write its value on a label | ||
− | | | + | |スライダーを作成し、その値をラベルに書き込みます |
− | |||
|} | |} | ||
− | + | :[[App:Library:LVGL#Examples|戻る : Previous]] | |
− | {| class="wikitable" | + | |
+ | == Styles == | ||
+ | :{| class="wikitable" | ||
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|004 | |004 | ||
+ | |[[file:LVGL docs example 004.png|link=https://docs.lvgl.io/8.2/examples.html#size-styles]] | ||
|Size styles | |Size styles | ||
− | | | + | |サイズ |
− | |||
|- | |- | ||
|005 | |005 | ||
+ | |[[file:LVGL docs example 005.png|link=https://docs.lvgl.io/8.2/examples.html#background-styles]] | ||
|Background styles | |Background styles | ||
− | | | + | |背景 |
− | |||
|- | |- | ||
|006 | |006 | ||
+ | |[[file:LVGL docs example 006.png|link=https://docs.lvgl.io/8.2/examples.html#border-styles]] | ||
|Border styles | |Border styles | ||
− | | | + | |ボーダー |
− | |||
|- | |- | ||
|007 | |007 | ||
+ | |[[file:LVGL docs example 007.png|link=https://docs.lvgl.io/8.2/examples.html#outline-styles]] | ||
|Outline styles | |Outline styles | ||
− | | | + | |アウトライン |
− | |||
|- | |- | ||
|008 | |008 | ||
+ | |[[file:LVGL docs example 008.png|link=https://docs.lvgl.io/8.2/examples.html#shadow-styles]] | ||
|Shadow styles | |Shadow styles | ||
− | | | + | |影 |
− | |||
|- | |- | ||
|009 | |009 | ||
+ | |[[file:LVGL docs example 009.png|link=https://docs.lvgl.io/8.2/examples.html#image-styles]] | ||
|Image styles | |Image styles | ||
− | | | + | |画像 |
− | |||
|- | |- | ||
|010 | |010 | ||
+ | |[[file:LVGL docs example 010.png|link=https://docs.lvgl.io/8.2/examples.html#text-styles]] | ||
|Text styles | |Text styles | ||
− | | | + | |文字 |
− | |||
|- | |- | ||
|011 | |011 | ||
+ | |[[file:LVGL docs example 011.png|link=https://docs.lvgl.io/8.2/examples.html#line-styles]] | ||
|Line styles | |Line styles | ||
− | | | + | |線 |
− | |||
|- | |- | ||
|012 | |012 | ||
+ | |[[file:LVGL docs example 012.png|link=https://docs.lvgl.io/8.2/examples.html#transition]] | ||
|Transition | |Transition | ||
− | | | + | |遷移 |
− | |||
|- | |- | ||
|013 | |013 | ||
+ | |[[file:LVGL docs example 013.png|link=https://docs.lvgl.io/8.2/examples.html#using-multiple-styles]] | ||
|Using multiple styles | |Using multiple styles | ||
− | | | + | |複数のスタイルを使用 |
− | |||
|- | |- | ||
|014 | |014 | ||
+ | |[[file:LVGL docs example 014.png|link=https://docs.lvgl.io/8.2/examples.html#local-styles]] | ||
|Local styles | |Local styles | ||
− | | | + | |ローカルスタイル |
− | |||
|- | |- | ||
|016 | |016 | ||
+ | |[[file:LVGL docs example 016.png|link=https://docs.lvgl.io/8.2/examples.html#add-styles-to-parts-and-states]] | ||
|Add styles to parts and states | |Add styles to parts and states | ||
− | | | + | |パーツと状態にスタイルを追加 |
− | |||
|- | |- | ||
|017 | |017 | ||
+ | |[[file:LVGL docs example 017.png|link=https://docs.lvgl.io/8.2/examples.html#extending-the-current-theme]] | ||
|Extending the current theme | |Extending the current theme | ||
− | | | + | |現在のテーマを拡張 |
− | |||
|} | |} | ||
− | + | :[[App:Library:LVGL#Examples|戻る : Previous]] | |
− | {| class="wikitable" | + | |
+ | == Animations == | ||
+ | :{| class="wikitable" | ||
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|018 | |018 | ||
+ | |[[file:LVGL docs example 018.png|link=https://docs.lvgl.io/8.2/examples.html#start-animation-on-an-event]] | ||
| | | | ||
Start animation on an event | Start animation on an event | ||
− | | | + | |イベントでアニメーションを開始 |
− | |||
|- | |- | ||
|019 | |019 | ||
+ | |[[file:LVGL docs example 019.png|link=https://docs.lvgl.io/8.2/examples.html#playback-animation]] | ||
|Playback animation | |Playback animation | ||
− | | | + | |再生アニメーション |
− | |||
|- | |- | ||
|020 | |020 | ||
+ | |[[file:LVGL docs example 020.png|link=https://docs.lvgl.io/8.2/examples.html#animation-timeline]] | ||
|Animation timeline | |Animation timeline | ||
− | | | + | |アニメーションのタイムライン |
− | |||
|} | |} | ||
− | + | :[[App:Library:LVGL#Examples|戻る : Previous]] | |
− | {| class="wikitable" | + | |
+ | == Events == | ||
+ | :{| class="wikitable" | ||
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|021 | |021 | ||
+ | |[[file:LVGL docs example 021.png|link=https://docs.lvgl.io/8.2/examples.html#button-click-event]] | ||
|Button click event | |Button click event | ||
− | | | + | |ボタンクリックイベント |
− | |||
|- | |- | ||
|022 | |022 | ||
+ | |[[file:LVGL docs example 022.png|link=https://docs.lvgl.io/8.2/examples.html#handle-multiple-events]] | ||
|Handle multiple events | |Handle multiple events | ||
− | | | + | |複数のイベントを処理 |
− | |||
|- | |- | ||
|023 | |023 | ||
+ | |[[file:LVGL docs example 023.png|link=https://docs.lvgl.io/8.2/examples.html#event-bubbling]] | ||
|Event bubbling | |Event bubbling | ||
− | | | + | |イベントバブリング |
− | |||
|} | |} | ||
− | === | + | :[[App:Library:LVGL#Examples|戻る : Previous]] |
− | {| class="wikitable" | + | |
+ | == Layouts == | ||
+ | |||
+ | === Flex === | ||
+ | :{| class="wikitable" | ||
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|024 | |024 | ||
− | + | |[[file:LVGL docs example 024.png|link=https://docs.lvgl.io/8.2/examples.html#a-simple-row-and-a-column-layout-with-flexbox]] | |
− | + | |A simple row and a column layout with flexbox | |
− | |[[file:LVGL docs example 024.png]] | + | |フレックスボックスを使用した単純な行と列のレイアウト |
|- | |- | ||
|025 | |025 | ||
+ | |[[file:LVGL docs example 025.png|link=https://docs.lvgl.io/8.2/examples.html#arrange-items-in-rows-with-wrap-and-even-spacing]] | ||
|Arrange items in rows with wrap and even spacing | |Arrange items in rows with wrap and even spacing | ||
− | | | + | |アイテムを折り返し、均等な間隔で行に配置 |
− | |||
|- | |- | ||
|026 | |026 | ||
+ | |[[file:LVGL docs example 026.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-flex-grow]] | ||
|Demonstrate flex grow | |Demonstrate flex grow | ||
− | | | + | |フレックスグロー(デモ) |
− | |||
|- | |- | ||
|027 | |027 | ||
+ | |[[file:LVGL docs example 027.png|link=https://docs.lvgl.io/8.2/examples.html#id1]] | ||
|Demonstrate flex grow. | |Demonstrate flex grow. | ||
− | | | + | |フレックスの成長(デモ) |
− | |||
|- | |- | ||
|028 | |028 | ||
+ | |[[file:LVGL docs example 028.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-column-and-row-gap-style-properties]] | ||
|Demonstrate column and row gap style properties | |Demonstrate column and row gap style properties | ||
− | | | + | |列と行のギャップスタイルのプロパティ(デモ) |
− | |||
|- | |- | ||
|029 | |029 | ||
+ | |[[file:LVGL docs example 029.png|link=https://docs.lvgl.io/8.2/examples.html#rtl-base-direction-changes-order-of-the-items]] | ||
|RTL base direction changes order of the items | |RTL base direction changes order of the items | ||
− | | | + | |RTLベース方向はアイテムの順序を変更 |
− | |||
|} | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
=== Grid === | === Grid === | ||
− | {| class="wikitable" | + | :{| class="wikitable" |
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|030 | |030 | ||
+ | |[[file:LVGL docs example 030.png|link=https://docs.lvgl.io/8.2/examples.html#a-simple-grid]] | ||
|A simple grid | |A simple grid | ||
− | | | + | |シンプルなグリッド |
− | |||
|- | |- | ||
|031 | |031 | ||
+ | |[[file:LVGL docs example 031.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-cell-placement-and-span]] | ||
|Demonstrate cell placement and span | |Demonstrate cell placement and span | ||
− | | | + | |セルの配置とスパン |
− | |||
|- | |- | ||
|032 | |032 | ||
+ | |[[file:LVGL docs example 032.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-grid-s-free-unit]] | ||
|Demonstrate grid's "free unit" | |Demonstrate grid's "free unit" | ||
− | | | + | |グリッドの「フリーユニット」(デモ) |
− | |||
|- | |- | ||
|033 | |033 | ||
+ | |[[file:LVGL docs example 033.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-track-placement]] | ||
|Demonstrate track placement | |Demonstrate track placement | ||
− | | | + | |トラックの配置(デモ) |
− | |||
|- | |- | ||
|034 | |034 | ||
+ | |[[file:LVGL docs example 034.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-column-and-row-gap]] | ||
|Demonstrate column and row gap | |Demonstrate column and row gap | ||
− | | | + | |列と行のギャップ(デモ) |
− | |||
|- | |- | ||
|035 | |035 | ||
+ | |[[file:LVGL docs example 035.png|link=https://docs.lvgl.io/8.2/examples.html#demonstrate-rtl-direction-on-grid]] | ||
|Demonstrate RTL direction on grid | |Demonstrate RTL direction on grid | ||
− | | | + | |グリッド上でRTLの方向(デモ) |
− | |||
|} | |} | ||
− | + | :[[App:Library:LVGL#Examples|戻る : Previous]] | |
− | {| class="wikitable" | + | |
+ | == Scrolling == | ||
+ | :{| class="wikitable" | ||
! | ! | ||
+ | !Link | ||
!英文 | !英文 | ||
!自動翻訳 | !自動翻訳 | ||
− | |||
|- | |- | ||
|036 | |036 | ||
+ | |[[file:LVGL docs example 036.png|link=https://docs.lvgl.io/8.2/examples.html#nested-scrolling]] | ||
|Nested scrolling | |Nested scrolling | ||
− | | | + | |ネスト(入れ子)されたスクロール |
− | |||
|- | |- | ||
|037 | |037 | ||
+ | |[[file:LVGL docs example 037.png|link=https://docs.lvgl.io/8.2/examples.html#snapping]] | ||
|Snapping | |Snapping | ||
− | | | + | |スナップ |
− | |||
|- | |- | ||
|038 | |038 | ||
+ | |[[file:LVGL docs example 038.png|link=https://docs.lvgl.io/8.2/examples.html#floating-button]] | ||
|Floating button | |Floating button | ||
− | | | + | |フローティングボタン |
− | |||
|- | |- | ||
|039 | |039 | ||
+ | |[[file:LVGL docs example 039.png|link=https://docs.lvgl.io/8.2/examples.html#styling-the-scrollbars]] | ||
|Styling the scrollbars | |Styling the scrollbars | ||
− | | | + | |スクロールバーのスタイリング |
− | |||
|- | |- | ||
|040 | |040 | ||
+ | |[[file:LVGL docs example 040.png|link=https://docs.lvgl.io/8.2/examples.html#right-to-left-scrolling]] | ||
|Right to left scrolling | |Right to left scrolling | ||
− | | | + | |右から左へのスクロール |
− | |||
|- | |- | ||
|041 | |041 | ||
+ | |[[file:LVGL docs example 041.png|link=https://docs.lvgl.io/8.2/examples.html#translate-on-scroll]] | ||
|Translate on scroll | |Translate on scroll | ||
− | | | + | |説明のスクロール |
− | |[[ | + | |} |
− | + | :[[App:Library:LVGL#Examples|戻る : Previous]] | |
− | |||
− | |||
== Widgets == | == Widgets == | ||
− | |||
=== Base object === | === Base object === | ||
− | + | :{| class="wikitable" | |
− | + | ! | |
− | | | + | !Link |
− | |[[file:LVGL docs example 042.png]] | + | !英文 |
+ | !自動翻訳 | ||
+ | |- | ||
+ | |042 | ||
+ | |[[file:LVGL docs example 042.png|link=https://docs.lvgl.io/8.2/examples.html#base-objects-with-custom-styles]] | ||
+ | |Base objects with custom styles | ||
+ | |カスタムスタイルのベースオブジェクト | ||
|- | |- | ||
|043 | |043 | ||
+ | |[[file:LVGL docs example 043.png|link=https://docs.lvgl.io/8.2/examples.html#make-an-object-draggable]] | ||
|Make an object draggable | |Make an object draggable | ||
− | | | + | |オブジェクトをドラッグ可能にする |
− | |[[ | + | |} |
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Arc === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|044 | |044 | ||
− | + | |[[file:LVGL docs example 044.png|link=https://docs.lvgl.io/8.2/examples.html#simple-arc]] | |
− | + | |Simple Arc | |
− | + | |シンプルアーク | |
− | |||
− | |||
− | |||
− | |[[file:LVGL docs example 044.png]] | ||
|- | |- | ||
|045 | |045 | ||
+ | |[[file:LVGL docs example 045.png|link=https://docs.lvgl.io/8.2/examples.html#loader-with-arc]] | ||
|Loader with Arc | |Loader with Arc | ||
− | | | + | |アーク付きローダー |
− | |[[ | + | |} |
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Bar === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|046 | |046 | ||
− | + | |[[file:LVGL docs example 046.png|link=https://docs.lvgl.io/8.2/examples.html#simple-bar]] | |
− | + | |Simple Bar | |
− | + | |シンプルなバー | |
− | |||
− | |||
− | |||
− | |[[file:LVGL docs example 046.png]] | ||
|- | |- | ||
|047 | |047 | ||
+ | |[[file:LVGL docs example 047.png|link=https://docs.lvgl.io/8.2/examples.html#styling-a-bar]] | ||
|Styling a bar | |Styling a bar | ||
− | | | + | |バーのスタイリング |
− | |||
|- | |- | ||
|048 | |048 | ||
+ | |[[file:LVGL docs example 048.png|link=https://docs.lvgl.io/8.2/examples.html#temperature-meter]] | ||
|Temperature meter | |Temperature meter | ||
− | | | + | |温度計 |
− | |||
|- | |- | ||
|049 | |049 | ||
+ | |[[file:LVGL docs example 049.png|link=https://docs.lvgl.io/8.2/examples.html#stripe-pattern-and-range-value]] | ||
|Stripe pattern and range value | |Stripe pattern and range value | ||
− | | | + | |縞模様と範囲の値 |
− | |[[file:LVGL docs example | + | |- |
+ | |050 | ||
+ | |[[file:LVGL docs example 050.png|link=https://docs.lvgl.io/8.2/examples.html#bar-with-ltr-and-rtl-base-direction]] | ||
+ | |Bar with LTR and RTL base direction | ||
+ | |LTRおよびRTLベース方向のバー | ||
|- | |- | ||
|051 | |051 | ||
− | | | + | |[[file:LVGL docs example 051.png|link=https://docs.lvgl.io/8.2/examples.html#custom-drawer-to-show-the-current-value]] |
+ | |Custom drawer to show the current value | ||
+ | |現在の値を表示するカスタムドロワー | ||
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
− | + | === Button === | |
− | | | + | :{| class="wikitable" |
− | + | ! | |
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|052 | |052 | ||
− | + | |[[file:LVGL docs example 052.png|link=https://docs.lvgl.io/8.2/examples.html#simple-buttons]] | |
− | + | |Simple Buttons | |
− | + | |シンプルなボタン | |
− | |||
− | |||
− | |||
− | |[[file:LVGL docs example 052.png]] | ||
|- | |- | ||
|053 | |053 | ||
− | + | |[[file:LVGL docs example 053.png|link=https://docs.lvgl.io/8.2/examples.html#styling-buttons]] | |
− | + | |Styling buttons | |
− | |[[file:LVGL docs example 053.png]] | + | |スタイリングボタン |
|- | |- | ||
|054 | |054 | ||
− | + | |[[file:LVGL docs example 054.png|link=https://docs.lvgl.io/8.2/examples.html#gummy-button]] | |
− | + | |Gummy button | |
− | |[[file:LVGL docs example | + | |グミボタン |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Button matrix === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|055 | |055 | ||
− | + | |[[file:LVGL docs example 055.png|link=https://docs.lvgl.io/8.2/examples.html#simple-button-matrix]] | |
− | + | |Simple Button matrix | |
− | |[[file:LVGL docs example 055.png]] | + | |シンプルなボタンマトリックス |
|- | |- | ||
|056 | |056 | ||
− | + | |[[file:LVGL docs example 056.png|link=https://docs.lvgl.io/8.2/examples.html#custom-buttons]] | |
− | + | |Custom buttons | |
− | |[[file:LVGL docs example 056.png]] | + | |カスタムボタン |
|- | |- | ||
|057 | |057 | ||
− | + | |[[file:LVGL docs example 057.png|link=https://docs.lvgl.io/8.2/examples.html#pagination]] | |
− | + | |Pagination | |
− | |[[file:LVGL docs example 057.png]] | + | |ページ付け |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Calendar === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|058 | |058 | ||
− | + | |[[file:LVGL docs example 058.png|link=https://docs.lvgl.io/8.2/examples.html#calendar-with-header]] | |
− | + | |Calendar with header | |
− | |[[file:LVGL docs example 058.png]] | + | |ヘッダー付きカレンダー |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Canvas === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|059 | |059 | ||
− | + | |[[file:LVGL docs example 059.png|link=https://docs.lvgl.io/8.2/examples.html#drawing-on-the-canvas-and-rotate]] | |
− | + | |Drawing on the Canvas and rotate | |
− | |[[file:LVGL docs example 059.png]] | + | |キャンバスに描画して回転 |
|- | |- | ||
|060 | |060 | ||
− | + | |[[file:LVGL docs example 060.png|link=https://docs.lvgl.io/8.2/examples.html#transparent-canvas-with-chroma-keying]] | |
− | + | |Transparent Canvas with chroma keying | |
− | |[[file:LVGL docs example 060.png]] | + | |クロマキー付きの透明なキャンバス |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Chart === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|061 | |061 | ||
− | + | |[[file:LVGL docs example 061.png|link=https://docs.lvgl.io/8.2/examples.html#line-chart]] | |
− | + | |Line Chart | |
− | |[[file:LVGL docs example 061.png]] | + | |折れ線グラフ |
|- | |- | ||
|062 | |062 | ||
− | + | |[[file:LVGL docs example 062.png|link=https://docs.lvgl.io/8.2/examples.html#faded-area-line-chart-with-custom-division-lines]] | |
− | + | |Faded area line chart with custom division lines | |
− | |[[file:LVGL docs example 062.png]] | + | |カスタム分割線を使用した色あせたエリア折れ線グラフ |
|- | |- | ||
|063 | |063 | ||
− | + | |[[file:LVGL docs example 063.png|link=https://docs.lvgl.io/8.2/examples.html#axis-ticks-and-labels-with-scrolling]] | |
− | + | |Axis ticks and labels with scrolling | |
− | |[[file:LVGL docs example 063.png]] | + | |目盛りとスクロールするラベル付きの軸 |
|- | |- | ||
|064 | |064 | ||
− | + | |[[file:LVGL docs example 064.png|link=https://docs.lvgl.io/8.2/examples.html#show-the-value-of-the-pressed-points]] | |
− | + | |Show the value of the pressed points | |
− | |[[file:LVGL docs example 064.png]] | + | |押されたポイントの値を表示 |
|- | |- | ||
|065 | |065 | ||
− | + | |[[file:LVGL docs example 065.png|link=https://docs.lvgl.io/8.2/examples.html#display-1000-data-points-with-zooming-and-scrolling]] | |
− | + | |Display 1000 data points with zooming and scrolling | |
− | |[[file:LVGL docs example 065.png]] | + | |ズームとスクロールで1000個のデータポイントを表示 |
|- | |- | ||
|066 | |066 | ||
− | + | |[[file:LVGL docs example 066.png|link=https://docs.lvgl.io/8.2/examples.html#show-cursor-on-the-clicked-point]] | |
− | + | |Show cursor on the clicked point | |
− | |[[file:LVGL docs example 066.png]] | + | |クリックしたポイントにカーソルを表示 |
|- | |- | ||
|067 | |067 | ||
− | + | |[[file:LVGL docs example 067.png|link=https://docs.lvgl.io/8.2/examples.html#scatter-chart]] | |
− | + | |Scatter chart | |
− | |[[file:LVGL docs example 067.png]] | + | |散布図 |
|- | |- | ||
|068 | |068 | ||
− | + | |[[file:LVGL docs example 068.png|link=https://docs.lvgl.io/8.2/examples.html#stacked-area-chart]] | |
− | + | |Stacked area chart | |
− | |[[file:LVGL docs example 068.png]] | + | |積み上げ面グラフ |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Checkbox === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|069 | |069 | ||
− | | | + | |[[file:LVGL docs example 069.png|link=https://docs.lvgl.io/8.2/examples.html#simple-checkboxes]] |
− | | | + | |Simple Checkboxes |
− | |[[file:LVGL docs example | + | |シンプルなチェックボックス |
+ | |- | ||
+ | |070 | ||
+ | |[[file:LVGL docs example 070.png|link=https://docs.lvgl.io/8.2/examples.html#checkboxes-as-radio-buttons]] | ||
+ | |Checkboxes as radio buttons | ||
+ | |ラジオボタンとしてのチェックボックス | ||
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Colorwheel === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|071 | |071 | ||
− | + | |[[file:LVGL docs example 071.png|link=https://docs.lvgl.io/8.2/examples.html#simple-colorwheel]] | |
− | + | |Simple Colorwheel | |
− | |[[file:LVGL docs example 071.png]] | + | |シンプルなカラーホイール |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Dropdown === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|072 | |072 | ||
− | + | |[[file:LVGL docs example 072.png|link=https://docs.lvgl.io/8.2/examples.html#simple-drop-down-list]] | |
− | + | |Simple Drop down list | |
− | |[[file:LVGL docs example 072.png]] | + | |シンプルなドロップダウンリスト |
|- | |- | ||
|073 | |073 | ||
− | + | |[[file:LVGL docs example 073.png|link=https://docs.lvgl.io/8.2/examples.html#drop-down-in-four-directions]] | |
− | + | |Drop down in four directions | |
− | |[[file:LVGL docs example 073.png]] | + | |4方向のドロップダウン |
|- | |- | ||
|074 | |074 | ||
− | + | |[[file:LVGL docs example 074.png|link=https://docs.lvgl.io/8.2/examples.html#menu]] | |
− | + | |Menu | |
− | |[[file:LVGL docs example 074.png]] | + | |メニュー |
|- | |- | ||
|075 | |075 | ||
− | + | |[[file:LVGL docs example 075.png|link=https://docs.lvgl.io/8.2/examples.html#image-from-variable-and-symbol]] | |
− | + | |Image | |
− | |[[file:LVGL docs example 075.png]] | + | |画像 |
|- | |- | ||
|076 | |076 | ||
− | + | |[[file:LVGL docs example 076.png|link=https://docs.lvgl.io/8.2/examples.html#image-recoloring]] | |
− | + | |Image recoloring | |
− | |[[file:LVGL docs example 076.png]] | + | |画像の色変更 |
|- | |- | ||
|077 | |077 | ||
− | + | |[[file:LVGL docs example 077.png|link=https://docs.lvgl.io/8.2/examples.html#rotate-and-zoom]] | |
− | + | |Rotate and zoom | |
− | |[[file:LVGL docs example 077.png]] | + | |回転およびズーム |
|- | |- | ||
|078 | |078 | ||
− | + | |[[file:LVGL docs example 078.png|link=https://docs.lvgl.io/8.2/examples.html#image-offset-and-styling]] | |
− | + | |Image offset and styling | |
− | |[[file:LVGL docs example 078.png]] | + | |画像のオフセットとスタイリング |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Image button === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|079 | |079 | ||
− | | | + | |[[file:LVGL docs example 079.png|link=https://docs.lvgl.io/8.2/examples.html#simple-image-button]] |
− | | | + | |Simple Image button |
− | |[[file:LVGL docs example | + | |シンプルな画像ボタン |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Keyboard === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
+ | |- | ||
+ | |080 | ||
+ | |[[file:LVGL docs example 080.png|link=https://docs.lvgl.io/8.2/examples.html#keyboard-with-text-area]] | ||
+ | |Keyboard with text area | ||
+ | |テキストエリア付きキーボード | ||
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Label === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|081 | |081 | ||
− | + | |[[file:LVGL docs example 081.png|link=https://docs.lvgl.io/8.2/examples.html#line-wrap-recoloring-and-scrolling]] | |
− | + | |Line wrap, recoloring and scrolling | |
− | |[[file:LVGL docs example 081.png]] | + | |行の折り返し、色の変更、スクロール |
|- | |- | ||
|082 | |082 | ||
− | + | |[[file:LVGL docs example 082.png|link=https://docs.lvgl.io/8.2/examples.html#text-shadow]] | |
− | + | |Text shadow | |
− | |[[file:LVGL docs example 082.png]] | + | |テキストシャドウ |
|- | |- | ||
|083 | |083 | ||
− | + | |[[file:LVGL docs example 083.png|link=https://docs.lvgl.io/8.2/examples.html#show-ltr-rtl-and-chinese-texts]] | |
− | + | |Show LTR, RTL and Chinese texts | |
− | |[[file:LVGL docs example 083.png]] | + | |LTR、RTL、中国語のテキストを表示 |
|- | |- | ||
|084 | |084 | ||
− | + | |[[file:LVGL docs example 084.png|link=https://docs.lvgl.io/8.2/examples.html#draw-label-with-gradient-color]] | |
− | + | |Draw label with gradient color | |
− | |[[file:LVGL docs example 084.png]] | + | |グラデーションカラーでラベルを描く |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === LED === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|085 | |085 | ||
− | + | |[[file:LVGL docs example 085.png|link=https://docs.lvgl.io/8.2/examples.html#led-with-custom-style]] | |
− | + | |LED with custom style | |
− | |[[file:LVGL docs example 085.png]] | + | |カスタムスタイルのLED |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Line === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|086 | |086 | ||
− | + | |[[file:LVGL docs example 086.png|link=https://docs.lvgl.io/8.2/examples.html#simple-line]] | |
− | + | |Simple Line | |
− | |[[file:LVGL docs example 086.png]] | + | |シンプルなライン |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === List === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|087 | |087 | ||
− | + | |[[file:LVGL docs example 087.png|link=https://docs.lvgl.io/8.2/examples.html#simple-list]] | |
− | + | |Simple List | |
− | |[[file:LVGL docs example 087.png]] | + | |簡単なリスト |
|- | |- | ||
|088 | |088 | ||
− | + | |[[file:LVGL docs example 088.png|link=https://docs.lvgl.io/8.2/examples.html#sorting-a-list-using-up-and-down-buttons]] | |
− | + | |Sorting a List using up and down buttons | |
− | |[[file:LVGL docs example 088.png]] | + | |上ボタンと下ボタンを使用してリストを並べ替える |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Menu === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|089 | |089 | ||
− | + | |[[file:LVGL docs example 089.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu]] | |
− | + | |Simple Menu | |
− | |[[file:LVGL docs example 089.png]] | + | |シンプルメニュー |
|- | |- | ||
|090 | |090 | ||
− | + | |[[file:LVGL docs example 090.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-root-btn]] | |
− | + | |Simple Menu with root btn | |
− | |[[file:LVGL docs example 090.png]] | + | |ルートボタンのシンプルなメニュー |
|- | |- | ||
|091 | |091 | ||
− | + | |[[file:LVGL docs example 091.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-custom-header]] | |
− | + | |Simple Menu with custom header | |
− | |[[file:LVGL docs example 091.png]] | + | |カスタムヘッダー付きのシンプルなメニュー |
|- | |- | ||
|092 | |092 | ||
− | + | |[[file:LVGL docs example 092.png|link=https://docs.lvgl.io/8.2/examples.html#simple-menu-with-floating-btn-to-add-new-menu-page]] | |
− | + | |Simple Menu with floating btn to add new menu page | |
− | |[[file:LVGL docs example 092.png]] | + | |新しいメニューページを追加するためのフローティングボタンを備えたシンプルなメニュー |
|- | |- | ||
|093 | |093 | ||
− | + | |[[file:LVGL docs example 093.png|link=https://docs.lvgl.io/8.2/examples.html#complex-menu]] | |
− | + | |Complex Menu | |
− | |[[file:LVGL docs example 093.png]] | + | |複雑なメニュー |
|- | |- | ||
|094 | |094 | ||
− | + | |[[file:LVGL docs example 094.png|link=https://docs.lvgl.io/8.2/examples.html#simple-meter]] | |
− | + | |Simple meter | |
− | |[[file:LVGL docs example 094.png]] | + | |シンプルなメーター |
|- | |- | ||
|095 | |095 | ||
− | + | |[[file:LVGL docs example 095.png|link=https://docs.lvgl.io/8.2/examples.html#a-meter-with-multiple-arcs]] | |
− | + | |A meter with multiple arcs | |
− | |[[file:LVGL docs example 095.png]] | + | |複数のアークを備えたメーター |
|- | |- | ||
|096 | |096 | ||
− | + | |[[file:LVGL docs example 096.png|link=https://docs.lvgl.io/8.2/examples.html#a-clock-from-a-meter]] | |
− | + | |A clock from a meter | |
− | |[[file:LVGL docs example 096.png]] | + | |メーターからの時計 |
|- | |- | ||
|097 | |097 | ||
− | + | |[[file:LVGL docs example 097.png|link=https://docs.lvgl.io/8.2/examples.html#pie-chart]] | |
− | + | |Pie chart | |
− | |[[file:LVGL docs example 097.png]] | + | |円グラフ |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Messqage box === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|098 | |098 | ||
− | + | |[[file:LVGL docs example 098.png|link=https://docs.lvgl.io/8.2/examples.html#simple-message-box]] | |
− | + | |Simple Message box | |
− | |[[file:LVGL docs example 098.png]] | + | |シンプルなメッセージボックス |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Roller === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|099 | |099 | ||
− | | | + | |[[file:LVGL docs example 099.png|link=https://docs.lvgl.io/8.2/examples.html#simple-roller]] |
− | | | + | |Simple Roller |
− | |[[file:LVGL docs example | + | |シンプルローラー |
+ | |- | ||
+ | |100 | ||
+ | |[[file:LVGL docs example 100.png|link=https://docs.lvgl.io/8.2/examples.html#styling-the-roller]] | ||
+ | |Styling the roller | ||
+ | |ローラーのスタイリング | ||
|- | |- | ||
|101 | |101 | ||
− | + | |[[file:LVGL docs example 101.png|link=https://docs.lvgl.io/8.2/examples.html#add-fade-mask-to-roller]] | |
− | + | |add fade mask to roller | |
− | |[[file:LVGL docs example 101.png]] | + | |ローラーにフェードマスクを追加 |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Slider === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|102 | |102 | ||
− | + | |[[file:LVGL docs example 102.png|link=https://docs.lvgl.io/8.2/examples.html#simple-slider]] | |
− | + | |Simple Slider | |
− | |[[file:LVGL docs example 102.png]] | + | |シンプルなスライダー |
|- | |- | ||
|103 | |103 | ||
− | + | |[[file:LVGL docs example 103.png|link=https://docs.lvgl.io/8.2/examples.html#slider-with-custom-style]] | |
− | + | |Slider with custom style | |
− | |[[file:LVGL docs example 103.png]] | + | |カスタムスタイルのスライダー |
|- | |- | ||
|104 | |104 | ||
− | + | |[[file:LVGL docs example 104.png|link=https://docs.lvgl.io/8.2/examples.html#slider-with-extended-drawer]] | |
− | + | |Slider with extended drawer | |
− | |[[file:LVGL docs example 104.png]] | + | |拡張引き出し付きスライダー |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Span === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|105 | |105 | ||
− | + | |[[file:LVGL docs example 105.png|link=https://docs.lvgl.io/8.2/examples.html#span-with-custom-styles]] | |
− | + | |Span with custom styles | |
− | |[[file:LVGL docs example 105.png]] | + | |カスタムスタイル付きSPAN |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Spinbox === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|106 | |106 | ||
− | + | |[[file:LVGL docs example 106.png|link=https://docs.lvgl.io/8.2/examples.html#simple-spinbox]] | |
− | + | |Simple Spinbox | |
− | |[[file:LVGL docs example 106.png]] | + | |シンプルなスピンボックス |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Spinner === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|107 | |107 | ||
− | + | |[[file:LVGL docs example 107.png|link=https://docs.lvgl.io/8.2/examples.html#simple-spinner]] | |
− | + | |Simple spinner | |
− | |[[file:LVGL docs example 107.png]] | + | |シンプルなスピナー |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Switch === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|108 | |108 | ||
− | + | |[[file:LVGL docs example 108.png|link=https://docs.lvgl.io/8.2/examples.html#simple-switch]] | |
− | + | |Simple Switch | |
− | |[[file:LVGL docs example 108.png]] | + | |シンプルなスイッチ |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Table === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|109 | |109 | ||
− | + | |[[file:LVGL docs example 109.png|link=https://docs.lvgl.io/8.2/examples.html#simple-table]] | |
− | + | |Simple table | |
− | |[[file:LVGL docs example 109.png]] | + | |シンプルなテーブル |
|- | |- | ||
|110 | |110 | ||
− | + | |[[file:LVGL docs example 110.png|link=https://docs.lvgl.io/8.2/examples.html#lightweighted-list-from-table]] | |
− | + | |Lightweighted list from table | |
− | |[[file:LVGL docs example 110.png]] | + | |テーブルからの軽量化されたリスト |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Tabview === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|111 | |111 | ||
− | + | |[[file:LVGL docs example 111.png|link=https://docs.lvgl.io/8.2/examples.html#simple-tabview]] | |
− | + | |Simple Tabview | |
− | |[[file:LVGL docs example 111.png]] | + | |シンプルなタブビュー |
|- | |- | ||
|112 | |112 | ||
− | + | |[[file:LVGL docs example 112.png|link=https://docs.lvgl.io/8.2/examples.html#tabs-on-the-left-styling-and-no-scrolling]] | |
− | + | |Tabs on the left, styling and no scrolling | |
− | |[[file:LVGL docs example 112.png]] | + | |左側のタブ(スタイリング入り、スクロールなし) |
|- | |- | ||
|113 | |113 | ||
− | + | |[[file:LVGL docs example 113.png|link=https://docs.lvgl.io/8.2/examples.html#simple-text-area]] | |
− | + | |Simple Text area | |
− | |[[file:LVGL docs example 113.png]] | + | |シンプルなテキストエリア |
|- | |- | ||
|114 | |114 | ||
− | + | |[[file:LVGL docs example 114.png|link=https://docs.lvgl.io/8.2/examples.html#text-area-with-password-field]] | |
− | + | |Text area with password field | |
− | |[[file:LVGL docs example 114.png]] | + | |パスワードフィールドのあるテキスト領域 |
|- | |- | ||
|115 | |115 | ||
− | + | |[[file:LVGL docs example 115.png|link=https://docs.lvgl.io/8.2/examples.html#text-auto-formatting]] | |
− | + | |Text auto-formatting | |
− | |[[file:LVGL docs example 115.png]] | + | |テキストの自動フォーマット |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Tabview === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|116 | |116 | ||
− | + | |[[file:LVGL docs example 116.png|link=https://docs.lvgl.io/8.2/examples.html#tileview-with-content]] | |
− | + | |Tileview with content | |
− | |[[file:LVGL docs example 116.png]] | + | |コンテンツ付きのタイルビュー |
+ | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] | ||
+ | |||
+ | === Window === | ||
+ | :{| class="wikitable" | ||
+ | ! | ||
+ | !Link | ||
+ | !英文 | ||
+ | !自動翻訳 | ||
|- | |- | ||
|117 | |117 | ||
− | + | |[[file:LVGL docs example 117.png|link=https://docs.lvgl.io/8.2/examples.html#simple-window]] | |
− | + | |Simple window | |
− | |[[file:LVGL docs example 117.png]] | + | |シンプルなウィンドウ |
|} | |} | ||
+ | :[[App:Library:LVGL#Examples|戻る : Previous]] |
2022年6月22日 (水) 21:50時点における最新版
https://docs.lvgl.io/8.2/examples.html
Get started
Styles
Animations
Link 英文 自動翻訳 018 Start animation on an event
イベントでアニメーションを開始 019 Playback animation 再生アニメーション 020 Animation timeline アニメーションのタイムライン
Events
Link 英文 自動翻訳 021 Button click event ボタンクリックイベント 022 Handle multiple events 複数のイベントを処理 023 Event bubbling イベントバブリング
Layouts
Flex
Grid
Scrolling
Widgets
Base object
Link 英文 自動翻訳 042 Base objects with custom styles カスタムスタイルのベースオブジェクト 043 Make an object draggable オブジェクトをドラッグ可能にする
Arc
Bar
Button
Button matrix
Link 英文 自動翻訳 055 Simple Button matrix シンプルなボタンマトリックス 056 Custom buttons カスタムボタン 057 Pagination ページ付け
Calendar
Canvas
Link 英文 自動翻訳 059 Drawing on the Canvas and rotate キャンバスに描画して回転 060 Transparent Canvas with chroma keying クロマキー付きの透明なキャンバス
Chart
Checkbox
Colorwheel
Dropdown
Image button
Keyboard
Label
LED
Line
List
Link 英文 自動翻訳 087 Simple List 簡単なリスト 088 Sorting a List using up and down buttons 上ボタンと下ボタンを使用してリストを並べ替える
Menu
Messqage box
Roller
Link 英文 自動翻訳 099 Simple Roller シンプルローラー 100 Styling the roller ローラーのスタイリング 101 add fade mask to roller ローラーにフェードマスクを追加
Slider
Link 英文 自動翻訳 102 Simple Slider シンプルなスライダー 103 Slider with custom style カスタムスタイルのスライダー 104 Slider with extended drawer 拡張引き出し付きスライダー