Введение в Bulma CSS с React
Введение
Bulma — это CSS-фреймворк, в котором есть помощники, элементы и компоненты. Вы можете использовать классы Bulma и HTML-структуры для надежного и расширяемого дизайна в своих проектах.
В этой статье вы будете использовать react-bulma-components, одну из самых популярных реализаций CSS-фреймворка Bulma в React.
Предпосылки
Для выполнения этого урока вам понадобится:
- Локальная среда разработки для Node.js. Следуйте инструкциям по установке Node.js и созданию локальной среды разработки.
- Некоторое знакомство с React. Вы можете ознакомиться с нашей серией статей «Как программировать в React.js».
Это руководство было проверено с помощью Node v16.2.0, npm v7.14.0, react v17.0.2 и react-bulma-components v4.0.4. .
Настройка проекта
Начните с использования create-react-app для создания приложения React, а затем установите зависимости:
- npx create-react-app react-bulma-components-example
Перейдите в новый каталог проекта:
- cd react-bulma-components-example
Теперь вы можете запустить приложение React:
- npm start
Исправьте любые ошибки или проблемы с вашим проектом. И посетите localhost:3000 в веб-браузере.
Когда у вас есть работающее приложение React, вы можете начать добавлять react-bulma-components:
- npm install react-bulma-components@4.0.4
На данный момент у вас есть новый проект React с react-bulma-components.
Изучение элементов и компонентов
Библиотека react-bulma-components поддерживает элементы, компоненты, формы и макеты Bulma.
Рассмотрим пример использования компонента Button. Во-первых, вам нужно будет импортировать таблицу стилей Bulma. Затем вам нужно будет импортировать компонент.
import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';
function App() {
return (
<div className="App">
<Button>Example</Button>
</div>
);
}
export default App;
Это создаст Button со стилями Bulma.
Примечание. В предыдущих версиях react-bulma-components можно было указать полные и lib-зависимые версии компонентов. Это было изменено в версии 4.0, когда Bulma была изменена на одноранговую зависимость, и теперь таблица стилей должна быть импортирована.
Как и большинство фреймворков CSS, Bulma поставляется со стилями для ваших общих компонентов и рядом настроек, которые можно выполнить, добавив различные классы к вашим элементам.
react-bulma-components еще больше упрощает работу, предоставляя компоненты для каждого из основных элементов, и устраняет необходимость жонглировать именами классов в пользу передачи свойств вашим компонентам.
Хотите сделать большую кнопку цвета danger с закругленными углами и контуром?
<Button
color="danger"
size="large"
rounded
outlined
>
Example
</Button>
Все компоненты react-bulma-components могут принимать свойство renderAs, которое позволяет вам определить, какой тип элемента следует использовать для визуализации компонента.
По умолчанию компонент Button отображается как элемент button. Используйте свойство renderAs, чтобы отобразить его как ссылку.
Наряду со свойством renderAs мы также должны включить href, чтобы указать, куда отправлять людей, когда они нажимают на ссылку:
<Button
renderAs="a"
href="https://www.example.com"
color="danger"
size="large"
rounded
outlined
>
Example
</Button>
На самом деле, все наши компоненты Bulma могут принимать любые свойства, которые вы можете им присвоить. Это означает, что вы всегда можете применить дополнительные стили с помощью свойств style или добавить дополнительные классы CSS с помощью className.
При использовании className любые предоставленные вами классы будут добавляться в сгенерированный библиотекой список имен классов Bulma.
Цвета
Подобно большинству современных фреймворков CSS, Bulma поставляется с цветовой темой, в которой используются некоторые семантические соглашения об именах.
Эти цвета темы включают основной, ссылка, информация, успех, предупреждение и опасность.
Кроме того, доступны еще несколько буквальных цветов: черный, темный, светлый и белый.
Компоненты, поддерживающие цвета, принимают свойство color:
<Button color="success">Example</Button>
Который назначит правильный класс цвета визуализируемому элементу. Поскольку это свойство цвета присваивает классы отображаемому элементу, вы не можете просто присвоить произвольное значение цвета.
Размеры
Некоторые компоненты принимают свойство size, но они могут принимать и другие типы значений.
Это связано с тем, что некоторые компоненты (например, Заголовок) используют числовые значения:
<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>
В то время как другие (например, Button) используют текстовые имена для размеров:
<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>
Для компонентов, которые принимают текстовые размеры, доступны маленький, нормальный, средний и большой. Размер нормальный используется по умолчанию, если не указан size.
Использование системы сетки
Bulma также поддерживает систему сеток, помогающую последовательно размещать контент. По умолчанию Bulma использует макет с 12 столбцами, в котором используются проценты или количество столбцов.
Во-первых, вам нужно будет импортировать компонент:
import { Columns } from 'react-bulma-components';
Для размеров, основанных на 12-колоночном макете, вы устанавливаете size числовое значение от 1 до 12:
<Columns>
<Columns.Column size={1}>One</Columns.Column>
<Columns.Column>Eleven</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={2}>Two</Columns.Column>
<Columns.Column>Ten</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={3}>Three</Columns.Column>
<Columns.Column>Nine</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={4}>Four</Columns.Column>
<Columns.Column>Eight</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={5}>Five</Columns.Column>
<Columns.Column>Seven</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={6}>Six</Columns.Column>
<Columns.Column>Six</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={7}>Seven</Columns.Column>
<Columns.Column>Five</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={8}>Eight</Columns.Column>
<Columns.Column>Four</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={9}>Nine</Columns.Column>
<Columns.Column>Three</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={10}>Ten</Columns.Column>
<Columns.Column>Two</Columns.Column>
</Columns>
<Columns>
<Columns.Column size={11}>Eleven</Columns.Column>
<Columns.Column>One</Columns.Column>
</Columns>
А для процентного размера вы можете установить size равным одна пятая, одна четверть, одна треть, половина, две трети или три четверти:
<Columns>
<Columns.Column size="one-fifth">20%</Columns.Column>
<Columns.Column>80%</Columns.Column>
</Columns>
<Columns>
<Columns.Column size="one-quarter">25%</Columns.Column>
<Columns.Column>75%</Columns.Column>
</Columns>
<Columns>
<Columns.Column size="one-third">33.333333333%</Columns.Column>
<Columns.Column>66.666666667%</Columns.Column>
</Columns>
<Columns>
<Columns.Column size="half">50%</Columns.Column>
<Columns.Column>Also 50%</Columns.Column>
</Columns>
<Columns>
<Columns.Column size="two-thirds">66.666666667%</Columns.Column>
<Columns.Column>33.333333333%</Columns.Column>
</Columns>
<Columns>
<Columns.Column size="three-quarters">75%</Columns.Column>
<Columns.Column>25%</Columns.Column>
</Columns>
Эти два подхода к сеточной системе будут составлять до 12 столбцов или 100% соответственно.
Заключение
В этой статье вы изучили некоторые функции Bulma с помощью react-bulma-components.
Опираясь на хорошо поддерживаемую и поддерживаемую структуру CSS, вы можете стилизовать и проектировать свои проекты. Они могут эффективно сэкономить время.
Обратитесь к документации Bulma для получения дополнительной информации.