CollapseCollapse
Daraltılabilir panel bileşeni, karmaşık içerik alanlarını gruplandırmak ve gizlemek için kullanılır, böylece sayfanın düzenli kalması sağlanır.
Lütfen unutmayın ki, daraltılabilir panel bileşeninin kendisi herhangi bir stil içermez, stilleri kendiniz eklemeniz veya diğer bileşenlerle birlikte kullanmanız gerekir.
Bileşenleri ihtiyacınıza göre içe aktarın:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Kullanım örneği:
ilk içerik
ikinci içerik
<mdui-collapse>
<mdui-collapse-item header="ilk başlık">ilk içerik</mdui-collapse-item>
<mdui-collapse-item header="ikinci başlık">ikinci içerik</mdui-collapse-item>
</mdui-collapse>
<mdui-collapse-item> bileşeninin header özniteliği aracılığıyla panel başlık metnini ayarlayabilirsiniz. Ayrıca panel başlık öğesini belirtmek için header slot'unu da kullanabilirsiniz. Bileşenin varsayılan slot'u panel içeriği içindir.
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Kaynak Kodu
<mdui-collapse> bileşenine accordion özniteliğini eklemek akordeon modunu etkinleştirir. Bu modda, bir seferde yalnızca bir panel açık durumda olabilir.
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Kaynak Kodu
<mdui-collapse> bileşeninin value özniteliği aracılığıyla, geçerli açık olan panel(ler)i alabilir veya açılmasını istediğiniz panel(ler)i ayarlayabilirsiniz.
Akordeon modunda, value özniteliğinin değeri bir string'dir. Bu özniteliği HTML özniteliği veya JavaScript özelliği olarak kullanabilirsiniz. Akordeon olmayan modda, value özniteliğinin değeri bir dizidir ve bu durumda bu değeri yalnızca JavaScript özelliği aracılığıyla kullanabilirsiniz.
Akordeon Modu
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
Akordeon Olmayan Mod
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
<mdui-list>
<mdui-list-subheader>Akordeon Modu</mdui-list-subheader>
<mdui-collapse accordion value="öğe-1">
<mdui-collapse-item value="öğe-1">
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="öğe-2">
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Akordeon Olmayan Mod</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="öğe-1">
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="öğe-2">
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["öğe-1", "öğe-2"];
</script>
Kaynak Kodu
<mdui-collapse> bileşenine disabled özniteliğini ekleyerek tüm daraltılabilir panel grubunu devre dışı bırakabilirsiniz. Benzer şekilde, <mdui-collapse-item> bileşenine disabled özniteliğini ekleyerek belirli bir paneli devre dışı bırakabilirsiniz.
Tümü Devre Dışı
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
İlk Panel Devre Dışı
Öğe 1
Öğe 1 - alt öğe
Öğe 2
Öğe 2 - alt öğe
<mdui-list>
<mdui-list-subheader>Tümü Devre Dışı</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>İlk Panel Devre Dışı</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Öğe 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Öğe 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 2 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Kaynak Kodu
Varsayılan olarak, panel başlık alanının herhangi bir yerine tıklamak daraltma işlemini tetikler. Daraltmayı tetikleyecek öğeyi belirtmek için <mdui-collapse-item> bileşeninin trigger özniteliğini kullanabilirsiniz. trigger özniteliği bir CSS seçicisi veya DOM öğesi olabilir.
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Öğe 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Öğe 1 - alt öğe</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Kaynak Kodu| Öznitelik | Özellik | Reflect | Tür | Varsayılan |
|---|
value | value | | string | - |
Bu daraltılabilir panel öğesinin değeri.
|
Bu daraltılabilir panel öğesinin başlık metni.
|
disabled | disabled | | boolean | false |
Bu daraltılabilir panel öğesinin devre dışı olup olmadığı.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
Bu öğeye tıklandığında daraltma tetiklenir. Değer bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. Varsayılan olarak tüm başlık alanına tıklanarak tetiklenir.
|
| Ad |
|---|
open |
Açılma başladığında tetiklenir.
|
opened |
Açılma animasyonu tamamlandığında tetiklenir.
|
close |
Kapanma başladığında tetiklenir.
|
closed |
Kapanma animasyonu tamamlandığında tetiklenir.
|
| Ad |
|---|
| Varsayılan |
Daraltılabilir panel öğesinin gövde içeriği.
|
Daraltılabilir panel öğesinin başlık içeriği.
|
| Ad |
|---|
Daraltılabilir panelin başlık içeriği.
|
body |
Daraltılabilir panelin gövde içeriği.
|
| Öznitelik | Özellik | Reflect | Tür | Varsayılan |
|---|
accordion | accordion | | boolean | false |
Akordeon modunun etkinleştirilip etkinleştirilmeyeceği.
|
value | value | | string | string[] | - |
Şu anda genişletilmiş olan <mdui-collapse-item> değeri.
Not: Bu özelliğin HTML özelliği her zaman bir dizedir ve yalnızca accordion true olduğunda başlangıç değeri ayarlanabilir; bu özelliğin JavaScript özellik değeri accordion true olduğunda bir dize, accordion false olduğunda bir dize dizisidir. Bu nedenle, accordion false olduğunda, bu değer yalnızca JavaScript özellik değeri değiştirilerek değiştirilebilir.
|
disabled | disabled | | boolean | false |
Bu daraltılabilir panelin devre dışı olup olmadığı.
|
| Ad |
|---|
change |
Şu anda genişletilmiş daraltılabilir panel öğesi değiştiğinde tetiklenir.
|
Önceki Bölüm
CircularProgress Dairesel İlerleme
Sonraki Bölüm
Dialog Diyalog
