Bài 50: Toggle Tìm hiểu ion-toggle

Bài 50: Toggle Tìm hiểu ion-toggle

codersulution Thứ Tư, tháng 8 24, 2022

  

ion-toggle

Chuyển đổi thay đổi trạng thái của một tùy chọn. Có thể bật hoặc tắt các nút chuyển đổi bằng cách nhấn hoặc vuốt chúng. Chúng cũng có thể được kiểm tra theo chương trình bằng cách đặt thuộc checked tính.



Customization

ion-toggle {
  --background: #000;
  --background-checked: #7a49a5;

  --handle-background: #7a49a5;
  --handle-background-checked: #000;
}
Một trường hợp phức tạp hơn có thể liên quan đến việc thêm hình ảnh vào nền xử lý.


ion-toggle {
  --handle-background-checked: #fff url(/assets/power-icon.png) no-repeat center / contain;
}
Tiến thêm một bước nữa, chúng ta có thể sử dụng các yếu tố ::beforehoặc ::aftergiả để định vị văn bản trên nền.


ion-toggle::before {
  position: absolute;

  top: 16px;
  left: 10px;

  content: "ON";

  color: white;
  font-size: 8px;

  z-index: 1;
}

Việc điều chỉnh chiều rộng của nút gạt nhỏ hơn sẽ dẫn đến đường đi hẹp hơn, với tay cầm vẫn giữ nguyên chiều rộng mặc định. Nếu muốn, hãy đặt --handle-widthđể làm cho tay cầm hẹp hơn.

ion-toggle {
  width: 40px;
}
Đã sao chép

Điều chỉnh chiều rộng của nút gạt lớn hơn sẽ dẫn đến đường đi rộng hơn, với tay cầm vẫn giữ nguyên chiều rộng mặc định. Nếu muốn, hãy đặt --handle-widthđể làm cho tay cầm rộng hơn.

ion-toggle {
  width: 100px;
}

Việc điều chỉnh chiều cao của nút gạt nhỏ hơn mặc định sẽ dẫn đến việc tự động điều chỉnh kích thước chiều cao tay cầm theo đường đi. Trong iostay cầm ngắn hơn rãnh ( 100% - 4px) và trong mdtay cầm cao hơn rãnh ( 100% + 6px).

ion-toggle {
  height: 15px;
}
Sao chépĐã sao chép

Lưu ý: điều này không ảnh hưởng đến chiều rộng tay cầm, chiều rộng nên được thiết lập bằng cách sử dụng --handle-width.

Điều chỉnh chiều cao của nút gạt lớn hơn sẽ giữ cho tay cầm ở giữa ở độ cao mặc định. Điều này có thể được sửa đổi bằng cách cài đặt --handle-heightcó thể được đặt thành bất kỳ số tiền nào nhưng sẽ không vượt quá --handle-max-height.

ion-toggle {
  height: 60px;
}

Khoảng cách đề cập đến khoảng cách ngang giữa tay cầm và rãnh. Theo mặc định, xử lý có 2pxcác khoảng cách xung quanh nó trong ios chỉ . Trong mdchế độ không có khoảng cách mặc định.

Để xóa khoảng cách theo chiều ngang , hãy đặt --handle-spacingthành 0px.

ion-toggle {
  --handle-spacing: 0px;
}
Sao chépĐã sao chép

Do tay cầm có chiều cao cố định, để loại bỏ khoảng cách trên cùng và dưới, hãy đặt chiều cao thành 100%.

ion-toggle {
  --handle-spacing: 0px;
  --handle-height: 100%;
}

Có --handle-border-radiusthể được sử dụng để thay đổi border-radiustrên tay cầm.

ion-toggle {
  --handle-border-radius: 14px 4px 4px 14px;
}
Sao chépĐã sao chép

Để nhắm mục tiêu border-radiusduy nhất khi nút chuyển đổi được chọn, hãy nhắm mục tiêu .toggle-checked:

ion-toggle.toggle-checked {
  --handle-border-radius: 4px 14px 14px 4px;
}

Có --handle-box-shadowthể được sử dụng để thay đổi box-shadowtrên tay cầm.

ion-toggle {
  --handle-box-shadow: 4px 0 2px 0 red;
}
Sao chépĐã sao chép

Để nhắm mục tiêu bóng hộp chỉ khi chuyển đổi được chọn, hãy nhắm mục tiêu .toggle-checked:

ion-toggle.toggle-checked {
  --handle-box-shadow: -4px 0 2px 0 red;
}

Cài đặt overflowtrên nút bật tắt sẽ được kế thừa bởi nút điều khiển. Theo mặc định, phần tràn được đặt thành chỉ hiddentrong ios. Di box-shadowchúc vẫn bị cắt do thuộc tính containcss. Đặt containthành noneđể làm tràn vùng chứa chuyển đổi.

ion-toggle {
  --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);

  overflow: visible;

  contain: none;
}

Usage


<!-- Default Toggle -->
<ion-toggle></ion-toggle>

<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>

<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>

<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>

<!-- Toggles in a List -->
<ion-list>
  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-toggle [(ngModel)]="sausage" disabled="true"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle [(ngModel)]="mushrooms"></ion-toggle>
  </ion-item>
</ion-list>
<!-- Default Toggle -->
<ion-toggle></ion-toggle>

<!-- Disabled Toggle -->
<ion-toggle disabled></ion-toggle>

<!-- Checked Toggle -->
<ion-toggle checked></ion-toggle>

<!-- Toggle Colors -->
<ion-toggle color="primary"></ion-toggle>
<ion-toggle color="secondary"></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="light"></ion-toggle>
<ion-toggle color="dark"></ion-toggle>

<!-- Toggles in a List -->
<ion-list>
  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-toggle slot="end" value="pepperoni" checked></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-toggle slot="end" value="sausage" disabled></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-toggle slot="end" value="mushrooms"></ion-toggle>
  </ion-item>
</ion-list>
import React, { useState } from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonToggle, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';

export const ToggleExamples: React.FC = () => {
  const [checked, setChecked] = useState(false);
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>ToggleExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>

          <IonItemDivider>Default Toggle</IonItemDivider>
          <IonItem>
            <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
            <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
          </IonItem>

          <IonItemDivider>Disabled Toggle</IonItemDivider>
          <IonItem><IonToggle disabled /></IonItem>

          <IonItemDivider>Checked Toggle</IonItemDivider>
          <IonItem><IonToggle checked /></IonItem>

          <IonItemDivider>Toggle Colors</IonItemDivider>
          <IonItem><IonToggle color="primary" /></IonItem>
          <IonItem><IonToggle color="secondary" /></IonItem>
          <IonItem><IonToggle color="danger" /></IonItem>
          <IonItem><IonToggle color="light" /></IonItem>
          <IonItem><IonToggle color="dark" /></IonItem>

          <IonItemDivider>Toggles in a List</IonItemDivider>
          <IonItem>
            <IonLabel>Pepperoni</IonLabel>
            <IonToggle value="pepperoni" />
          </IonItem>

          <IonItem>
            <IonLabel>Sausage</IonLabel>
            <IonToggle value="sausage" disabled={true} />
          </IonItem>

          <IonItem>
            <IonLabel>Mushrooms</IonLabel>
            <IonToggle value="mushrooms" />
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};
import { Component, State, h } from '@stencil/core';

@Component({
  tag: 'toggle-example',
  styleUrl: 'toggle-example.css'
})
export class ToggleExample {
  @State() pepperoni: boolean = false;
  @State() sausage: boolean = true;
  @State() mushrooms: boolean = false;

  render() {
    return [
      // Default Toggle
      <ion-toggle></ion-toggle>,

      // Disabled Toggle
      <ion-toggle disabled></ion-toggle>,

      // Checked Toggle
      <ion-toggle checked></ion-toggle>,

      // Toggle Colors
      <ion-toggle color="primary"></ion-toggle>,
      <ion-toggle color="secondary"></ion-toggle>,
      <ion-toggle color="danger"></ion-toggle>,
      <ion-toggle color="light"></ion-toggle>,
      <ion-toggle color="dark"></ion-toggle>,

      // Toggles in a List
      <ion-list>
        <ion-item>
          <ion-label>Pepperoni</ion-label>
          <ion-toggle checked={this.pepperoni} onIonChange={(ev) => this.pepperoni = ev.detail.checked}></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Sausage</ion-label>
          <ion-toggle checked={this.sausage} onIonChange={(ev) => this.sausage = ev.detail.checked} disabled={true}></ion-toggle>
        </ion-item>

        <ion-item>
          <ion-label>Mushrooms</ion-label>
          <ion-toggle checked={this.mushrooms} onIonChange={(ev) => this.mushrooms = ev.detail.checked}></ion-toggle>
        </ion-item>
      </ion-list>,

      <div>
        Pepperoni: {this.pepperoni ? "true" : "false"}<br/>
        Sausage: {this.sausage ? "true" : "false"}<br/>
        Mushrooms: {this.mushrooms ? "true" : "false"}
      </div>
    ];
  }
}

<template>
  <!-- Default Toggle -->
  <ion-toggle></ion-toggle>

  <!-- Disabled Toggle -->
  <ion-toggle disabled></ion-toggle>

  <!-- Checked Toggle -->
  <ion-toggle checked></ion-toggle>

  <!-- Toggle Colors -->
  <ion-toggle color="primary"></ion-toggle>
  <ion-toggle color="secondary"></ion-toggle>
  <ion-toggle color="danger"></ion-toggle>
  <ion-toggle color="light"></ion-toggle>
  <ion-toggle color="dark"></ion-toggle>

  <!-- Toggles in a List -->
  <ion-list>
    <ion-item>
      <ion-label>Pepperoni</ion-label>
      <ion-toggle
        @ionChange="toppings.value.push($event.target.value)"
        value="pepperoni"
        :checked="toppings.value.indexOf('pepperoni') !== -1">
      </ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Sausage</ion-label>
      <ion-toggle
        @ionChange="toppings.value.push($event.target.value)"
        value="sausage"
        :checked="toppings.value.indexOf('pepperoni') !== -1"
        disabled="true">
      </ion-toggle>
    </ion-item>

    <ion-item>
      <ion-label>Mushrooms</ion-label>
      <ion-toggle
        @ionChange="toppings.value.push($event.target.value)"
        value="mushrooms"
        :checked="toppings.value.indexOf('pepperoni') !== -1">
      </ion-toggle>
    </ion-item>
  </ion-list>
</template>

<script>
import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
import { defineComponent, vue } from 'vue';

export default defineComponent({
  components: { IonLabel, IonList, IonItem, IonToggle },
  setup() {
    const toppings = ref([]);

    return { toppings };
  }
});
</script>

Properties

checked

Description

If true, the toggle is selected.

Attributechecked
Typeboolean
Defaultfalse

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

disabled

Description

If true, the user cannot interact with the toggle.

Attributedisabled
Typeboolean
Defaultfalse

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

name

Description

The name of the control, which is submitted with the form data.

Attributename
Typestring
Defaultthis.inputId

value

Description

The value of the toggle does not mean if it's checked or not, use the checked property for that.

The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <form>.

Attributevalue
Typenull | string | undefined
Default'on'

Events

NameDescription
ionBlurEmitted when the toggle loses focus.
ionChangeEmitted when the value property has changed.
ionFocusEmitted when the toggle has focus.

CSS Shadow Parts

NameDescription
handleThe toggle handle, or knob, used to change the checked state.
trackThe background track of the toggle.

CSS Custom Properties

NameDescription
--backgroundBackground of the toggle
--background-checkedBackground of the toggle when checked
--border-radiusBorder radius of the toggle track
--handle-backgroundBackground of the toggle handle
--handle-background-checkedBackground of the toggle handle when checked
--handle-border-radiusBorder radius of the toggle handle
--handle-box-shadowBox shadow of the toggle handle
--handle-heightHeight of the toggle handle
--handle-max-heightMaximum height of the toggle handle
--handle-spacingHorizontal spacing around the toggle handle
--handle-transitionTransition of the toggle handle
--handle-widthWidth of the toggle handle


codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash