Блог

Главная - Вопросы по программированию - Угловой мат-кнопка элемента списка в одной строке с текстом

Угловой мат-кнопка элемента списка в одной строке с текстом

#html #angular #angular-material

#HTML #угловой #угловой-материал

Вопрос:

Я хочу изменить свой значок на кнопку, чтобы использовать его как метод копирования в буфер обмена. Но когда я это делаю, кнопка перемещается в правую сторону. Только когда я пытаюсь обойти текст, это работает, но, конечно, форматирование нарушено.

 <mat-list>
        <h3 matSubheader>Persönliche Daten</h3>
        <mat-list-item>
          <button mat-icon-button ngxClipboard [cbContent]="firstname">
            <mat-icon  matListAvatar>account_box</mat-icon>
          </button>
          <h4 matLine>{{firstname}}</h4>
          <p matLine>Vorname</p>
        </mat-list-item>
        <mat-divider [inset]="true"></mat-divider>
        <mat-list-item>
          <mat-icon matListAvatar>description</mat-icon>
          <h4 matLine>{{lastname}}</h4>
          <p matLine>Nachname</p>
        </mat-list-item>
</mat-list>

Мой CSS:

 mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    background-color: rgba(0,0,0,0.04);
}

mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
    align-items: center;
    align-content: center;
    justify-content: center;
    display: flex;
}

/deep/ .mat-list-item-content {
    padding: 0!important;
}

/deep/ .mat-list-base .mat-subheader {
    padding: 0!important;
}

p {
    font-family: Lato;
    color: rgba(0,0,0,.54);
}

Здесь вы можете увидеть, что происходит

Ответ №1:

Используя свойство (click)

Вы можете просто заставить значок вести себя как кнопка.

Добавьте к нему (click) свойство и вызовите нужную вам функцию!

 <mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>

Затем вы можете добавить к ней: наведите на нее css, чтобы она выглядела как кнопка.

Использование HTML / CSS

Вы можете разместить любое содержимое рядом с кнопкой в оболочке, вы можете настроить это в css, чтобы оно вело себя по-другому, если это необходимо (если вы в конечном итоге добавите больше данных для отображения, вам, возможно, придется поиграть со свойствами flex, margin … или вам могут понадобиться вложенные оболочки и т. Д. )

 <button mat-icon-button > 
  <mat-icon matListAvatar>account_box</mat-icon> 
</button> 

<div class="test-wrapper"> 
  <h4 matLine>{{firstname}}</h4> 
  <p matLine> Vorname</p> 
</div>

с помощью этого css:

 .test-wrapper{ 
    padding-right: 0; 
    padding-left: 16px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
}
 
.test-wrapper > *{ 
    margin: 0; 
}

Комментарии:

1. Я не знаю, как заставить простой значок действовать как кнопка. Для пользователя должно быть очевидно, что это интерактивно и имеет эффект.

2. Ну, вы сказали, что хотите изменить значок на кнопку. Если вы добавите (click) свойство, оно вызовет любую функцию после нажатия на значок. Вам больше ничего не нужно делать. И чтобы было очевидно, что это интерактивно, вы можете использовать некоторый css, чтобы он становился темнее при наведении курсора мыши. Я не уверен, в чем проблема. Я неправильно понимаю, что вы пытаетесь сделать?

3. Проблема в том, что нет функции для вызова (click) . Так что это действительно не сработает. Библиотека работает по-другому.

4. Понял, хотя я уверен, что есть способ скопировать в clipborad, написав свою собственную функцию, использование библиотеки, вероятно, более логично. Я посмотрю на это сам и отредактирую это, если что-нибудь найду

5. Да, я знаю, что я также хотел создать свою собственную функцию, но потом мое мнение изменилось, потому что я думаю, что буду использовать ее также в разных компонентах.