<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

プロパティを渡して非表示のイベントにバインドしましょう。クリックハンドラーをその閉じるボタンに追加して、sl-hideプロパティをfalseに設(shè)定しましょう。これもダイアログを閉じます。 open open

let tabs;

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

しかし、靴棚 - ウェブコンポーネントで構(gòu)築された - は、何か、特にスタイルが私たちが慣れているものとは少し異なる動作をすることを意味します。

すべてのスタイルをカスタマイズしてください！

執(zhí)筆時點では、Shoelaceはまだベータ版であり、作成者はいくつかのデフォルトスタイルの変更を検討しており、いくつかのデフォルトスタイルを完全に削除して、ホストアプリケーションのスタイルを上書きしなくなります。とにかく紹介する概念は関連していますが、私が言及した靴ひもの詳細のいくつかがあなたがそれを使用するときに異なる場合でも驚かないでください。

Shoelaceのデフォルトスタイルは優(yōu)れていますが、Webアプリケーションには獨自のデザインがあり、UXコンポーネントがそれに一致することを願っています。 Webコンポーネントの世界でこれを行う方法を見てみましょう。

私たちは実際に何でも改善しようとはしていません。 Shoelaceの作成者は、私よりもデザインが優(yōu)れています。代わりに、自分のWebアプリケーションに適応できるように、

シャドウdom をクイックビュー devtoolsのタグタイトルの1つを表示します タグ要素??は、

クラスと

シャドウルート

要素に注意してください。これは基本的に、「ユーザーがWebコンポーネントのタグ間でレンダリングするものを.tab unter.tab--active」とすることを意味します。 tabindex したがって、コンポーネントはシャドウルートを作成し、それに何かを追加して、素敵なスタイルのラベルタイトルと、コンテンツをレンダリングするプレースホルダー（<slot></slot>）をレンダリングします。 パッケージングスタイル

Web開発における古典的でイライラする問題は、常にそれらが表示されたくないスタイルのカスケードでした。 <sl-tab></sl-tab>のようなものを指定するアプリケーションのスタイルルールは、これらのタグを妨害することを心配するかもしれません。これは問題ではないことがわかります。影のルートの外側(cè)のスタイルは、影のルートの內(nèi)側(cè)にあるものには影響しません（後で説明する場合があります）、逆も同様です。 <slot></slot>これの例外は継承可能なスタイルです。もちろん、Webアプリケーション內(nèi)のすべての要素に

スタイルを適用する必要はありません。代わりに、前回font-familyまたは:rootを指??定して、その下のすべてを継承させることができます。この継承は、実際にシャドウルートに浸透します。 html font-familyCSSカスタムプロパティ（一般に「CSS変數(shù)」と呼ばれる）は、関連する例外です。シャドウルートは、シャドウルートの外で定義されているCSSプロパティを間違いなく読み取ることができます。

::part継承されていないスタイルはどうですか？シャドウルートの內(nèi)部（継承しない

屬性に注意してください。これにより、セレクターを使用して、影のルートの外側(cè)から要素を見つけてスタイルできます。段階的に例を紹介します。 cursor靴ひもスタイルを上書きpart ::partこれらの方法の実用的なアプリケーションを見てみましょう?，F(xiàn)在のところ、多くの靴ひもスタイル（フォントを含む）は、CSSカスタムプロパティからデフォルト値を受け取ります。これらのフォントをアプリケーションのスタイルに合わせるには、関連するカスタムプロパティをオーバーライドします。 CSS変數(shù)Shoelaceが使用しているドキュメントを參照してください。または、Devtoolsの任意の要素のスタイルを単純に確認できます。

シャドウルートを介してスタイルを継承します

stackblitzプロジェクトのSRCディレクトリでapp.cssファイルを開きます。下部のセクションには、ステートメントが表示されます。

などの新しい値を設(shè)定してみてください。保存後、それに応じてすべてのコンテンツ（Shadow Rootで定義されたタグタイトルを含む）は調(diào)整されます。

Shoelace CSS変數(shù)を上書き:root letter-spacing: normal;letter-spacingコンポーネントは、アクティブタグのアンダースコア用のa 2px cssカスタムプロパティを読み取ります?；镜膜蔆SSを使用してオーバーライドできます。

それだけです、緑色のインジケーターがあります！

<sl-tab-group></sl-tab-group>現(xiàn)在使用している靴ひもバージョン（2.0.0-beta.83）では、障害のないタグにはポインターカーソルがあります。アクティブ（選択された）タグのデフォルトカーソルに変更しましょう。タグタイトルのコンテナに--indicator-color要素が

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

それだけです！

カスタムアニメーション

ケーキにアイシングを追加するには、Shoelaceがアニメーションをカスタマイズする方法を見てみましょう。 ShoelaceはWeb Animations APIを使用し、A APIを公開して、さまざまな要素がさまざまなインタラクションをアニメーション化する方法を制御します。詳細については、ドキュメントを參照してください。たとえば、Shoelaceのデフォルトのダイアログアニメーションを展開して內(nèi)側(cè)に縮小してから、トップアニメーションから入り、非表示になったときに下向きに移動する方法をご覧ください。 setDefaultAnimation

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>